svdu

Migrate to Hugo

终于从下定决心从 Typecho 切换到静态网站了!网站使用了 Hugo ,写一篇文章庆祝一下,记录一下历程并且记录一下使用方法。

准备

为了使用静态网站进行写作,当然是需要一个非常好用的编辑器才行,因此我选择了 Typora ,并为它写了一个 CSS ,这个 CSS 同样在我的网站中使用。

得益于非常好用的 scoop ,这个 Windows 的包管理器,可以非常方便的安装软件。

为了写主题,我还安装了 Visual Studio Code。

> scoop install typora
> scoop install hugo
> scoop install vscode

编写主题

Hugo 的主题写起来的感觉比较奇怪,首先 Hugo 是基于 go 开发的,但是除了 := 运算符和奇怪的灵活语法外,它的模板引擎中就没有任何 go 的影子(这是好事,也不是好事。)

一个最小的主题至少要有如下结构:

├───layouts
│   ├───partials 
│   ├───_default
│   │   ├──list.html
│   │   ├──single.html
│   │   └──taxonomy.html
│   └───index.html
└───static
    └───css

不过有的主题可能没有那么全,比如说没有 index.html 啥的,让我觉得有点迷。

主题制作实际上只需要完成 list.htmlsingle.html 就行了,前者是列表页面,譬如一个最常见的 Archive 页面(归档;)后者是内容页面,例如文章(post)页面和普通(page)页面,如关于页面啊,友情链接页面一类。

taxonomy.html 其实和 list.html 一样,但不同之处在他们的作用域。虽然 taxonomy.html 作用域是分类页面,而 list.html 更多的是普通的文章列表界面。例如说 /categories/a 打开就是通过前者,而 /archive 则是后者。

模版语言

Hugo 的模板引擎 Blackfriday 的语言,用起来非常奇怪,有一种 ruby 的感觉,但又完全不同。

例如我想要循环文章列表:

{{range .Site.AllPages}}
    <li>{{ . }}</li>
{{end}}

在 range 和 end 构成代码块就形成独立的作用域,缺省的占位变量是 . ,虽然也有别的方法,譬如 {{range $i := .Site.AllPages}} 但是写起来却无比奇怪,另一方面,它也能接受 {{$i := range .Site.AllPages}} 这段语句和上一个是同义的,说实话,这两者读起来都比较反人类。

另一点就是在引用 partial 时,必须要传入参数才行,这一点也是比较麻烦,因为完全可以将 partial 的内容插入到引用它的 html 中再生成,没啥必要将参数传入 partial 中。(不过好像大部分模板引擎都是要传参的,不过也就释然了)

最后想要吐槽的一点就是后缀是 .html ,不过不敏感后缀的话,应该换啥都可以,只不过懒得去尝试了,换成了别的编辑器也无法自动高亮代码,还得自己设定高亮语言。

迁移与写作

因为 2018 年也没写几篇文章,所以干脆手动复制迁移了,再加上 Typecho 在数据库里面文章的时间戳实在看不明白,也懒得去看文档,再写脚本,手动复制到也快,10多分钟就搞定了。

写新的文章到也比 hexo 更方便,hexo 必须用命令新建,至于能不能手动创建 md 文章就不清楚了。但是 Hugo 更加简单,反正都只读取 /content/ 里面的 md 文件,所以完全写了以后复制进去即可。

实际上在写这篇文章的时候,我觉得所有文件都放在 /content/posts/ 下都有点麻烦,于是我新建了一个文件夹,并把去年的文章全部放进去了,结果意外的自动处理了,非常方便,并且生成出来的 permalink 也都正常。

部署与管理

现在 GitHub 支持免费的 Private Repository 了,不过 GitHub Page 不允许设置为 Private 。

我一般情况下都是在 hugo server -D 的状态下,一边写作一边查看在网页上的效果,保存一下就生成出来了。

与 hexo 相比,Hugo 的命令行就比较反人类了,hexo 生成静态页面使用 hexo generate 通过动词即可。但是 Hugo 则直接使用 hugo 生成静态页面。

将生成静态页面的 public 文件夹添加用作 GitHub Page 的远程仓库,再 push 上去就 ok 了,但是原始内容管理起来就比较麻烦。于是我新建了一个 Private Repository ,把 /content/ 和网站的配置文件上传上去,以后迁移到其他平台只需要把这个 Repository 给克隆下来,然后新建 themes 文件夹,再把主题克隆进去,重新生成静态页面就可以了。

域名管理

因为自己一直有个域名 sotvokun.info ,既然是迁移,那肯定要将域名指向 GitHub Page 。

这个步骤反而是我耗时比较长的部分(写代码不算的话),这里直接贴出 nginx 的配置代码好了,也没啥好过多说明的,也是没怎么研究过 nginx 的配置:

server {
    listen 443 ssl default_server;
    # config about SSL
    server_name sotvokun.info;

    location / {
        proxy_pass          https://sotvokun.github.io;
        proxy_redirect      default;
        proxy_buffering     off;
        proxy_set_header    Host      sotvokun.info;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Protocol $scheme;
    }
}

总结

总的来说,这种静态写作的方法,实际还是挺好的,搭配 Typora ,所见即所得,感觉自己会更喜欢写作了呢!