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

url：必须要设置，否则某些资源会变成exmple.com，可以使用脚本替换
permalink：决定生成blog的链接
pretty_urls：全部设置成false，否则访问还得加.html
Directory：决定各文件存放位置
post_asset_folder：设置为true后，资源文件都会在对应标题的title文件夹里直接调用
relative_link：笔者亲测有bug，建议关闭此选项
index_generator：决定页面生成文章的数量和顺序
deploy：决定部署方式
theme：设置主题

不渲染某些文件，则使用

1
2
3

skip-render:
    - '_posts/Talk.md'
    - '_posts/Talk_2023.md'

如果根为/p1，则需要设置

1 2	root: "/p1/" url: "http://192.168.192.100/p1/"

预览

1 2	hexo cl //清除旧文件 hexo s -p 80 -i 192.168.1.100 //运行hexo内建的http服务器

若需要更改默认ip和端口
修改C:\Program\Tools\blog\node_modules\hexo-server

1 2	port: 80, ip: "0.0.0.0",

安装插件

需在D:\Program\blog\blog1文件夹下执行

加载公式

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

1	npm install hexo-math --save

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

math:
  katex:
    css: false
  mathjax:
    css: false

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

隐藏文章插件

添加插件

1	npm install hexo-hide-posts --save

在站点目录下的_config.yml中如下配置

hide_posts:
  filter: hidden
  public_generators: []
  noindex: true

在需要隐藏的文章中添加

---
title: 'Hidden Post'
date: '2021/03/05 21:45:14'
hidden: true
---

问卷插件

npm install hexo-helper-quiz

安装Tranquilpeak主题

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

安装

请提前安装好依赖否则将报错

1	apt-get install python3 python3-dev make g++

切换到/blog/themes下载Tranquilpeak主题

1	git clone https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak.git

运行安装命令

1 2	npm rebuild node-sass 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/

禁用绝对链接

保存Python脚本与_config.yml同一位置，注意修改URL,这个参数

def rep(file):
    f=open(file,"r",encoding="utf-8")
    t=f.read()
    if t.find(URL)>0:
        print(file)
        t=t.replace(URL,"")
        f.close()
        f=open(file,"w",encoding="utf-8")
        f.write(t)
        f.close()
URL="http://192.168.192.6"
import os
for root, dirs, files in os.walk("." , topdown=False):
    for name in files:
        if name=="index.html":
            fp=os.path.join(root, name)
            rep(fp)

魔改半透明毛玻璃

我们定义毛玻璃代码为：

1 2	backdrop-filter: blur(10px); background: #ffffff61;

修改\tranquilpeak\layout\_partial\index.ejs的main-content-wrap为main-content-wrap-index
复制\tranquilpeak\source\_css\components\_main-content.scss并改名为_main-content-index.scss，在_main-content.scss文件末端追加毛玻璃代码
修改_main-content-index.scss第一句为main-content-wrap-index {
在\tranquilpeak\source\_css\tranquilpeak.scss中添加'components/main-content-index',
修改\tranquilpeak\source\_css\components\_tooltip.scss的color:#fff;为#ffffff61;
在\tranquilpeak\source\_css\components\_button.scss后追加background: #ffffff61;
在\tranquilpeak\source\_css\components\_pagination.scss的.pagination-bar后追加毛玻璃代码
在\tranquilpeak\source\_css\components\_postShorten.scss后替换为

margin: 10px auto;
padding: 10px 10px 10px 10px;
box-sizing: border-box;
backdrop-filter: blur(10px);
background: #ffffff61;

在\tranquilpeak\source\_css\layouts\_about.scss的#about-card后追加毛玻璃代码
在\tranquilpeak\source\_css\layouts\_bottom-bar.scss的bottom-bar后追加毛玻璃代码，删除border-top
在\tranquilpeak\source\_css\layouts\_header.scss的#header后追加毛玻璃代码
在\tranquilpeak\source\_css\layouts\_sidebar.scss的#sidebar后追加毛玻璃代码
修改\tranquilpeak\source\_css\base\_base.scss的table代码
修改background: #f7f8f8;为background: transparent;
修改background: white;为background: #ffffff61;
在\tranquilpeak\source\_css\utils\_base.scss的
'light': #9eabb3,改为#5d686f,
$font-color-base: #5d686f;改为#2b2f31,
'color': #ebebeb改为2b2f31,
'background': #f7f8f8,改为#f7f8f861,
在\tranquilpeak\source\_css\themes\_hljs-tranquilpeak.scss的
border-right-color: #e6e6e6;改为#2b2f31,
figcaption和.gutter的background改为 transparent;
在\tranquilpeak\source\_css\utils\_variables.scss的'white':#fff,改为##ffffff61
在Header项目中删掉'border': 1px solid #eef2f8

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

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

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

禁用字体

删除/tranquilpeak/source/_css/tranquilpeak.scss中字体内容

1	'utils/fonts',

重新编译主题

1	npm install && npm run prod

目录相关

在喜欢的位置插入

1	<!-- toc -->

建立多个站点

由于本人的站点使用了绝对链接，每次部署/调试/更换镜像都会产生不同的文件，所以每次操作都得清除缓存，磁盘擦写量很大，想了个每次只用更新一次文件的方法
假设我的blog目录是/blog，此文件夹作为调试文件夹，url=http://127.0.0.1/
那么我们建立/blogg文件夹作为Github节点，其中url设置为https://panxiuwen.github.io/
建立/blogc作为Cloudflare节点，其中url设置为https://panxiuwen.pages.dev/
设置.github、node_modules、scaffolds、source、themes软连接文件夹到新文件夹
设置.gitignore、package.json、package-lock.json软连接文件到新文件夹
将一键部署hexo.py和_config.yml文件复制到新文件夹，其中一键部署hexo.py文件内容在后面
对于Windows

mklink "E:\Store\blogp\package.json" "E:\Store\blog1\package.json"
mklink "E:\Store\blogp\.gitignore" "E:\Store\blog1\.gitignore"
mklink "E:\Store\blogp\package-lock.json" "E:\Store\blog1\package-lock.json"
mklink /d "E:\Store\blogp\.github" "E:\Store\blog1\.github"
mklink /d "E:\Store\blogp\node_modules" "E:\Store\blog1\node_modules"
mklink /d "E:\Store\blogp\scaffolds" "E:\Store\blog1\scaffolds"
mklink /d "E:\Store\blogp\source3" "E:\Store\blog1\source3"
mklink /d "E:\Store\blogp\themes" "E:\Store\blog1\themes"

对于Linux

ln /app/blog/blog1/package.json /app/blog/blogg/package.json -s
ln /app/blog/blog1/.gitignore /app/blog/blogg/.gitignore -s
ln /app/blog/blog1/package-lock.json /app/blog/blogg/package-lock.json -s
ln /app/blog/blog1/.github /app/blog/blogg/.github -s
ln /app/blog/blog1/node_modules /app/blog/blogg/node_modules -s
ln /app/blog/blog1/scaffolds /app/blog/blogg/scaffolds -s
ln /app/blog/blog1/source /app/blog/blogg/source -s
ln /app/blog/blog1/themes /app/blog/blogg/themes -s

设置快速生成脚本

1 2	alias hg1="cd /app/blog/blog1&&hexo g&&python3 a.py" alias hg2="cd /app/blog/blog2&&hexo g&&python3 a.py"

若将生成的静态文件链接至Web服务器

1	ln /app/blog/blog1/public /var/www/html/p1 -s

部署

在Github上部署

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

1	npm install hexo-deployer-git --save

在_config文件中添加deploy信息

deploy:
  type: git
  repo: https://github.com/panxiuwen/panxiuwen.github.io.git
  branch: "master"
  message: "update blog"

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

deploy:
  type: git
  repo: "git@github.com:panxiuwen/panxiuwen.github.io.git"
  branch: "main"
  message: "update blog"

上传代码到github

1
2
3

hexo cl	//如果不出现资源文件错误，可以不执行，每次生成都很废硬盘
hexo g	//这一步是为了生成静态文件，若不执行，则hexo d不会改动
hexo d	//部署

修改仓库的Settings-Pages，在Source中选择Main分支，点Save

搭建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托管七牛云

一些小技巧

链接到其他文章

拿本站为例，本站挂在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/)

嵌入Bilibili视频

分享->嵌入代码

{% raw %}
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=93802760&bvid=BV1tE411x76k&cid=160149744&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;" ></iframe></div>
{% endraw %}

带滚动条的表格

使用表格生成器可轻松生成html表格
然后将表格插入到下面的CSS代码中

<div style="overflow-x:auto;white-space:nowrap;">
<table style="text-align:center;">
···
</table>
</div>

常见问题

Could not read from remote repository.Please make sure you have the correct access rights

ssh未配置好，见Git使用

Template render error: (unknown path) Error: unexpected end of comment

检查文章中是否有{ #字符串，如果有就删掉

文件夹大小导致的错误

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

1	ignorecase = false

生成的网站找不到图片

在我的橘子派上第一次生成会出现这个问题，使用hexo g清除后可能会得到解决

参考文档

将Hexo仓库
 Hexo主题仓库
 Tranquilpeak的仓库
 Hexo-math的仓库

使用Hexo框架建站

目录

Hexo的安装与初始化

安装

初始化

配置文件

预览