前言

本站是基于 Typecho 的动态博客系统,为什么还要写这篇文章呢?

因为最近在教别人某个笨蛋建立静态博客的过程中,发现中文互联网上的教程或多或少都有些过时,于是便结合官方文档,萌生了写这篇文章的想法。

前期准备

可参考官方文档

如果想利用 GitHub Pages 实现远程访问,需要拥有 GitHub 账号。下面就用 GitHub Pages 来举例啦。

其他的静态页面托管平台用起来也许会更容易吧,只要把生成的网页文件夹(public)放在可访问的目录即可。

安装 Hexo

设置下载源

设置成淘宝源可以显著提高 npm 下载速度(不过如果你有其他加速手段就不必设置了)。

npm config set registry https://registry.npm.taobao.org

安装 Hexo

npm install -g hexo-cli

配置 Git

如果想要把静态博客建在 GitHub Pages 上,必然离不开 Git 这个能够与远程仓库交互的工具。

为了使本地的 Git 软件能够连接到远程的 GitHub 服务器,需要先设置 ssh 密钥。

本地生成密钥

生成密钥

Windows 用户打开 Git Bash,执行下面的命令。「邮箱」就是注册 GitHub 时的那个邮箱。

ssh-keygen -t rsa -C "邮箱"

执行之后连按 Enter。此时本地密钥文件将会出现在 ~/.ssh/ 目录下。( 指的是用户目录,在 Windows 环境下,这个目录一般是 C:\Users\你的用户名\

复制公钥

可以用文本编辑器打开 ~/.ssh/id_rsa.pub,查看复制里面的内容。

也可以执行下面的命令查看 id_rsa.pub 的内容。

cat ~/.ssh/id_rsa.pub

复制内容即可。

GitHub 端设置

  • 进入 GitHub 的 SSH 密钥设置
  • 点击「New SSH Key」。
  • 「Title」随便填,是能够表示这台电脑的标识。
  • 「Key」填写刚才复制的 id_rsa.pub 内容。

Git 用户设置

执行下面的命令,用户名和邮箱均为注册 GitHub 时填的那个。

git config --global user.name "用户名"
git config --global user.email "邮箱"

上面的步骤完成后就可以测试下和 GitHub 的连通性,执行下面的命令即可。

ssh -T git@github.com

第一次测试会有如下的输出:

The authenticity of host 'github.com (20.205.243.166)' can't be established.
ED25519 key fingerprint is SHA256:****.
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])?

此时输入 yes

如果成功的话会看到如下的输出:

Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
Hi hawa130! You've successfully authenticated, but GitHub does not provide shell access.

如果没成功的话,请重新生成密钥,再来一次吧。也有可能是公钥没复制好,重新复制一下,并添加到 GitHub。

完成以上步骤了的话,Git 就配置好了!

建立站点目录

此部分可参考官方文档

这个 folder 就是站点目录了。

hexo init <folder>
cd <folder>
npm install

配置 _config.yml

部署到 GitHub

现在部署在 GitHub Pagse 的 Hexo 可以不需要进行 hexo g 来生成站点了。利用 GitHub Actions,我们可以白嫖 GitHub 的服务器资源来帮助我们自动化生成站点并部署。(这也是中文教程缺失的一点,大部分都是传统的本地生成)

参考的官方文档

建立 Git 仓库

进入到站点目录。也就是 hexo init 生成的那个文件夹里。执行下面的命令:

git init
git add . # 有个点
git commit -m "initial commit" # 引号里面的是提交信息,可以随便写

推送到 GitHub

使用命令行

在 GitHub 上新建一个空仓库(repo)。如果想要白嫖 GitHub 的 *.github.io 的域名来访问静态博客,那就把仓库起名为「用户名.github.io」。其他的就用默认设置就行了。(如果你财大气粗,有自己购买的域名,那就随意起仓库名吧)

此时还是在你的站点目录里面,执行下面的命令。GitHub 在空仓库的界面也会显示这些命令(选择 SSH,在第二个内容块)。

git remote add origin git@github.com:用户名/仓库名.git
git branch -M main
git push -u origin main

执行完这些命令,没报错的话就是推送到 GitHub 上了,可以刷新 GitHub 看看。

使用 GitHub Desktop 客户端

File > Add Local Repository...,添加刚才建立的 git 仓库,然后发布即可。

配置 GitHub Actions

创建 Actions 配置

.github 目录里面新建文件夹 workflows,再新建一个文件 pages.yml

也就是 .github/workflows/pages.yml,里面写入以下内容。

name: Pages

on:
  push:
    branches:
      - main  # default branch

jobs:
  pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - 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: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

设置 Actions 权限

找到 Settings > Actions > General 里的 Workflow permissions(在最下面),设置为 「Read and write permissions」。

将改动推送到 GitHub 上

以后每次改完文件,都可以执行下面的命令来同步到 GitHub 上。

git add .github/workflows/pages.yml
git commit -m "修改 Actions 配置"
git pull
git push

如果你使用的是 GitHub Desktop 客户端,填写 Message,点击 Commit 然后再点击上面的 Push 就行。

设置 GitHub Pages

回到 GitHub 的这个仓库。

找到 Settings > Pages > Source,改成「gh-pages」。如果选项里没有 gh-pages,那一定是前面的 Actions 配置出现了问题,可以去 Actions 这个标签里看看报错。

如果你有域名的话,底下的 CNAME 可以设置为自己的域名。(没有域名的话就不要乱动了)

访问网站

浏览器访问「用户名.github.io」或者你的自定义域名,如果没问题的话,静态博客就呈现在你的屏幕上啦!

Hexo 使用

基本命令

更多命令可参考官方文档

新建文章

hexo new [layout] <title>

在默认的条件下,新建的文章会保存在 source/_posts/ 目录下。

新建的文章可以直接推送到 GitHub,不需要执行 hexo ghexo d

生成页面

hexo g

预览站点

hexo s

把新文章推送到 GitHub

如果你新建了一篇文章,需要推送到 GitHub 上。还是老样子。

git add .
git commit -m "新文章"
git pull
git push

如果你使用的是 GitHub Desktop 客户端,填写 Message,点击 Commit 然后再点击上面的 Push 就行。

Hexo 特殊技巧

GitHub 上有众多 hexo 主题,搜索关键词「hexo theme」就能找到不少。