建站笔记

10 Aug 2022 6402字 22分
CC BY 4.0 （除特别声明或转载文章外）

注意

本文很长，如果想快速建站的朋友们直接看文章底部的“总结”板块！！！

初见

wu-kan的jekyll-theme-WuK主题模板是在浏览jekyllthemes.org时发现的。虽然能看到的只是个缩略图，但当时就被这个模板的侧边栏和界面大致布局所深深吸引，感觉见到了我的梦中情站。

其实之前也了解过hexo建站。但是后来转念一想，我是用GitHub Pages建站，GitHub本身推荐、支持Jekyll，还是找个Jekyll模板建站好了。

GitHub Pages有个好处就是可以直接在浏览器上修改代码和调试，而不用下载Ruby环境并在此基础上用Jekyll本地调试。准备建站前的我当时天真的这样想着。

这确实是个好处，但是弊端也很明显。

通过jekyllthemes.org转入作者的GitHub页和他发表到博客上（他博客就是用的这个他自己写的主题）的这个模板的使用说明页后，我更加觉得这个主题太妙了。

很棒的markdown渲染、基于reveal.js的.md文件幻灯片化、Live2D看板娘、基于utterances的评论系统…

然后我就看着作者的教程一步一步的配置自己的网站，并计划按作者的格式完成一些文档的书写。

捣鼓之旅

作者指出，fork他的wu-kan.github.io库再改动配置文件_config.yml就可以建站，之后只要依照他的格式写.md文件放进_posts文件夹就可以在自己的网站上看到文章了。

在这个版块，我详细讲一下我改动了fork来的repo中的哪些东西，以及我建站过程中碰的壁，希望给大家提供经验。

_config.yml

这里面主要改动了：

  • 第1行-title：把wu-kan改成你用作站点标题的文字。我这里改成了我的ID。
  • 第3、4、5行：写上你想要在头像图片翻开后展示的文字，用作个性标签。理论上还能增加行。
  • 第6~20行：一些外链（GitHub、b站等）的展示处。href处填写链接地址，下方的class填写图标。理论上只要按格式找到fa图标并填写链接就可以无限展示外链。我选择展示我的电邮、GitHub主页和b站主页。注意，电邮链接要加上mailto:前缀。事实上，.yml文件和.md文件插入链接时，电邮都要这么做才能正确的指向你的邮箱，否则会被当作你域名下（例：xxx.github.io）的一个文件的链接，若点击则出404页。当然markdown支持以<>括起来电邮链接（不带mailto:前缀）来正确解析出这是一个电邮地址。
  • 第22行-url：写上你的网站的网址。
  • 在第29行jekyll-theme-WuK命名空间往下，就依次是各个layout类型了。layout可以理解为你的网站中的页面种类。
    • 第33行-comments：comments页是这个模板右侧边栏的“留言”页，也承担起部署博客评论系统的任务。按照作者的做法，你需要先在GitHub建一个repo专门用来部署utterances。utterances是一个评论系统，可以嵌入网页。评论方式采用的是GitHub库的issue，评论相当于开启一个issue。评论者需要先登录自己的GitHub账号，之后就可以点击输入框输入评论并提交了。提交后的记录就以issue的形式存储在你建的那个repo中。建立好这个repo后，打开https://utteranc.es/，找到configuration板块下的Repository板块，在这里找到 utterances app链接，进入按提示将utterances机器人管家（也就是发布issue的那个“人”）安装到你的repo中，就部署完成。你可以到Settings中的GitHub apps板块查看你安装好的utterances。接下来到_config.yml中第33行repo处键入自己的repo地址（username/reponame）即可。
    • 第50行-default：default主要改动侧边栏。在改行键入你的头像图片地址。这个头像是侧边栏那个可以翻动的头像。这里介绍图床的用法。网页中的图片必须同样是存放在互联网上、有自己的网址的图片，这样才能随时随地加载出来，不受本地影响。专门用于存放图片并提供图片链接以供其他网站使用的网站就叫图床。这里感谢友人风子推荐给我聚合图床这个图床，我试用后感觉不错。其实也不一定要用图床，只要你能找到你喜欢的图片的链接（一定是指向图片本身的链接），就都能拿来用，但是有一个专门存放自己图片的图床一是很酷，二是也防炸。我一开始准备就在我fork的这个repo里建文件夹，再在里面上传图片用作图床。但GitHub这个网站在国内访问不稳定，于是最终转而选择了聚合图床。我用的是GitHub头像
    • 第52~61行：侧边栏的板块。一样的，改图标改文字，就可以自定义板块。我把打赏板块（merger）去掉了，merger也是一类页面，之后也需要把这一部分全部删掉。
    • 第217行：以mm/dd/yyyy hh:mm:ss格式输入建站时刻（或者其他的希望用作计时器起始点的时刻），然后侧边栏下方就有旋转的齿轮不停地记录从这个时刻以来过去了多少时间。
    • 第255行：改成你自己的Copyright声明，我写了2022 fonzoin。
    • 第257~270行：除非你有自己的备案信息，那么请修改，否则全部删掉。
    • 第305、310行：网页icon。都改成你自己的图片链接。我用的是我的GitHub头像。作者两个链接其实是一张图片，但分辨率不一样（注意他网址中的最后一个数字）。我们填一样的也可以。
    • 第656~658行：由于我不需要打赏功能，删去。提一嘴第650~655行，这是知识共享协议板块，如果你希望你的博文采用其他协议，就做改动。我在此沿用之。
    • 第659~692行：不需要打赏功能，删。

以上大致就是_config.yml的修改过程。

据悉，一般套用模板建站的流程就是单纯修改_config.yml文件。我正准备按作者的博文格式上传一篇我自己的博文时，曲折的事情发生了。

_posts

一开始，我看作者的_posts文件夹里貌似存放着所有的博文，于是我就全部删除之，并在_posts文件夹里按格式上传了第一篇博文。

这里说明一下这个模板的博文格式：

  • 文件名：yyyy-mm-dd-name.md
  • 文件头：title: name、tags: tag

详情可以直接进原作者的repo中的_posts中的随便一篇博文里看。

然后我开始输入我网站的网址进去调试，期待着看到一个建立完毕的心仪网站。

不错，侧边栏非常完美，网站icon也加载正确（其实这个时候我没用图床，我用图片原网址，来自GitHub和Nintendo）。侧边栏也没有打赏板块了，我开始测试留言、归档、标签板块。

太失败了！——Yjmstr

这三个板块全部空白。都不提逼格很高的图表了，连个字都没有。

观察三个板块的网址，再看看我的repo，觉得可能是没有相应的comments、archive、tags等相关文件导致的。于是手动写了这些文件放到repo下，这下起码有字了，证明我的猜想正确。

但是只有字，没有任何渲染效果，也没有图表。

这里我有些许崩溃，不过我在离开前还测试了搜索功能，能找到我的第一篇博文，渲染正常、评论区加载正常。

我开始重新审视_config.yml。发现，其中comments是有写到的（前面配置utterances的那一部分就是），但是配置里没有archive、tags的配置。

我去作者的原repo找以前的release。

找到了最新一个release。

这个release跟原来的那一版有不同。多了几个ruby相关的文件和一个CNAME，多了一个用作图床的文件夹assets/image。然后，comments、archive、tags相关文件都在repo的目录下，甚至404页也有。

于是在原封不动的情况下看了这一版本的网站效果，没有了幻灯片功能，但是多了一个不错的特色——可自定义博客背景图片。

把_posts里的博文全删掉，再测试，归档、标签板块都正常，图表也显示正常（不过这一版是饼图）。404页也正常。

然后当时觉得要不算了就用这一版吧，也改了_config.yml，还把评论区换成utterances（这一版原本不是utterances）。

但越看越觉得幻灯片功能还是挺好的，很想保留着；而且饼状图表没有表格化图表酷；头像后面的个性标签等位置也偏移。

于是我自作聪明采取了“融合”这个办法——自己稍微研究一下哪段代码对应着哪个功能，把两个版本融在一起。

太失败了！——Yjmstr

其实我最后融出来个还算可以的版本。

我借鉴了后一版的图床思想，直接再repo里建图床；我做到了又有幻灯片功能又有自定义背景功能。但最最重要的一点：那几个板块仍然要么就几个字要么就一片空白。

我是以前一版的_config.yml为基础，加上了后一版的tags等板块进_config.yml，不见效果。

这里先转移话题，讲一下如何在前一版的基础上加上自定义背景这个功能，并且将博文背景设为白色以防背景干扰阅读。

这两个都是后一版的功能，经两版对比，我们只要把下面这一段代码：

              <style>
                .wrap {
                  transition-property: width,background-size,transform;
                  transition-duration: .3s;
                  transition-timing-function: ease-in-out;
                  min-height: 100%;
                  display: inline-block;
                  background-size: 100% auto;
                  background-position: 0% 0%;
                  background-repeat: no-repeat;
                  background-attachment: fixed;
                  background-image: url(https://pic.imgdb.cn/item/62f3329916f2c2beb14bb735.jpg);
                }
                @media (min-aspect-ratio: 2400/1850) {
                  .wrap {
                    background-image: url(https://pic.imgdb.cn/item/62f3329916f2c2beb14bb73c.jpg);
                  }
                }
                .sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
                  width: calc(100% - 14rem);
                  background-size: calc(100% - 14rem) auto;
                  transform: translateX(14rem);
                }
                .layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
                  transform: translateX(0);
                }
              </style>

插入到前一版的default板块下“侧边栏放缩修正”和“跨平台中文字体解决方案”之间的区域（其他区域也可以，但推荐按我这个方法）。在上面的第12、16行分别填写手机端（竖屏）情况下的背景和电脑端（横屏）情况下的背景。详情可以看我的库fonzoin/fonzoin.github.io的_config.yml的第318~344行。

之后把下面这段代码：

            - | # 给文章加上白色背景，防止被背景影响阅读；同时加上加载动画
              <style>
                .masthead,
                .container.content {
                  padding-top: 1rem;
                  padding-bottom: 1rem;
                  box-shadow: 0 0 .75rem rgba(0, 0, 0, 0.1);
                  background-color: rgba(255, 255, 255, 0.95);
                  animation-duration: 2s;
                  animation-name: fadeIn;
                }
                @keyframes fadeIn {
                  from {
                    opacity: 0;
                  }
                  to {
                    opacity: 1;
                  }
                }
              </style>

复制到page板块下“首行缩进2字符”和“增加宽屏下的显示内容”之间的区域。详情见我的_config.yml的第473~492行。

好了言归正传，融合大失败后，想过诸如看其他release，放弃换模板等诸多想法，也捣鼓了很久，终于弄明白问题出在哪。

起因是我又开了个小号直接测试前一版的原始效果。所有的都正常，这证明了其实前一版什么文件都没有少（在他的体系框架下）。但是archive等文件也确实需要存在，不然读取时应该会出404而不会成功。

于是我找了一下终于找到前一版的这些文件在哪了，就在_posts文件夹里，跟其他正常博文混在一起。第一版大失败就是因为我天真的把_posts里的文件全删了。

查看这些文件，我也终于知道为什么这一版_config.yml里没有tags等板块了。

这些板块的配置（如图表效果等）都在这些文件里了。

事已至此谜团已破。

也就是说，前一版按照我上面讲的方法改动_config.yml，再删掉除了2017-09-01-404、archive、tags、comments.md这四个文件（如果想要使用打赏功能，则还要保留merger.md）的所有文件，你的网站就完全建立好了。

文件上传

这里再次说明一下这个模板的博文格式：

  • 文件名：yyyy-mm-dd-name.md
  • 文件头：title: name、tags: tag

然后如果需要博文以幻灯片形式呈现的话，要在文件头里加上layout: home。

然后在想要翻页的时候使用如下代码:


<!-- .slide -->

以及：


<!-- .slide vertical=true -->

进行页面切换。

其中前者是水平翻页，后者是垂直滑动。

前者执行的时候会透露出背后的你自定义的背景。

感悟

其实GitHub做图床不太好。我手机上没有梯子，GitHub访问困难。在手机上测试的时候图片就加载不出来。

后来用聚合图床，加载很快，不用梯子就能快速加载。

网站调试的时候也遇到了问题，就是更新后的效果总是不及时显示，要等很久。

后来一查发现得清除浏览器缓存（设置->搜索“缓存”->清楚浏览数据->清除所有时间的图片缓存）才可以显示改动后的效果。

这方法有用，但是有的时候还是不够及时。

后来想想要是能够本地调试就好了（localhost:4000）。但是纠结了很久，因为实在不想为了建个网站下一个环境，纵使可能不需要花很多时间…

但后来感觉建站花的时间实在太长（本周还有暑期项目任务呢），咬咬牙下了Ruby，下了Jekyll，按方法开始本地调试，结果一大堆包丢失，安装我也按不明白。

谁懂半夜两三点在那里敲命令行一个个安装包的痛苦？

讲个笑话当时安装前我想，安装一下不用很久，结果不知怎么的非得一个个安装，一个完了又是一个，一个完了又是一个，搞着搞着搞到半夜三点，结果出来个重量级，直接说我Ruby版本太高，我直接：？？？

然后赶紧睡觉了…

感觉自己有点菜，也就会猜猜代码啥意思了，其实啥都不懂。

建站一共花了三天才完全建成，融合不明白、调试不明白等等原因是我进度缓慢的原因。

所以我这篇博文写的很长很详尽就是希望大家一读就能用jekyll-theme-WuK搭建出网站。

总结

步骤：

  1. fork我的fonzoin/fonzoin.github.io库，改动我的_config.yml文件，若有不懂的再看本文的_config.yml部分的对应内容
  2. 删_posts里除了最上面四个文件，也就是除了2017-09-01-404、archive、tags、comments.md这四个文件外的所有文件
  3. 直接翻到本文文件上传部分进行阅览，依照格式发文

再次感谢wu-kan和他的模板！大家多多支持！