Hugo环境搭建

轻松搞定博客系统

五月 4, 2019 5 分钟阅读时长 Tools

[toc]

Hugo是什么？

Hugo以速度快著称，号称是世界上最快的网站生成框架。

tl;dr

当前放弃了WordPress作为博客的选择！😂😂 体验不够优雅顺滑！其技术栈复杂，用到了mysql, php-fpm, openresty以及wordpress本身，而且wordpress本身一大堆的插件，2U2G的机器不足以容纳如此重的内容；

下述文档仅记录Hugo环境搭建过程需要注意的内容，以备后续查阅需要。

FAQ

关于nginx ssl 证书的获取

当前的方案是参考在阿里云申请的免费ssl证书¹，证书由于是有有效期的，到期了还得去阿里云重新申请证书并且绑定，有点繁琐；当前申请的证书是在浏览器访问的时候并不会出现不安全的提示。

为了避免繁琐的证书到期而切换，希望有一种方法能够自动化实现证书的定期更新，因而找到了另外在skyao的博客中提及的内容²（有待后续进一步验证）
对于nginx的80端口和443端口

对于服务能够对外提供既能够提供https, 也能够提供http服务；默认https走的443端口，而http走的80端口,可以按照如下的配置使http的请求都会跳转到对应的https
```
server {
    listen 80;
    server_name liaolile.com www.liaolile.com;
    rewrite ^(.*)$  https://$host$1 permanent;
}
```
关于当前Hugo国际化i18n配置

需要在hugo的根目录下进行i18n目录的创建，并且在其中加上对应的zh.toml配置文件，用于国际化内容替换
关于高效的写作环境使用的是Typora + PicGo + SM.MS 三个配合进行使用³，其中Typora为Markdown写作编辑器，体验不错；PicGo主要用于处理当前Markdown文档中图片自动落床的问题，其会把Markdown文档中插入的图片自动上传到SM.MS图床服务账号中，为啥不选gitee作为图床呢，当前遇到了一些坑，服务端一直报403。
关于hugo academic主题
- acadmic主题的地址是：start-hugo-academic，类似于springboot的一键式集成，其对应的主题实际是在go.mod中指定的github.com/wowchemy/wowchemy-hugo-modules/wowchemy/v5 ，主题会下载到本地，因而主题的定制需要在对应的本地文件中。
  - 该wowchemy/v5主题中很多资源引用的cdn.jsdelivr.net的资源，但是目前其资源由于dns污染，在中国加载有问题⁴，所以需要切换对静态资源加载的地址，主要的资源地址配置在/opt/blog/hugo-theme/wowchemy/wowchemy-hugo-modules/wowchemy/data/assets.toml文件中，其中上述加粗/opt/blog/hugo-theme是对应的主题的本地路径。该文件中主要有两种资源：cdn.jsdelivr.net/npm和cdn.jsdelivr.net/gh资源（github静态资源托管），其中https://cdn.jsdelivr.net/npm资源替换为https://unpkg.com/, cdn.jsdelivr.net/gh暂时找不到对应的替换cdn地址，只能去github上下载对应的源码文件并且托管到自身的服务器上，如下是参考：
  - 对于出现替换本地文件后出现Failed to find a valid digest in the ‘integrity’ attribute for resource ‘https://liaolile.com/js/local/cdn.jsdelivr.net/gh/krisk/Fuse@v3.2.1/dist/fuse.min.js' with computed SHA-512 integrity ‘tm9sNooEMtnClt+Dyrr0YPWwlOdUSm9/y97x0WjXHahG7QyPXs334pApMrY2cxitrW5zZIDCHveVvvgHfJS9uQ==’. The resource has been blocked.问题，直接找到对应的文件的sri值，替换为对应的SHA-512值即可。
关于分享集成
- 对于share.js的集成，参考相关的帖子⁵，同时对应share.js的github地址可供相关的定制使用参考：overtrue/share.js: 一键分享到微博、微信。界面相关的一些其他的定制，均可参考该帖子，方法类似；当前微信的分享标签在手机端是不显示的，因为手机端的app一般都有分享的控件直接进行控制；网页版效果如下：
  
  修改/opt/blog/hugo-theme/wowchemy/wowchemy-hugo-modules/wowchemy/layouts/partials/page_footer.html，放上自己定义的share.html嵌入；
- 关于author微信二维码的图片，当前尚无现有的方法进行集成，需要自行写js以及插入到对应的html界面中。获取当前微信头像的悬浮事件，然后绑定图像呈现在对应的下方；当前所有的社交icon均在network-icon class中定义的（当前有两个地方引用，一个是author的个人简介部分，一个是每篇文章的末尾介绍），需要把相关的js加载的，并且把二维码渲染绑定到.fa-weixin上。如下图：
  
  对应的需要修改的html对应的文件是：/opt/blog/hugo-theme/wowchemy/wowchemy-hugo-modules/wowchemy/layouts/partials/social_link.html
  
  新增下述红色内容：
```
<script src="/js/jquery.js"></script>
<script src="/js/self.js"></script>
```
  对应的需要修改的html对应的文件是：/opt/blog/hugo-theme/wowchemy/wowchemy-hugo-modules/wowchemy/layouts/partials/widgets/about.html，也是新增自定的js脚本
关于文章内容加密

Hugo-Encryptor⁶ 是一款能够帮助作者保护文章内容的工具。它使用 AES-256 来对文章的内容进行加密，并且通过在文章中嵌入内联 JavaScript 代码来验证读者输入的密码是否正确。没有正确的文章密码，读者将无法看到文章的加密内容⁷。

遇到如下的问题：

参考

Hugo

Hugo环境搭建

Hugo是什么？

FAQ

参考

Liao lile

架构师 | 系统工程师