前言
本站是基于 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部署到 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 g 和 hexo 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」就能找到不少。