本文介绍如何使用Hexo框架在Github托管静态网站，本教程的代码适用Win/Linux/Mac

1.安装hexo

请提前配置好git、node和npm以进行接下来的操作
npm换源并安装hexo

1
2
3
4
npm config set registry http://registry.npm.taobao.org/
npm config get registry
npm install -g npm
npm install hexo-cli -g

2.Hexo初始化

初始化工程文件，假设我们本地存放blog的位置是d:/tools/blog/目录中不要有中文和空格

1
2
3
4
cd d:/tools
hexo init blog
cd blog
npm install

修改blog/node_modules/hexo-server/index.js中的ip为0.0.0.0，端口为80方便调试

3.本地预览

注意还要修改_config.yml中的url，否则某些资源无法正确获取

1
2
3
hexo cl		//清除旧文件
hexo g		//生成静态网页，其实不需要
hexo s		//运行hexo内建的http服务器

其实在服务器运行时，修改markdown文档内容的同时，网页内容也会实时更改，但更改后需要手动刷新网页才会呈现

4.在Github上部署

在github上需要注册一个和名字相同的仓库，例如我Github链接是https://github.com/panxiuwen/
注册的仓库的名称就应该是”panxiuwen.github.io”
安装hexo-deployer-git

1
npm install hexo-deployer-git --save

在_config文件中添加deploy信息

1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/panxiuwen/panxiuwen.github.io.git
  branch: "master"
  message: "update blog"

也可以注册ssh公钥，然后repo替换成ssh的地址，注册方法见git的使用

1
2
3
4
5
deploy:
  type: git
  repo: "git@github.com:panxiuwen/panxiuwen.github.io.git"
  branch: "master"
  message: "update blog"

上传代码到github

1
hexo d

修改仓库的Settings-Pages，在Source中选择Master分支，点Save
如果使用hexo d之后仓库只有源代码，没有编译生成的静态网页，那么请检查Github仓库里的Action-All wordflows里的错误信息

5.搭建镜像站

镜像站不用全建，但想建多少建多少

搭建Cloudflare镜像站

Cloudflare是全球顶级的CDN供应商，为用户免费托管网站，每月免费部署500次，可设置100个domains，不限访问带宽和流量，每个站点可存储20k个文件，最大文件为25M，详见Limits，虽然节点在美国，但打开速度甚至比gitee还快。
首先进入Cloudflare官网，Page->创建项目->连接到Git->登陆Github后选择一个仓库->开始部署
注意页面部署后无法修改url，Page的url就是”项目名称+.pages.dev”，所以部署前要提前写好_config里的url。只需要部署一次，绑定的github仓库更新它就更新了。

搭建Netlify镜像站

Netlify每月流量100G，每次只能同时部署一个项目，每月5小时的部署时长，搭建方法与前面两个类似，速度和github半斤八两，比github稳定那么一丢丢。
进入Netlify官网，也限制月流量100G，直接照着前两个搞就行了。

搭建Vercel镜像站

现貌似已经无法访问，Vercel每月流量100G，速度比Cloudflare慢一点但还是比Github快不少，在Billing-Plant查看用量。
进入Vercel官网，注册后选择Continuewith GitHub，成功后新建一个项目，选择存放主页代码的仓库，点击 Import导入该仓库，再点Deploy开始部署。
点击 Go to Dashboard，进入项目主界面。点击上方的 Settings，选择Domains修改域名。对于XXX.vercel.app 这个域名，你只能修改XXX这一部分，注意修改部署前_config.yml里的url。

搭建Gitlab镜像站

笔者实在是玩不转，读者可以自己弄

不建议搭建的镜像站

Gitee
Gitee是国内Git服务提供商，提供免费的GitePage服务，实名认证通常审核1天每次更新完仓库需手动部署，但是屏蔽规则和屏蔽词太多，可能是公司太小，算法不太健全，而且免费服务还能怎样，考虑这么多虽然选择原谅它，但我还是懒得弄了。

腾讯云
腾讯云是国内顶级服务器提供商，可以使用Serverless进行部署
使用serverless工具部署，给的免费域名很难记，用起来的话肯定得绑自己的域名的，计费规则复杂，教程可参考部署 Hexo 博客
阿里云
腾讯云是国内顶级服务器提供商，可以使用OSS进行部署
使用hexo-deployer-ali-oss工具进行部署，给的免费域名很难记，用起来的话肯定得绑自己的域名的，计费方式复杂，教程可参考阿里云OSS部署Hexo教程
七牛云
七牛云是国内的服务器提供商，可以使用kodo进行部署
使用hexo-qiniu-sync工具进行部署，不给免费域名，教程可参考hexo托管七牛云

6.加载公式

如果网页中不加入公式的话，可以不考虑这一步，毕竟生成网页时渲染公式也是要耗费电脑资源的
安装hexo-math

1
npm install hexo-math --save

如果要禁用外部css，禁用后mathjax正常，katex无法渲染

1
2
3
4
5
math:
  katex:
    css: false
  mathjax:
    css: false

使用公式参考Markdown的高阶用法
注意一个网页中的公式数量有限制，笔者测试的结果是大约是320个

7.为Heox安装Tranquilpeak主题

这是笔者使用的主题，走的MaterialDesign+简约风，如果你喜欢别的，也可以用其他主题，很成熟的如Next，Fluid等老牌主题教程和文档多，对新手很友好。综上如果你不是特别喜欢这个主题，完全可以跳过此步并选择其他主题。
下载Tranquilpeak主题，并放在/blog/themes目录中在主题目录运行

1
npm install && npm run prod

主题相关资源文件

侧边栏图标存储目录：/themes/tranquilpeak/node_modules/@fortawesome/fontawesome-free/svgs/brands
侧边栏布局修改：/tranquilpeak/_config.yml
侧边栏显示内容修改：/tranquilpeak/languages/zh-cn.yml
添加网站图标：favicon.svg放在/tranquilpeak/source/assets/images/中，在/tranquilpeak/_config.yml里的favicon键后添加文件名即可
更新需要替换重要的数据文件

/blog/_config.yml
/blog/source//blog/themes/tranquilpeak/_config.yml
/blog/themes/tranquilpeak/languages/zh-cn.yml
/blog/themes/tranquilpeak/source/assets/images/

删除标题中的“发表在XXX”

修改blog/themes/tranquilpeak/layout/_partial/post/meta.ejs

1
<% if ((post.categories) && (post.categories.length < 0)) { %>

正文到此结束，下面介绍

8.一些问题和小技巧

更新模块

我们开始部署的时候自动安装的一定是最新的模块，但是时间久了就老了，部署到github上就可能部署失败，所以养成定期更新模块的习惯

1
npm update

链接到其他文章

拿本站为例，本站挂在github上的链接为

1
https://panxiuwen.github.io

那么从

1
https://panxiuwen.github.io/post/1007

跳转到

1
https://panxiuwen.github.io/post/2017

只需在1007的Markdown文件里写入写下面的链接代码即可

1
[名字随便起](/post/2017/)

文件夹大小写问题

上传到github上的文件夹默认是不区分大小写的，且github有历史记录的功能，所以一旦改了目录的大小写，将会再也无法更改导致网站404，查阅资料得知可通过修改github配置文件解决
修改“/blog/.deploy_git/.git/config”中的

1
ignorecase = false

Python一键调试/部署代码

每次使用命令太麻烦？该脚本通过读取配置文件中的url实现部署和调试
使用前需要安装pyyaml

1
pip install pyyaml -i https://pypi.tuna.tsinghua.edu.cn/simple

脚本的存放和运行都应该在blog文件夹根目录内，代码为如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import os
import yaml

f = open("_config.yml", "r", encoding="utf-8")
date=yaml.load(f, Loader=yaml.FullLoader)
try:
    url=date["url"]
    if url =="http://192.168.192.100/":			#本地调试
        os.system("hexo cl")
        os.system("cmd/c start hexo s")
    elif url =="https://panxiuwen.github.io/":		#Github
        os.system("hexo cl")
        os.system("cmd/c start hexo d")
    elif url =="https://panxiuwen.vercel.app/":		#Vercel镜像
        os.system("hexo cl")
        os.system("cmd/c start hexo d")
    elif url =="https://panxiuwen.pages.dev/":		#Cloudflare镜像
        os.system("hexo cl")
        os.system("cmd/c start hexo d")
    elif url =="https://panxiuwen.netlify.app/":		#Netlify镜像
        os.system("hexo cl")
        os.system("cmd/c start hexo d")
except:
    os.system("msg %username% /w /v 出错啦")

参考文档

将Hexo部署到GitHubPages
Tranquilpeak的仓库
Hexo-math的仓库
Hexo主题仓库