seo如何推广网站,继续好商会网站建设,创建网站有什么用,东莞市58同城招聘网最新招聘文章目录 参考文章前提条件1. 初始化Hexo2. 初始化仓库3. 创建Token4. 修改_config.yml5. 配置Github Action工作流6. 推送验证7. 配置Github Pages8. 修改Hexo主题样式10. 添加文章遇到了一些问题和方案1. 网站没有样式问题2. 图片不显示 参考文章
Bilibili视频教程-9分钟零成… 文章目录 参考文章前提条件1. 初始化Hexo2. 初始化仓库3. 创建Token4. 修改_config.yml5. 配置Github Action工作流6. 推送验证7. 配置Github Pages8. 修改Hexo主题样式10. 添加文章遇到了一些问题和方案1. 网站没有样式问题2. 图片不显示 参考文章
Bilibili视频教程-9分钟零成本搭建自动化部署个人博客(Hexo Github Action Page) Hexo官方文档 利用 GitHub Action 自动部署 Hexo 博客 Hexo主题-Icarus快速上手
前提条件
当前PC环境中有Node和Git。版本可以参考Hexo文档。
文章中出现的yourusername为Github用户名your-repo为仓库名。
1. 初始化Hexo
安装脚手架初始化hexo这会新建blog文件夹进入后安装依赖。
npm install -g hexo-cli
hexo init blog
cd blog
npm install2. 初始化仓库
可以选择利用VSCode等软件直接对项目开源到github仓库。
也可以手动去github创建一个空仓库然后手动在命令行中推送。
git init
git remote add origin https://github.com/yourusername/your-repo.git
git add .
git commit -m Initial commit
git push -u origin main3. 创建Token
在个人设置中新增一个Personal access tokens。至少要包含repo权限然后记住token。 这个token是给Github Action用的Github Action会把Hexo编译部署到gh-pages分支。
随后在存放Hexo代码的仓库里把这个Token新增进去名称为GH_TOKEN(随意后面需要一致)。
4. 修改_config.yml
在_config.yml中修改deploy字段。指示Hexo在deploy时的推送地址。
deploy:type: gitrepo: https://github.com/yourusername/your-repo.gitbranch: gh-pages5. 配置Github Action工作流
在.github文件夹下新增workflows文件夹然后新增deploy.yml文件内容如下。
里面有个node-version要和你本地的node一致。 步骤大致意思就是使用ubuntu-latest作为基础环境然后安装各种依赖随后hexo generate生成博客网站静态文件夹 把这个文件夹推送到同一仓库的gh-pages分支。
name: Deploy Hexo to GitHub Pageson:push:branches:- main # 当推送到 main 分支时触发jobs:build:runs-on: ubuntu-lateststeps:- name: Checkout repositoryuses: actions/checkoutv2with:submodules: false # 禁用子模块检查- name: Setup Node.jsuses: actions/setup-nodev2with:node-version: 18- name: Install Dependenciesrun: npm install- name: Install Hexo Git Deployerrun: |npm install hexo-deployer-git --savenpm install hexo-cli -g- name: Clean and Generate Static Filesrun: |hexo cleanhexo generate- name: Configure Gitrun: |git config --global user.name github-actions[bot]git config --global user.email github-actions[bot]users.noreply.github.com- name: Deploy to GitHub Pagesenv:GH_TOKEN: ${{ secrets.GH_TOKEN }}run: |cd public/git initgit add -Agit commit -m Create by workflowsgit remote add origin https://${{ secrets.GH_TOKEN }}github.com/yourusername/your-repo.gitgit push origin HEAD:gh-pages -f6. 推送验证
把刚才更新的所有文件都推送一遍github就会触发工作流然后去网站看工作流运转的如何。 等一切运转完毕就会发现仓库多出一个gh-pages分支。
7. 配置Github Pages
在仓库settings中配置page来源为gh-pages分支即可。等待网站部署完毕就可以看了。网站链接可以在settings的GitHub Pages看到也可以去action里看到。
8. 修改Hexo主题样式
以一个比较热门的主题为演示示例参考地址https://github.com/ppoffice/hexo-theme-icarus。
若要使用NPM将Icarus安装为Node包在你的Hexo站点根目录运行如下命令
npm install -S hexo-theme-icarus hexo-renderer-inferno接下来使用hexo命令修改主题为Icarus:
hexo config theme icarus会发现多出一个_config.icarus.yml文件。这是Icarus主题的配置文件。
最后推送到仓库等待部署后就可以了。
10. 添加文章
你可以执行下列命令来创建一篇新文章或者新的页面。
$ hexo new [layout] title您可以在命令中指定文章的布局layout默认为 post可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。
文章添加编辑后现在只需要推送到仓库那么github不仅会保存你的Hexo个人博客源码还会自动更新个人博客静态页面到gh-pages由此触发github-page功能来更新你的个人博客网站。
遇到了一些问题和方案
1. 网站没有样式问题
在网站打开F12发现css等样式资源无法加载仔细查看报错原因和请求地址发现并不是当前仓库。
缺少仓库地址所以把请求地址复制一份并在后面添加上仓库名即可这需要修改_config.yml中修改url字段。yourusername似乎为小写。
推送后等待工作流执行查看结果。
url: https://yourusername.github.io/your-repo
root: /your-repo/2. 图片不显示
在_config.yml中设置
post_asset_folder: true意思是每个md博文会单独配套一个同名文件夹用来存放图片。形如
source/_posts/
├── my-new-post.md
└── my-new-post/└── example.jpghexo提供三种语法
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}那么在md中可以这样引用图片
{% asset_img example.jpg This is an example image %}这样一来部署的时候图片就不会不显示了但是有个新的问题 我在本地编辑md的时候无法预览图片怎么办。
建议用VSCode下载插件vscode-hexo和Hexo Utils随后在左边栏目就可以看到新Hexo Utils的新菜单只要你的VSCode当前打开的文件夹是hexo的根目录那么插件就会自动识别到当你对md文件使用“侧边预览”时图片就正常显示了。
