前言
多年前基于Jekyll和GitHub Pages搭建的博客样式总是出问题,调研了下目前最流行的静态博客主要有3个:
- hexo:基于Node.js,开源地址:https://github.com/hexojs/hexo
- Hugo:基于Go实现,开源地址:https://github.com/gohugoio/hugo
- gridea:国产,个人维护,开源地址:https://github.com/getgridea/gridea
Hugo目前GitHub上star最多,我关注的几个技术博主基本都选用的Hugo,再加上Hugo基于Go实现,有bug我也可以考虑自己解决,于是果断选择了Hugo。
最终效果参考https://jincheng9.github.io/
步骤
Hugo
安装Hugo(以Mac为例)
$ brew install hugo
创建本地文件夹,用于存储博客内容,假设文件夹叫blog
$ hugo new site blog
blog目录下的文件内容如下:
drwxr-xr-x 9 zhangjincheng staff 288 12 21 14:46 . drwxr-xr-x 17 zhangjincheng staff 544 12 21 14:46 .. drwxr-xr-x 3 zhangjincheng staff 96 12 21 14:46 archetypes -rw-r--r-- 1 zhangjincheng staff 82 12 21 14:46 config.toml drwxr-xr-x 2 zhangjincheng staff 64 12 21 14:46 content drwxr-xr-x 2 zhangjincheng staff 64 12 21 14:46 data drwxr-xr-x 2 zhangjincheng staff 64 12 21 14:46 layouts drwxr-xr-x 2 zhangjincheng staff 64 12 21 14:46 static drwxr-xr-x 2 zhangjincheng staff 64 12 21 14:46 themes
even主题
给Hugo配置even主题:
下载主题到blog下的themes目录,在blog所在目录执行如下命令:
$ git clone https://github.com/olOwOlo/hugo-theme-even themes/even
使用even主题自带的全局配置config.toml覆盖Hugo初始安装的config.toml
$ cp themes/even/exampleSite/config.toml ./
根据个人需要,修改blog/config.toml里的配置项,比如网站首页title,右上角菜单名称,底部链接名称等。
注意:highlightInClient配置项和pygments开头的配置项不能都启用,都启用会导致markdown里插入代码块的时候样式错误。highlightInClient使用默认的false即可,不用修改。
使用even主题自带的博客文章默认配置
themes/even/archetypes/default.md
覆盖Hugo初始安装的archetypes/default.md
,在blog根目录执行如下命令:cp themes/even/archetypes/default.md ./archetypes/
修改
archetypes/default.md
里的默认配置项,把comment和toc都设置为true,用于开启文章评论功能和文章自动生成目录功能。启动本地Hugo server,查看博客效果,本地地址:http://localhost:1313/
$ hugo server
写文章和发布
在blog目录,使用
hugo new post/some-content.md
创建markdown文件$ hugo new post/test.md
发布:在blog根目录执行
hugo
命令或者hugo -t even
命令,自动根据md文件生成文章的静态页面,静态页面发布在根目录的public文件夹下面$ hugo
启动Hugo server,查看网站最新效果,在blog根目录执行如下命令:
$ hugo server
GitHub Pages
以上流程走下来,我们就在自己本地电脑搭建好了一个基于Hugo + even主题的博客网站,但是不能被互联网访问。
我们可以借助GitHub Pages把本地博客的public文件夹内容发布到GitHub上,就可以通过互联网访问博客了。
- 在自己GitHub上创建一个新的repo,命名为username.github.io,其中username是你的GitHub的用户名。比如我的GitHub个人主页是:https://github.com/jincheng9,那我的username就是jincheng9。
把本地博客public目录下的内容push到GitHub的 username.github.io工程里,注意,要把git repo地址替换为你自己的。
$ cd public $ git init $ git remote add origin git@github.com:jincheng9/jincheng9.github.io.git $ git status $ git add . $ git commit -m 'add blog' $ git push origin master
- 步骤2执行完之后,public文件夹下的内容就被推送到了你的GitHub上的username.github.io这个repo里了。
- 等待几分钟,就可以通过https://username.github.io/ 访问你的博客了。
Utterances
我们还希望给自己的博客文章添加评论功能,用来和读者互动,utterances 是一款基于 github issues 的评论系统,非常清爽,还可以避免了 disqus 的广告以及加载问题。
- 安装utterances:点击https://github.com/apps/utterances,按照提示操作,把上面存放博客的repo的权限给utterances。操作完成后,在username.github.io这个repo的Settings->Integrations里可以看到utterances。
修改博客的全局配置config.toml。
[params.utterances] # https://utteranc.es/ owner = "jincheng9" # Your GitHub ID repo = "jincheng9.github.io" # The repo to store comments
重新部署博客,就可以在文章下面看到评论区了,正如本篇文章最下面的评论区一样。
$ hugo $ hugo server
- 注意:每次自己本地的修改,需要先执行
hugo
命令来更新public下的内容,再进入public目录把修改push到GitHub上,才能保证互联网访问的内容是更新后的,否则修改只会停留在本地。
开源
欢迎关注公众号:coding进阶,学习更多实用知识
开源地址:https://github.com/jincheng9