我的个人博客网站搭建全记录(Hexo+GitHub Pages+GitHub Actions)

前言

先赞后看，已成习惯。大家好，我是奉旨撸码的胖大海。

年轻的时候弄了个博客，每年都只会被访问一次（在阿里云给我下续费通牒的时候）。很冤，但抱着”每个前端人都应该有自己的博客“的信念，咬着牙续费了几次。今年3月份，续费通知如约而至，我再一次来到了历史的岔路口。此刻，6*12块钱和心中的信仰，站在命运天平的两端，左右摇曳……

如你所见，事情的结局是：QTMD我全都要，小孩子才做选择题！

独乐乐不如众乐乐，一篇”手摸手教学之白嫖博客并持续集成“献给各位。

效果前瞻

前往围观

技术栈

• Hexo

  一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

• GitHub Pages

  GitHub的网站托管服务。通过简单的配置就可以把你的仓库变成一个静态资源服务器， 直接从您的GitHub存储库托管

• GitHub Actions

  GitHub 的持续集成服务。持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub Actions允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。

  感兴趣的小伙伴，移步阮一峰大佬的GitHub Actions 入门教程。

Hexo项目搭建

白嫖第一步：创建项目并实现本地预览。

1. 全局安装hexo-cli

npm install -g hexo-cli

2. 初始化项目

hexo init <folder>

目录结构应该是这样式的

├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
├── source
└── themes

3. 安装依赖

cd <folder>
npm i

4. 运行

npm run server

浏览器访问http://localhost:4000/

5. 应用主题

有点丑，咱们给换个主题。在知乎看了好多答案，选来选取，还是(张凯强的技术分享)最有眼缘。

5.1. 安装主题hexo-theme-fluid

npm install --save hexo-theme-fluid

5.2. 修改配置

// _config.yml
language: zh-CN
theme: fluid

5.3. 重启服务并刷新页面

舒服了……当然你也可以自己选。hexo官网348款主题总有一款适合你。

6. 构建

npm run build

执行成功后，项目中会多出一个public目录，如果不托管到Git Pages的话，把它上传到你的静态资源服务器即可。

GitHub Actions自动部署

白嫖第二步：提交代码到GithHub并实现自动部署

1. 在Github新建仓库并提交代码

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:qq9694526/blog.git
git push -u origin main

2. 生成秘钥

参照官方文档生成秘钥， Select scopes仅选择workflow那一项即可。 ps: 创建成功记得复制秘钥

3. 设置秘钥

把上一步复制的秘钥粘贴进去，并起个名字，后面脚本会用到。我这里用的ACCESS_TOKEN

4. 新建actions脚本

在根目录下依次创建.github/workflows/deploy.yml，内容如下

name: Build and Deploy
on:
  push:	
    branches:	
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master
      with:
        submodules: true

    - name: Build and Deploy
      uses: solybum/hexo-deploy@master
      env:
        PERSONAL_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        PUBLISH_REPOSITORY: qq9694526/blog # The repository the action should deploy to.
        BRANCH: blog  # The branch the action should deploy to.
        PUBLISH_DIR: ./public # The folder the action should deploy.

它的作用就是当main分支有代码提交时，自动构建并发布到blog分支。

这里需要修改PERSONAL_TOKEN、PUBLISH_REPOSITORY和BRANCH为自己的

Ps: 这是我在Actions库里搜hexo抄来的，大家也可以自行选择。

5. 效果展示

现在提交任意代码后，脚本会被触发，且在Actions能看到脚本执行情况。

等待执行完毕，切换到blog分支(上面.yml倒数第二行有配置)，可以看到构建后的代码被提交到了这里。

以后咱们每次在main push代码，GitHub Actions都会自动的帮我们构建并发布到远程分支

GitHub Pages托管网站

白嫖第三步：网站托管并设置域名，实现通过域名访问博客

1. 设置

这个设置就是把你的仓库变成一个静态资源服务器

2. 域名解析

没有域名的请直接第四步 这是我在阿里云域名的解析配置

3. 设置自定义域名

保存后，就可以通过www.zhaohaipeng.com/访问了

4. 不自定义域名

如果不自定义域名，咱们可以直接通过qq9694526.github.io/blog/访问，但打开… Hexo官网中有相关说明

如果您的网站存放在子目录中，例如 http://example.com/blog，则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/。咱们需要修改构建配置，在_config.yml中新增根路径配置

// _config.yml
root: '/blog/'

可以本地npm run build验证下结果。看到public/index.html中（拉到最下面）js路径有以下变化，说明配置已生效。

<script  src="/js/boot.js" ></script>
<script  src="/blog/js/boot.js" ></script>

现在提交代码、触发Actions成功后，qq9694526.github.io/blog/就可以正常访…

图床

在Markdown编写过程中，不可避免的需要插入图片。

我一开始的操作极其繁琐：先是把本地图片放到项目source/img目录下，然后push到github触发自动部署，等成功后复制图片地址，最后再回到Markdown修改图片链接。

极度不舒适！随后搁网上查看了很多方案，试了一些。

最终选择了：Typora + PicGo + 七牛云。

• Typora：世界上最漂亮的Markdown编辑器，支持右键自动上传图片。

• PicGo：一个用于快速上传图片并获取图片 URL 链接的工具，支持七牛等7种图床。

• 七牛云：提供免费的存储空间(10G)。优点是比github快，缺点是需要实名认证和一个备案过的域名。七牛提供的测试域名域名仅有1个月失效。

  七牛融合 CDN 测试域名（以 clouddn.com/qiniucdn.com/qnssl.com/qbox.me 结尾），每个域名每日限总流量 10GB，每个测试域名自创建起30个自然日后系统会自动回收，仅供测试使用并且不支持 Https 访问，详情查看七牛测试域名使用规范。点击下列域名可查看每个域名剩余回收时间。

操作步骤大致如下：

1. 注册七牛云并创建存储空间

2. 安装PicGo并配置七牛图床

3. 在Typora中设置PicGo

详细的图片教程可以参看CodeSheep的白嫖七牛云作为个人博客免费图床

常见问题

1. 自动化部署后自定义域名丢失

​ 在source新增CNAME文件

2. 文档描述不具体、不理解配置项的作用？

​ 可以通过查看主题源码中的.ejs文件，分析配置的作用和获取文档中未说明的配置项

参考链接

1. Hexo主题hexo-theme-fluid
2. GitHub Actions 入门教程
3. 图片资源pixabay