前言

之前使用HEXO加上NEXT建站。优点是使用确实很方便，想要的功能基本都会有。但是感觉加载速度不太好，模版文件试了下不太好改，还有就是很多人使用HEXO加上NEXT建站。就想换个方式至少与其他人不是那么相同

之前的经历

GitHub page

最开始使用GitHub page托管，因为HEXO有这个方面的插件。部署起来非常的方便。但是因为GitHub page访问时好时坏，就换到了腾讯云了

腾讯云

在服务器启动webhook程序。通过hexo-deployer-git插件，会在对应分支做git push操作。利用这点加上GitHub的webhook，通知服务器拉取分支代码，构建带有网站静态文件的Nginx docker镜像上传到DockerHub，利用DockerHub的webhook通知服务器部署镜像。那么问题来了，有时服务器的响应会较慢而且要消耗服务器的带宽。有没有更好的方式呢

CloudFlare CDN

加快访问且减少服务器的带宽消耗，很容易想到CDN内容分发。发现CloudFlare就是干这个的。他的优点是免费、自带数据分析，而且确实提高了访问速度，只不过大部分时间我不挂VPN的时候访问巨慢。接受不了

选用Hugo的原因

Hugo的有点对我来说是一下几点：

• 使用go语言开发的，如果我想改点东西的话可以自己fork出一个分支
• 自定义模版文件使用更简单，对于我这个没有前端工作经验的人来说能改的了
• 目前项目很活跃，短时间内不用担心项目不再维护的问题

基于Hugo及hugo-theme-stack建站

在git上搜索hugo theme，挑了个star高的且文档齐全的主题hugo-theme-stack。对这个组合进行了一些自定义的设置，主要包含以下一些内容：

添加Google Analytics

谷歌分析，查看页面的

添加评论系统

默认是使用disqus，但我觉得gitalk更符合我的审美，而且disqus会在我的页面上展示我不希望出现内容

修改页面URL

我不喜欢在URL上显示时间或标题，就改成了/post/:slug形式。为了配合这种URL形式，需要修改文章的模版文件./archetypes/default.md添加slug: {{ string now.Unix }}页面级参数。配合我写的简单shell脚本可以达到URL为/post/1529598446/的形式

1
2
3
4
5

|- content
  |- post
    |- 1529598446
      |- ****.png // 文章引用的图片，![图片名称](****.png)
      |- index.md // 文章内容

添加busuanzi访问统计

busuanzi 加在主页及文章内容页。但因为原主题中主页文章列表部分引用了文章页的模版，导致列表部分会出现错误的文章阅读次数，所以这里改了列表部分的模版

highlight 设置

highlight 代码高亮显示是主题自带的，但因为主题内带的配置文件不包含markup项，导致在css为light主题下，代码块会显示dark主题的配色，相当违和。加上markup后就正常了

自定义内容

我觉得这是一个很重要的功能，涉及你能对自己的网站个性化的程度。

修改主题

主题预留了 layouts/partials/head/custom.html 和 layouts/partials/footer/custom.html 这两个文件来自定义页面头部和底部的内容。

添加自定义主题

借助 Hugo 的特性可以很方便地覆盖主题的源码（类似 WordPress 的子主题功能)。在配置文件添加以下内容

1
2
3

theme: 
  - my-site
  - hugo-theme-stack

在themes下添加my-site文件夹。比如要替换路径themes/hugo-theme-stack/assets/scss/partials/footer.scss文件内容，复制内容到themes/my-site/assets/scss/partials/footer.scss后编辑就可以生效，优点是hugo-theme-stack主题的修改不会影响自定义的内容

部署

部署依旧用的是HEXO使用webhook的流程，其实可以改为本地生成静态文件push docker镜像进行部署，但是暂时不想扑腾了，以后有时间再改。