搭建个人博客

前言

搭建博客的几种方式

• 优点：直接创建账号使用即可，简单方便，不需要维护
• 缺点：文章分散在各个平台，不易于管理

2. github pages + hugo、hexo等静态博客系统（强烈推荐🌟）

• 优点：文章都在自己手里，方便管理。因为是从0开始一步步搭建，所以还能学习到很多相关知识。最终要的是还能装X
• 缺点：只支持静态内容，没有后台管理系统

3. WordPress建站（没用过，搬运😅）

• 优点：方便后续备份和转移，有自带的工具支持；扩展性强大；对自定义用户非常友好；自带后端管理
• 缺点：内容很多，对新手不友好

个人选择

综合考虑下来选择了方案二github pages + hexo，既能学到github action、github pages、github discussions等高阶知识，又能拥有自己的博客网站，还能写到简历上装个X，真是一举多得😁。废话不多说，我们来一步步看如何搭建。

正文

如何搭建

先用hexo搭建一个本地的博客网站

hexo官网 写的非常详细。一说到看官方文档就想到尤大说的一句话：“对于学习技术而言，看官方文档就完全足够了，但是很多人就是不看”。对此，我只想说确实是这样，但是有个前提是你得先对这个技术有个大概的了解，所以我通常会先看下别人出的教程，看下别人写的demo，再回过头来看官方文档。

官方文档中详细描述了整个过程：安装 -> 初始化 -> 启动 -> 部署。

• 安装hexo脚手架：

$ npm install hexo-cli -g

• 初始化hexo项目：

$ hexo init blog
$ cd blog
$ npm install

• 启动hexo项目：

$ hexo server

然后你就可以看到如下效果：

关于文章目录的作用及描述可以看hexo官网

• 添加一篇文章：

hexo new 文章名

执行上述命令，就会在你的source/_post目录下新增一篇markdown文件，在文件中输入内容即可。

至此，项目本地的博客网站的雏形就算搭建完成了。很简单吧😄。好，那接下来我们就该把本地搭建好的博客网站部署到网站上，让别人也能访问就可以了，

在github pages上部署hexo

还是看hexo官网

• 在github新建一个储存库。

• 将 Hexo 文件夹中的文件 push 到储存库的默认分支，默认分支通常名为 main，旧一点的储存库可能名为 master。

• 将 main 分支 push 到 GitHub：

$ git push -u origin main

⚠️注意：默认情况下 public/ 不会被上传(也不该被上传)，确保 .gitignore 文件中包含一行 public/。整体文件夹结构应该与 示例储存库 大致相似。

• 使用 node --version 指令检查你电脑上的 Node.js 版本，并记下该版本 (例如：v16.y.z)

• 在储存库中前往 Settings > Pages > Source 添加如下配置。

  一定要添加，否则执行github actions时会报错❗️❗️❗️

1. 将 Source 改为 GitHub Actions。

2. Actions 配置信任开源的 GitHub Actions，并配置读写权限。

• 在储存库中建立 .github/workflows/pages.yml（如果没有这个目录，手动添加即可），并填入以下内容 (将 16 替换为上个步骤中记下的版本)：

# .github/workflows/pages.yml
name: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
      - name: Use Node.js 16.x
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

如果不懂这段代码什么意思，我们可以扔给ChatGPT解读一下：

这是一个`GitHub Actions`工作流，用于构建和部署GitHub Pages。

这个工作流有两个作业（jobs）：`build`和`deploy`。

`build`作业用于构建项目。它在`ubuntu-latest`环境中运行，并执行以下步骤：

使用`actions/checkout@v3`操作来检出代码库。
使用`actions/setup-node@v2`操作来设置Node.js 16.x环境。
使用`actions/cache@v2`操作来缓存NPM依赖项。
运行`npm install`安装项目的依赖项。
运行`npm run build`构建项目。
使用`actions/upload-pages-artifact@v2`操作将构建后的页面文件上传为工件（artifact）。
`deploy`作业用于部署项目。它在`ubuntu-latest`环境中运行，并在`build`作业完成后执行以下步骤：

使用`actions/deploy-pages@v2`操作将构建后的页面部署到GitHub Pages。
设置GitHub Pages的部署环境，并将URL输出为`steps.deployment.outputs.page_url`。
此工作流还定义了触发条件，只有在main分支上进行推送时才会触发。

• 将上述 .github/workflows/pages.yml 文件推送到远程仓库，就可以看到Actions中新增了一条运行任务

  点进去可以看到完整的执行过程。

• 成功后，我们访问自己的域名就可以看到部署的博客啦。

至此，我们的博客就算是搭建好啦，后续就可以通过 hexo new 文章标题 添加新文章，并推送到远程仓库就OK啦✨

进阶

换肤 - hexo主题

我觉得这个默认的hexo主题不好看，我该怎么做呢？

hexo官网中也给出了说明和支持的主题列表，这些主题大多都是开源的，有具体的说明文档，我们可以按照文档操作。但是我觉得这里面都没有太好看的，而且很多都是年久失修的开源项目，还有很多bug。不要问我怎么知道的，谁用谁知道😭

那既然这样不行，那我们就从网上找一找排名靠前的一些开源主题hexo排名前十的主题，这里面提到的都是精挑细选出来的，我们可以根据自己的喜好选择一个使用。那我们就拿第一个Icarus为例展示一下如何操作。

进入到Icarus的github仓库，有详细的操作说明文档。

1. 通过以下命令安装主题

$ npm install hexo-theme-icarus
$ hexo config theme icarus

1. 完成后会生成_config.icarus.yml的配置文件，我们可以对照Icarus用户指南-主题配置对我们的项目做配置。文档的说明非常详细，这里就不过多解释了。

评论功能

博客发布后，我们还是希望能持续跟大家交流沟通的，具体该怎么做呢？

• Icarus用户指南 - 用户评论插件文档也给出了很好的说明。这里我用的是畅言的评论系统。按照文档说明操作即可，非常简单。

• 当然我们也可以借用github discussions、github issue的功能来做评论系统，对应的工具分别是giscus和gitalk，这里推荐大家尝试一下giscus。因为Icarus不支持这两个，我们就不做多介绍了，感兴趣可以自行google😁

同步到gitee，并部署到gitee pages

好了，现在基本上所有问题都解决了。我们发现如果不翻墙的话，访问我们的博客非常的慢，如何解决呢？

简单，我们只需要部署到国内的github替代品gitee就可以了。那我们怎么把代码同步到gitee呢？总不能在gitee再copy一份吧？！当然不用！

因为github和gitee都提供了对仓库的读写API，所以我们只需要继续在 .github/workflows/pages.yml 文件中补充代码，把github中的代码同步一份到gitee即可，具体如下：

# ...此处省略之前部署到github的代码
# 同步github项目代码到gitee.
mirroring-gitee:
  needs: [build, deploy]
  runs-on: ubuntu-latest
  steps:
    # nodejs使用的版本
    - name: Use Node.js 16.x
      uses: actions/setup-node@v2
      with:
        node-version: '16'
    - name: Mirror the Github organization repos to Gitee.
      uses: Yikun/hub-mirror-action@master
      with:
        src: 'github/FrankJingZhi'
        dst: 'gitee/Frank-Awesome'
        dst_key: ${{ secrets.GITEE_PRIVATE_KEY }}
        dst_token: ${{ secrets.GITEE_TOKEN }}
        static_list: "frank-blog"
        force_update: true
        timeout: '5m'

老样子，chatGPT解释一下：

这段代码是一个 GitHub Actions 的工作流程，用于将 GitHub 组织中的代码镜像到 Gitee。

具体而言，工作流程包括以下步骤：

使用 Node.js 16.x 版本。
使用 Yikun/hub-mirror-action 动作将 GitHub 组织中的代码镜像到 Gitee。
配置源代码的路径为 github/FrankJingZhi，目标代码的路径为 gitee/Frank-Awesome。
配置 Gitee 私钥和令牌，以便访问目标代码仓库。
配置静态列表，只镜像名为 frank-blog 的仓库。
强制更新目标代码仓库。
设置超时时间为 5 分钟。

需要注意一下几点：

• 我们要在github中配置允许 Yikun/hub-mirror-action 这个action：

• 生成gitee ssh公钥和密钥，公钥添加到gitee，密钥添加到github，添加名为GITEE_TOKEN的repository secret，将生成的密钥粘贴到内容中：

• 生成gitee的私人令牌，在github，添加名为GITEE_PRIVATE_KEY的repository secret，将生成的密钥粘贴到内容中：

接下来把修改的内容推送到github的远程仓库，我们可以在GitHub Actions中看到多了一个执行的任务：

任务执行完成就同步到gitee中了。

现在访问我们的gitee pages网址就可以看到部署好的博客了👍（PS：因为gitee pages需要提交个人信息，人工审核，我的还没有通过，等通过了再回来补充😅）

---

总结

个人成长

回顾一下整个学习过程，我们学习到了非常多的知识，包括GitHub Pages、GitHub Actions、CI/CD、Gitee、Gitee Pages、hexo，进一步扩大了自己的知识体系，非常值得👍

参考链接

• ppoffice.github.io/hexo-theme-…
• hexo.io/zh-cn/
• docs.github.com/en/actions