搭建分为三部分:
Hugo 本地建站
站点主题配置
从本地部署到 GitHub
搭建好了之后还要知道如何持续更新,毕竟搭建这个网站就是为了持续写博客更新,这一部分网上没有相关细致的分享,琢磨了不少时间,但是这才是最重要的一部分,写在本文最后。
一、Hugo 建站发文章
安装 Hugo
【Windows 10】直接 GitHub release 线上下载,一般找最新的,看你喜欢咯。下载下来是一个 Hugo.exe 直接可以用的(没有规定要放哪里,其实它就是个软件,按你平常下载软件的喜好就行)。不过还是这里勤劳一点把它添加到系统环境变量里好,方便后续操作,不然后边在命令行里每次调用都要找到相应安装位置。
生成本地站点
命令:hugo new site XXXX
它会给你生成一个 XXXX 目录,这就是你的 XXXX 站点啦。
这里可以先有个概念:
使用 theme
https://themes.gohugo.io/ 这里找到喜欢的主题,找它 fork 到自己的 GitHub 上(其实也可以不用 fork 的,只要你不想后期自己去修改这个 theme 就行)。
进入 XXXX 这个站点目录下。
(如果你不知道涉及到与远程 repo 交互的操作的前提是要做好 SSH 认证,那可以看另一篇介绍/或者网上找一下 “GitHub SSH 设置”之类的,关键词就是 SSH 啦)
这里就把那个主题 clone 到了 themes/ 下了。
然后在 XXXX 站点下的 config.toml 文件中增加一个主题的设置:theme = “XXXXXXX”
发布一个文章
到这里 Hugo 站点就建成了,不过目前服务器是在自己的电脑上的。
- 使用命令:hugo server -D 启动服务器,访问地址是 localhost:1313/
但是现在网站是没有内容的,因为没有写东西呢。
来写一个文章:(其实这里只是想让你看一下效果,说明它真的变成一个本地网站的,你也可以这时候直接进行下边第二步修改主题的配置,一样可以看效果的)
- 使用命令:hugo new posts/firstPost.md
在 content/posts/ 目录下生成 firstPost.md 文章。这个 posts/ 就是你本地发布文章的地方。
查看 localhost:1313,可以看到博文发表了。
二、修改主题配置
这个其实就是修改上边提到的那个 config.toml 文件,只是配置更多内容,使得它展示更丰富的效果,其实也就是每个主题的要义(主题的源码内容其实就是关于如何更丰富地展示网页的 CSS 之类的东西,但是需要你的站点总的去配置相应的路径啊之类的,这个总的配置文件就是那个 config.toml,它是在你的 XXXX 这个 site 目录下的)。
而每个主题中其实都会告诉你要在 config.toml 这个文件中配置什么,直接复制粘贴就行了。
(此外还有它的其它设置,如新增其它 CSS 之类的,具体看该主题的说明吧)
三、部署到 GitHub
这样会在 XXXX 下生成 public/ 目录,这个目录就是网站对外的“后台”,你在 content/posts/ 中写的文章会在这里边自动更新,然后显示在网站 https://yourUserName.github.io 上。
四、之后怎么持续发布文章和修改网站效果?
总结一下更新 config.toml 和文章后推送到 https://yourUserName.github.io 上的方法。
注意,文章是在 XXXX 站点下 /content/posts/ 目录中写。
首先其实更新推送的 repo 是 public 这一个(就是yourName.github.io.git),跟自己建的站点和主题这两个 repo 都没有关系,git 命令只在这个目录下使用(背后的执行机制肯定是有关系的吧?其实在 VS Code 中它直观显示的是改动的 repo 是两个,一个是 XXXX 这个站点,一个是 kiss 这个主题,并且其实没有显示 public 这个 repo 名 yourName.github.io,深入暂时就不去研究了,这里也不用管)。
虽然 config.toml 和写文章的 content/posts/ 都不在 public 这个 repo 中,没法用 git 去更新它们,但是 hugo 这一句完成了这一步,它会把 config.toml 和 content/posts/ 中的更改自动同步到 public 这个 repo 中。
所以,无论是要修改网站配置 config.toml 还是文章(或者其它),只关于 XXXX 站点目录和 public/ 这两个目录,操作也只有四步:
1、修改完成之后在 XXXX 站点目录下执行 hugo
2、进入到 public/ 中,三阶段执行 git
git add -A
git commit -m “XXXXXXX”
git push origin master
但是在写文章的时候,有两个点需要注意(以 kiss 主题为例):
只能用 md 格式(后缀),不然不显示。
文章开头要加一些东西标识

它是通过命令对 XXXX 站点下 archetypes/ 下的 default.md 设置的内容进行编译的。
附上官方说明:https://github.com/tanksuzuki/hemingway/blob/master/exampleSite/content/post/creating-a-new-theme.md

如果你用 hugo new filename 命令去创建新文章,那它会自动给你这些,但是不想这样用 hugo 的话,就手动自己写。
好像其它主题的 default 规则是不一样的,但是阅读完上边这么多东西,应该知道相应的不同该如何处理了,先用 hugo new filename 生成一个规则内的文档看看,然后相应地联系一下逻辑就知道啦。