建站流程

从很久以前就想着要把自己的博客网站搭建起来，之前一直在用typora写本地的文章记录，一直没挪到网络上也不过是因为我太懒了、平台样式用着不得劲。零零总总地在冲浪过程中熟悉了从域名到建站的全面流程，了解过后不得不再感叹一句，hexo实在是太强大了，遂决定用hexo和github.io着手搭建自己的个人博客。

1.域名注册

国内域名注册商分析

域名商	优缺点
万网（阿里云）	+ 便宜靠谱``- 国内，政策多变，参考知乎回答
腾讯云（DNSPod）	+ 便宜靠谱 - 国内，政策多变，参考知乎回答
爱名网	/
西部数码	/

国内域名注册商分析

域名商	优缺点
Dynadot	/
NameCheap	/
GoDaddy	+ 靠谱 - 不便宜 - 国外
Cloudfare	+ 靠谱 + 每年价格稳定，不涨价 + ssl证书和dnssec服务免费，齐全

总结

1.cn域名虽然便宜，但是做不到whois隐私保护。

2.注册前要注意域名检查，即以前有没有被拦截过，特别是找不曾被百度搜索处罚过的网站域名。

3.注意各种相关配置，如果需要的话，比如SSL证书的申请，转发域名的配置支持等。

参考：

2022 年最好用的国内国外便宜域名注册商推荐

为什么网上不少人说国内的域名商不靠谱，推荐大家把域名转入到godaddy之类的国外知名域名商？域名商的不靠谱会有什么后果？

CS上线之DNS隧道踩坑记

2.服务器购买

先不买服务器，先把网站搭建好，或者看情况使用github-page

最终还是选择使用github.io域名和github图床作为博客搭建地，主要是可以白嫖。

3.网站搭建

博客框架分析

框架	优缺点
solo	+ 小而美，自带社区，直接注册使用，也可自行部署 - 有广告
Hexo	+ 使用广泛，美观，功能多样，插件丰富，跨平台 - 东西有点杂但是还好，可以自行配置
Jekyll	+ 纯静态页面，直接部署在github page上，不用买服务器 - 源码全部是公开的，不太安全
hugo	+ 简单、易用、高效、易扩展、快速部署，go语言，可以http - 目前没遇到喜欢的主题

博客主题分析

框架	主题	优缺点
Hexo	Fluid，参考	大图主页，好看
	Maupassant，参考	+ 经典博客，简洁， - 代码块高亮需要调整，没有跟随目录页
	butterfly，参考	大图主页，好看
	Cactus，参考	+ 简约好看，配色清新 - 太简约了，没有评论

最终选用Hexo + Maupassant

参考：

搭建个人博客，最想推荐的 10 大框架，强烈建议收藏

搭建流程

创建github仓库

打开https://github.com/，新建一个项目，如下所示：

然后输入自己的项目名字，后面一定要加 .github.io后缀，README初始化也要勾上。名称一定要和github名字完全一样，比如你github名字叫 abc，那么仓库名字一定要是 abc.github.io，以后就可通过该连接访问我们的博客。

其他配置啥也不选。

环境配置

• nodejs（配置镜像源）
• git

安装Hexo

全局下载hexo-cli，脚手架

npm install hexo-cli -g

Hexo初始化

创建项目文件夹，并在文件夹下敲入初始化命令

hexo init .

Hexo启动

hexo s == hexo server #启动服务预览

其他指令介绍

hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成博客网页文件
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

项目目录

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

网站的 配置 信息，您可以在此配置大部分的参数。

package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

scaffolds

模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

写文章、发布文章

首先在博客根目录下右键打开git bash，安装一个扩展 npm i hexo-deployer-git。

然后输入 hexo new post "article title"，新建一篇文章。

然后打开 .\_posts的目录，可以发现下面多了一个文件夹和一个 .md文件，一个用来存放你的图片等数据，另一个就是你的文章文件啦。

编写完markdown文件后，根目录下输入 hexo g生成静态网页，然后输入 hexo s可以本地预览效果，最后输入 hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章啦。

更换主题

以yillia主题为例

1.克隆主题：git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

偶尔克隆https不成功的时候，可以用这个语句，实现临时关闭ssl的效果，git -c http.sslVerify=false clone <path> <To path>（可省略）

git config –global http.sslVerify “false”

git config –global http.sslVerify “true”

全局修改git的ssl验证参数不太安全，关闭后记得重新开启

2.修改_config.yml文件中的theme字段

3.重新启动

hexo clean
hexo g
hexo s

注意，theme Maupassant 要使用node14.18.3版本，因为需要兼容node-sass，而目前node-sass的更新不兼容node16版本，故降低node以适应。

连接github与hexo

打开博客根目录下的 _config.yml文件，这是博客的配置文件，在这里你可以修改与博客相关的各种信息。

修改最后一行的配置，注意repository这行要加 .git：

deploy:
  type: git
  repository: https://github.com/username/username.github.io.git
  branch: master

美化

评论区

• gittalk

由于Maupassant已经内置了gitalk，所以只需要自己进行app创建，获取client id和client secret

针对gittalk无法使用

1.检查_config.yml中配置项有没有拼写错误

2.修改博文链接的长度

使用 hexo-abbrlink插件，生成短链

npm install hexo-abbrlink

# 配置_config.yml文件，添加如下内容
#abbrlink
abbrink:
alg: crc32
rep: dec

# 并修改永久链接样式：
permalink: posts/:abbrlink.html 或（posts/:year:month:abbrlink.html）

• Waline

https://waline.js.org/，按照官网指南配置即可。

参考：

第三方评论系统之我见

Gitalk的配置和安装说明

进度条

 //- 插入进度条
 script(src='//cdn.bootcss.com/pace/1.0.2/pace.min.js')
 link(href='//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css', rel='stylesheet')
 style.
   .pace .pace-progress {
   background: #1abc9c;
   height: 3px;
   }
   .pace .pace-progress-inner {
   box-shadow: 0 0 10px #1abc9c, 0 0 5px     #1abc9c;
   }
   .pace .pace-activity {
   border-top-color: #1abc9c; 
   border-left-color: #1abc9c; 
   }
//- 插入进度掉end

参考：

hexo主题迁移and折腾记

底部徽标

参考

注意要禁用fancybox，因为徽标本质是img，插入img会导致自动嵌套一个a标签，导致原本设置的a标签herf失效。

内嵌十年之约虫洞

参考

注意黑暗模式且换时，也要更换对应图标

修改style.scss中的Darkmode CSS部分, 修改对应img的content属性

总结

• 主题的使用首先需要打开的是对应的配置文件，如``_config.yml`文件，内含各种已有的功能和配置说明。
• 主题项目的修改首先需要了解的是项目结构，才能事半功倍。以Maupassant为例，languages文件夹中包含各语言文本的翻译，source文件夹中包含必须的css、js、img文件，layout文件夹中则是主要修改的部分，也就是我们的页面布局部分。文件的取名也能反映文件的作用，比如 footer.pug则表示网页的脚注位置的内容。
• 功能模块样式的写法可以用f12去参考现有的网页。
• 多查看官方文档。比如waline评论系统的配置在其官网上就有详细的配置教程，hexo的官网也介绍了md文件中front-matter的写法。