如何折腾自己的静态博客

前言

这里默认你已经按照用Hexo+Vercel搭建属于自己的静态博客 | 57之塔搭好了一个毛坯房，接下来开始绑定域名、配置主题，以及更多乱七八糟的小tips。

绑定域名

我在阿里云申请的域名，在其他平台申请的可以参考我的流程

这里已经申请好域名并做完了实名认证。

先进入Vercel打开你的项目，点击domian后面的加号，就进入域名的管理页面

点add domain输入你的域名

灰色部分是你申请的顶级域名，红色部分是二级域名，具体可以去了解，总之红色部分可以先自由起一个你想要的

点击save显示invalid configuration说明它现在连不上你的域名，我们还需要进行域名解析

点击learn more展开，复制框里的value值

进入你申请域名的平台，这里使用阿里云，打开阿里云进入控制台，进入域名与网站

进入域名解析

在弹出来的列表里找到你的域名，点后面的解析设置，添加记录，按照如图进行设置

主机记录填你前面输入的二级域名，记录值填入刚才让你复制的value值

点确定后回到vercel，进行refresh，它正在帮你生成ssl证书

稍等生成完毕，就可以通过你设置的域名访问博客了，但是国内访问还是会有一点慢

回到阿里云修改刚才的主机记录，我们要重新设置记录值。这里有一些可以提升国内访问速度的解析地址可供选择：

vercel.cdn.yt-blog.top，国内第三方提供，中国访问速度优，稳定性未知
cname-china.vercel-dns.com，针对中国地区优化的官方解析地址

随便选一个就可以，本站用的是第二个

将记录值改好后回到vercel，会发现弹警告，不过不影响，因为此时我们的网站可以正常使用了

挑选主题

hexo有很多主题可供选择，这里列出几个个人比较推荐的：

Butterfly - A Simple and Card UI Design theme for Hexo，本站使用的主题，有很多可自定义的配置项，支持多种评论系统，相对的配置起来也有点麻烦
fluid-dev/hexo-theme-fluid: :ocean: 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo，设计感很强的主题
NexT - Theme for Hexo，相当简洁高效的主题（但是我感觉很容易和别人博客撞衫，没有说这个主题不好的意思（
前往官网搜索更多

本站使用的是butterfly，而butterfly的配置项实在太多，为了尽快上手使用，本文使用更为简洁快速的NexT主题。

中文文档参考：hexo-theme-next/docs/zh-CN/README.md at master · next-theme/hexo-theme-next

安装主题

在项目文件夹通过npm来安装主题

1	npm install hexo-theme-next

如果显示连接失败就多试几次，很快就下好了

然后会在node_module文件夹里找到主题，把它移动到theme文件夹里

然后启用主题，在_config.yml文件中更改：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next

保存，cl、g、s各来一遍，验证一下站点是否正常运行，如果成功的话，可以看到我们的网站已经换上主题了！

主题配置

在进行配置之前先做一些准备

在根目录新建一个名叫_config.hexo-theme-next.yml的文件，然后打开主题文件夹中的_config.yml，将里面的内容全部复制到刚才新建的空白文件中，这样hexo就会自动合并_config.hexo-theme-next.yml和_config.yml两个配置文件，且优先读取根目录下的文件，一是防止出错，二是防止主题更新时覆盖原先的配置文件。

现在打开配置文件，哦，这个好像配置项也不少。。。好在真正需要配置的基础内容不算太多，只要先把外观调好就行，剩下的评论系统之类的需要外接的功能可以后面再慢慢设置。接下来可以一边跟着主题文档一边进行配置NexT - Theme for Hexo

也可以参照这位大佬的Hexo-nexT主题配置文件_config.yml解读 | 知行博客（这位大佬的另一篇教程放在了参考区，相当全面了）

其实到这里就差不多是一个能看的网站了。以下会以个人经验整理一些有关文章和网站管理的小tips。

写作小tips

一边预览一边写文章

市面上有很多markdown写作软件，比如我现在在用的就是Typora，看起来是这样的

不过这个软件要付费，所以其实直接在vscode里写就行

在vscode下载一个扩展

就可以一边写md，一边实时预览效果，点击画圈的那个图标就行

文章模板

如果习惯在写文章前加一堆 front matter ，那么每次新建文章都要重新敲一遍，会十分麻烦

打开scaffolds/post.md，这是你文章的模板，以后所新建的文章都会套用这个模板，只需修改它就ok了

网站管理小tips

美化文章链接

写文章写多了后，会发现默认的文章链接格式会带上文章标题，就导致变得特别长一串，十分鬼畜

所以这里使用ohroy/hexo-abbrlink: create one and only link for every post for hexo插件来解决这一问题。

在项目目录

1	npm install hexo-abbrlink --save

安装插件，然后在_config.yml找到配置permalink的地方，改为

1	permalink: posts/:abbrlink/

再在这个文件插入如下代码（在文件插入就行，无所谓什么位置，可以在extension下面）

# abbrlink config
abbrlink:
  alg: crc32      
  rep: hex        
  drafts: false   # 是否为草稿生成abbrlink
  force: false    # 启用强制模式（一般为false）
  writeback: true # 是否将对front-matter的更改写回实际的markdown文件（默认为true）

前两项设置的是生成的abbrlink的样式，如果看不懂，可以对照下面来理解一下效果

#crc16 & hex
https://post.zz173.com/posts/66c8.html

#crc16 & dec
https://post.zz173.com/posts/65535.html

#crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

#crc32 & dec
https://post.zz173.com/posts/1690090958.html