搭建静态博客

前言 ​

静态博客是静态网站废话，是将作者的博文编译到HTML、JS、CSS静态文件。用户通过浏览器访问托管服务器，直接获得已编译的静态资源。

相比于带有后端的博客，静态博客最大的优点是可以做到免费^[1]。

你需要这些东西：

• 一个托管平台。如GitHub Pages。当然，大佬可以选择自己租服务器。

• 一个静态博客框架，用来把你的博文编译到HTML、JS、CSS。如Hexo、Hugo或Jekyll。大佬也可以手搓HTML。

• 学习Markdown。目前所有的静态博客框架都支持Markdown语法，并做了不同程度的扩展。当然，这些框架也支持其他的标记语言。

本教程使用GitHub Pages作为托管平台，这意味着你还需要学会Git。使用Hexo作为静态博客框架。

无论什么时候，请记住一句话：RTFM（Read The Fucking Fantastic Manual）。

安装Hexo ​

Hexo需要Node.js。请首先安装Node.js。

打开命令行窗口，输入：

npm install -g hexo-cli

即安装Hexo的命令行接口。

博客初始化 ​

在恰当的位置新建一个目录。在该目录下输入命令行：

hexo init

完成之后，文件夹内将多出_config.yml等文件。

这里有个坑：hexo init在默认情况下，是将GitHub上的hexo-starter仓库克隆到本地^[1:1]。然而，由于GitHub对塞里斯进行了无耻的网络封锁，如果无法连接到GitHub，Hexo会转而Copying data instead。你会看到类似的终端输出：

INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
fatal: unable to access 'https://github.com/hexojs/hexo-starter.git/': OpenSSL SSL_read: Connection was reset, errno 10054
WARN  git clone failed. Copying data instead

但是，从hexo-starter仓库克隆，和 “Copying data”，两者得到的文件是不一样的。请尽可能保证得到的是前者。如果你得到了后者，可以手动将hexo-starter仓库的package.json文件复制到本地。

配置 ​

这里主要讲述_config.yml中的重要配置项。完整配置项参考Configuration | Hexo。

写作 ​

终端定位至博客文件夹，输入：

hexo new post <文章名>

稍等片刻，即可在source/_post文件夹下看见<文章名>.md文件。可以用VS Code或Typora等软件以Markdown语法编辑。

预览 ​

在发布前，可以先预览自己的博客。终端输入：

hexo s

这时就可以访问http://localhost:4000/以预览博客。

发布到GitHub Pages ​

假定你有一个GitHub账户，并且掌握基本的Git用法。

• “One-command deployment”发布法^[2]

  安装hexo-deployer-git：

  bash

  npm install hexo-deployer-git --save

  在_config.yml的deploy项加入配置：

  yaml

  deploy:
    type: git
    repo: https://github.com/<username>/<project>
    # 这里指你个人网站的版本库地址。上述示例是https方式，但目前建议使用ssh方式：
    # repo: git@github.com:<username>/<project>
    branch: gh-pages

  此后，终端输入：

  bash

  hexo clean
  hexo deploy

• 普通发布法：

  在.github文件夹中新建workflows/pages.yml，填入以下内容，这里假设你使用Node.js 20。

  yaml

  name: Pages
  
  on:
    push:
      branches:
        - main
  
  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4
        - name: Use Node.js 20
          uses: actions/setup-node@v4
          with:
            node-version: "20"
        - name: Cache NPM dependencies
          uses: actions/cache@v4
          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@v3
          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@v4

  push至GitHub上相应仓库。在相应仓库选择Setting->Pages->Source，切换成Github Actions即可。

其他配置 ​

可以配置主题、插件等。Hexo文档及相关主题、插件文档有详细描述。

GitHub Pages的连接速度是大问题。必要时可以使用WebP、HEIC、AVIF等现代图片格式。