搭建个人博客指南

前言

搭建博客的几种方式

1. 使用在线的博客系统，如语雀、掘金、CSDN等。

• 优点：直接创建账号使用即可，简单方便，不需要维护

• 缺点：文章分散在各个平台，不易于管理

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 替换为上个步骤中记下的版本)：

name: Pages
on:  push:    branches:      - main 
jobs:  build:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v3        with:          token: ${{ secrets.GITHUB_TOKEN }}                    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

2. 完成后会生成_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即可，具体如下：

mirroring-gitee:  needs: [build, deploy]  runs-on: ubuntu-latest  steps:        - 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网址就可以看到部署好的博客了👍

链接：https://juejin.cn/post/7315246744157700146

（版权归原作者所有，侵删）