从零开始搭建个人博客：一个程序员的折腾

前记

其实想搭个人博客这个念头已经有很久了，云服务器、域名也很早就买好了，最近才开始搞博客，下班后的碎片时间加上周末，断断续续折腾了两周终于完成了，途中遇到了不少问题，今天整理出来希望能帮助到其他想搭建个人博客的人，也方便以后自己回顾。

先逛了一圈独立博客

起初啥也不懂，就先看看别人怎么搞的，希望能兼顾实用和好看。

平时喜欢用github，还真找到了一个收集中文独立博客的列表：，挨个点进去看了不下 100 个网站。看得我眼花缭乱的，什么风格都有。

推荐大家两个博客idealclover和思有云（如侵权请联系我删除），这两个博客是最符合我想象中的完美博客的，第一个很好看，第二个很实用，纠结了半天还是选择了实用哈哈，然后在友链中找到使用的typecho框架。

踩坑 Typecho

花了两天时间搭建好了，然而当我想自己整一些diy的时候发现两个弊端，使我果断放弃。
1、文章是存储在数据库中的，这和我想象中完全不一样，搜了一下typecho是动态博客，另外还有一种是静态博客，先写好博客原文，然后通过静态博客生成器转换为网页，这种才是我想要的。
2、自带评论系统，但是后端使用php实现的，我不太熟悉这种语言。
经过一系列的了解后，我果断放弃了typecho，准备使用静态博客，以后再用js或者c++实现后端api。

重新选型：Hugo vs Hexo

现在我的目标明确了，就专门去找静态博客，同样也是在github上找，发现主流的框架有两个：Hugo 和 HEXO。
为了对比两个框架的优缺点，我首先浏览了Hugo使用者列表和Hexo使用者列表，虽然Hugo的star数量是Hexo的两倍，但是Hexo的使用者数量却反而是Hugo的几十倍，浏览了几十个博客之后，不出意料的选择了Hexo，使用者多意味着社群更强大，遇到问题更容易找到解决方案，于是决定用 Hexo，至于用什么主题先不管，能跑起来再说。

先在本地跑起来

步骤很简单，按照Hexo的github主页的步骤操作就好了，当然前提得node.js和npm和git需要提前安装好，Hexo官方文档中有版本介绍，我就不多说了，有问题可以在评论区讨论或者私聊我。
我是在windows上部署的，部署好之后直接浏览器访问 http://localhost:4000，立马就看到网站了，完美！

部署到服务器

本地跑通了，下一步自然是让别人也能访问。我有一台公网云服务器+域名，纠结了两个方案：
1、把个人博客部署在家里电脑上，然后通过云服务器frp反向代理访问。
2、把个人博客部署在云服务器上，直接访问。
纠结这两个方案的原因是，我的云服务器买的是最便宜的，只有40G空间，之前我搭建immich相册的时候发现了这个问题，就把immich相册部署在家里电脑上（我相册有100多个G，以后还会更多，所以云服务器没办法放下），然后通过云服务器frp反向代理访问。
但是我想个人博客不一样，文章占用的空间比照片视频小得多，所以我准备直接部署在云服务器上。
分为几步：
1、之前生成的静态博客在Hexo的相对目录./public中，先把文件中的内容拷贝到云服务器的/var/www/blog目录中。
2、配置nginx指向/var/www/blog目录（我这里只给出了http的配置，https也要配置一下，因为https需要证书，证书是我很久之前就搞的Let’s Encrypt免费证书），重启nginx服务。

server {
    listen 80;
    server_name www.henrychan.top;
    root /var/www/blog;
    index index.html;
}

3、通过域名访问，一次就访问成功了，完美。

写作工具

博客搭好了，还得有个顺手的写作工具。
写Markdown我用的是Obsidian，本地软件，速度快，支持双链，之前我就一直用的这个，搭配PicGo图床使用。

GitHub Actions自动部署

用Obsidian写博客，然后用Hexo生成静态博客，最后拷贝到云服务器上。
其实到这里博客搭建已经算是完成了，写博客的流程已经打通了，但是作为程序员，总是想方设法偷懒，希望只用专注于写博客即可，刚好Hexo内置支持Github Actions流，可以自动完成博客生成的部署，而且还能把博客在Github仓库中备份一份，何乐而不为呢？
如果你的博客部署在/var/www/blog目录，那么你可以完全服用下面的deploy.yml配置文件。
由于Github Actions流部署博客需要能够访问你的云服务器，所以要知道云服务ssh的ip（SERVER_IP）、端口（默认22）、用户名（SERVER_USER）、秘钥（SSH_PRIVATE_KEY），这些写到配置文件中不安全，需要配置到Github仓库的的Secrets中。

name: Deploy Blog

on:
  push:
    branches:
      - main  # 主分支推送时触发

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      # 1. 检出代码
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true  # 如果使用了 Git 子模块（主题）

      # 2. 设置 Node.js 环境
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      # 3. 安装依赖
      - name: Install Dependencies
        run: |
          npm ci

      # 4. 生成静态文件
      - name: Generate Static Files
        run: |
          npm run clean
          npm run build

      # 5. 部署到服务器
      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@main
        with:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          REMOTE_HOST: ${{ secrets.SERVER_IP }}
          REMOTE_USER: ${{ secrets.SERVER_USER }}

          # 部署目标目录
          TARGET: /var/www/blog
          SOURCE: "public/"
          ARGS: "-rltgoDzvO --delete"

部署完之后测试，我创建一篇新的博客后，提交git代码，然后推送到github，等待1分钟再次访问就能看到这篇博客了，到这里基本就完成闭环。

换个主题

整个流程跑通之后，终于有心情折腾外观了。
之前一直用的默认主题landscape，去Hexo 官网的主题列表逛了一圈后，选择了Next暂时先用着。
就两步，先在Hexo的themes目录把Next的代码拉下来。
然后在Hexo的配置文件_config.yml中把landscape改为next。
提交代码后推送到github。这里踩了个坑，因为我用git clone拉的Next代码，导致git把它当做子模块了，但是我的git仓库没有配置子模块的git路径，导致我推上去后，Github Action自动流程会去拉Hexo的代码找不到路径，导致我等了二十多分钟博客还没更新。

于是我把Next目录下的.git文件夹删除了，因为我不想自己博客的主题跟着Next官方的版本而变化，我想维护一个私有版本。

最终效果

现在的工作流是这样的：
1、在 Obsidian 里写文章
2、执行git add . && git commit -m “新文章” && git push
3、去喝杯水
4、回来网站就更新了
整个发布过程大概 1-2 分钟，全自动。

后续想折腾的

博客是跑起来了，但还有些东西想后面慢慢加：
评论系统：打算试试 Waline，自托管的。
访问统计：看看哪些文章有人看。
搜索功能：文章多了之后应该会需要。

写在最后

断断续续折腾了两周，平时晚上加周末，总算是把博客搭起来了。
回头看，看着很顺利，其实整个过程就是摸着石头过河：选框架、装工具、部署踩了不少坑，但每次解决一个问题，就离终点近了一步。
虽然过程中坑不少，但最后看到自己的网站跑起来，还是挺有成就感的。以后写东西终于有个自己的地盘了。
如果你也想搭一个，希望这篇文章能帮到你。有问题欢迎留言交流（前提是等我把评论系统搞好，现在暂时通过邮箱联系henrychan9810@qq.com）。

本文链接https://www.henrychan.top，欢迎转发交流！