前言
中学还在用QQ空间的时候，我还挺高产的，QQ日志分页都出省略号了，发文也经常有同学评论转发。我的第一个使用个人域名博客是2015年时羽川汐帮我建的，我也发了一些文章，后来换到Hexo，再后来因为VPS炸了就没再建设起来。域名下只留一个页面链向我的各个社交网站，没有文章。后来我有用Tumblr和Medium零零散散写点东西，但没有长期经营的计划。身边好多人都有自己的博客，我也想有一个可以随意废话和人分享的地方。
每年都想建博客，每年都因为各种各样的原因纠结拖延。几年来陆陆续续有一些想写的东西，但不想发布在分散的平台上，所以还是决定不再拖延自己博客的建设了。本文是一些重建博客的心路历程。我先叠一个甲在这里：我前端水平很初级，会碰壁是正常的。如果对我的操作有质疑，麻烦管理下血压好好说话哈。
压力和拖延
自从开始做网页设计，建博客就变得更有压力。我一直觉得设计师自己的博客应从设计、编写到部署都自己建设。尽管我也学了一些网站开发，我不觉得我有能力建设一个博客。我的博客应该是一个网站，不应该单单是几个网页。我也就能自己设计和开发在线作品集这种静态单页面跳转集合，博客网站结构和功能还是太复杂了，我没有自信能独立完成开发。所以我一直在纠结到底是自己靠渣技术写个简陋的凑合用，还是直接套用现成的主题，或者用WordPress这种带后台管理的系统。
Peer pressure让我更加纠结。我的读者应该大多来自推上我的社交圈，各个都是写个网站手到擒来的高级程序员。我，不想被卷到…
建设是一方面，设计也是一个原因。因为是自己给自己当老板，所以没有截稿日，我就会一直改一直改，结果就是很难决定。叉烧说这样“四舍五入就是在上班”，我也觉得是。给自己设计网站不得来一套VI（品牌设计）嘛，logo、字体不用说，色板、design system也少不了。我给自己做的话要求会很高，这不比上班压力还大吗…
诸如这些压力，都导致我一直拖延博客的建设。
选择技术栈
开始干了，但还没有真的开始干，具体的技术栈也要纠结一下。
我的选项有：
- 自己写的简陋网站
- 所见即所得博客服务（Wix、Squarespace、WordPress官方托管）
- 第三方博客服务（Tumblr、Medium）
- 自建WordPress
- 静态框架套主题
自己写太累了，pass。我的好些同行都是用Squarespace或者WordPress，所见即所得的，排版、加文章、加页面都很方便，买了个域名就用了。但我觉得不够自由，他们提供的所见即所得编辑器，想学会用也挺繁琐。Tumblr之类的，无论是管理、编辑都超级方便，但我会担心游客没有相应账号不能评论，也没有特别满意的主题。最后，我请教了教我前端设计开发的教授，他建议我如果对运维不自信，不要选择WordPress这类需要自己管理后端和数据库的工具，所以我最后选择了用静态生成。
静态框架也有好多，我就挑几个见过的选了。比较大牌的有Hugo，我之前用的过台湾人开发的Hexo，还有小允在用的Lektor。最后我选了Hugo，因为用得人很多，而且找到了一个挺漂亮的主题。
套用主题和踩坑
上手这个主题才发现套主题并不是一劳永逸。Novela设计上有柔和的阴影、渐变和微动画，本来是为了好看所以选它的，可自定义的话有很多想不到的问题。
首先，主题强制每个文章都要有题图，不定义题图的话会空有一个边框留在那。想要去掉题图要改主题module的layouts/_default。我尝试去掉hero组件后，图的边框没了，可它位置依然会被留白。这导致我如果不想让主页一片文章都是同一张图的话，就得每篇都做一个图。做就做吧，题图太高的话会还遮挡正文，太长太宽在首页都会被裁切。(以及插图下面竟然不显示注释？！)
模板issue里有其他人提到题图遮挡文字的问题，网友的解决方案是改它的CSS。以及，题图放文章目录里的话在主页就读不出来，还留个阴影框占位置。
此外，这款主题还有个纤细优雅的动画进度条，但我发现这个进度条有可能会让页面滚动变卡顿。再者，页脚的社交链接如果没填够五个，中间就会空出来几块位置。我不能理解怎么会有这种设计，估计也要去CSS里改。
主题默认所有图片都在static/images目录下，包括题图、文章插图、头像。我认为文章单独的图放在文章目录里更好找，就把原有的目录结构
|
|
改成了：
|
|
结果文章里能显示，但是主页显示不了题图。我想，主页可能不认识post/里的文件夹，一定要在static/里找。于是我又把目录结构改成了：
|
|
这样的文件夹结果终于做到了给文章插图单独放，主页也能显示题图。但……同样的名字我要建一个.md还要在另外的地方建同名文件夹，难受，只能说我为了用这个主题而妥协了。
写这篇文章的时候，画这个树状图发现这个主题居然没有针对code snippet设置样式，上面的三个代码块全部是居左的也没有高亮。我在assets/找到了针对<pre>的CSS，在浏览器里手动加了一下发现是有个黑底白字的class，不懂这个class为什么没有自动被用上。我试了在Markdown里直接加<pre class="code-toolbar">，代码整个消失了，看源码因为是raw HTML就直接被省略掉了…- -！本来都不想管了，在博客上线前还是决定修一下，把code-toolbar class的selector直接改成文章里的<pre>，这样就可以了。
我上面提到，可以通过改主题代码来修改结构和样式。但其实我fork的这个主题是一个专门的Hugo Starter Template，我在blob/master/go.mod里看到它是require了原版的主题。相比之下这个Hugo Starter少了很多文件夹，assets/和layouts都是没有的。所以我一开始遇到问题时非常迷茫，一般想改什么直接搜名字就能改了，但这些文件夹都是引用来的，上哪改啊？小允提示我说，可以从原版把这些我要改的文件复制过来，就可以覆盖它引用的原版部分了。这么做并不优雅，只能说见招拆招吧，我想不到主题还能有两个版本。
最诡异的是，因为starter是引用模板的，有些模板里的文件删不掉，（或者我没找到在哪删）。我发现我生成的静态文件里还会带上模板里的示例图片。我不知道这图还能在哪被引用到，我早就把starter里引用这些图的部分删掉了。代码的话可以从原版下载starter里不存在的文件，因为是同名文件所以可以覆盖掉原版。
我看到content/里有个about.md但是主页上没有about链接，我也没在哪里找到可以添加链接的地方…
我想自建博客而不是用第三方有一个原因是想允许游客不注册账号（只凭邮箱和昵称）就能评论。我一开始尝试添加Disqus，遇到了一大堆麻烦。一开始用的是Disqus官网的代码，里面要自己填写文章页面的url作为文章ID，但是Hugo的BaseURL + Permalink语法没搞明白，发现Hugo会把BaseURL的string里的引号给转义。然后查到Hugo自带了Disqus模块，不用担心BaseURL被转义的事了，但是有一定概率鼠标点不动任何Disqus的控件。偶然发现鼠标放到一定高度就点得到了，窄屏幕时也可以点到Disqus。窄屏幕的时候不显示进度条，加以测试，结论是文章进度条的padding会把它遮住，导致Disqus控件看是看得见，但是无法进行交互。本来气得想删掉这个进度条，但是忘记在哪搜到了什么东西，总之最后通过CSS修好了。再后来，因为至今还没发现的原因，哪怕我把进度条删掉，Disqus控件依然点不动，我累了，放弃了。不喜欢Disqus了。
小允帮我部署了Isso小果然，一个德国人开发的和Disqus差不多的评论框，支持Markdown评论。加上后能用了，但是CSS一团糟。因为主题的作者写CSS的时候非常暴力，把h1、h2、p这种基础HTML element都直接没有限制class写了内容。导致在任何地方都会被应用上。其中有个p { max-width: 680px; }，于是所有的文章以外的p都被应用上了宽度限制，Isso评论框也歪七扭八。除此之外，因为Isso的js是在 <script>里加载的，而且会加载他自带的CSS，这时候网站本身的CSS已经加载完了，于是Isso的CSS就会覆盖我的CSS，导致按钮不一样大、控件不一样高。于是我新起一个sass文件，写了一些!important样式把isso自带的覆盖掉了。
这是我第一次用Hugo，不懂哪些问题是starter pack的，哪些是novela主题的，哪些是Hugo主题编辑器的，哪些是Hugo本身的，哪些是Go的……完全是摸着石头过河。选Hugo本身也许不是个错误的决定，它能成为静态博客的扛把子一定有它的原因，人家的star数排第二呢，只是我不懂的太多了。小允劝我说别和**Hugo搏斗了，真喜欢这个主题就扒下来放到Lektor里，可我既不熟悉Hugo也不熟悉Lektor，port主题不见得会更容易。我也想过要不要干脆换个主题试试，也许也有其他好看的。可难道我现在这里遇到的问题其他框架/主题一定没有吗？
早早放弃不如就这么研究下去，这里踩的坑也许还会遇到。不浪费时间折腾下一个主题或者框架了，先弄个差不多博客先上线再说，不然就回到了问题的一开始，继续拖延和纠结，永远也写不出来一篇文章。
从2022-05-24我放出豪言直到全部搞完，每天都在更新这篇博文，小允帮了我很多。遇到了很多问题，最后还有一些问题，但是就这吧，先上线再说。