使用Hugo构建博客
尝试用hugo构建博客,替代之前的hexo,主要原因:
- 静态文件生成,当文章数量变多时,hexo(node)的生成速度明显变慢,而hugo(go)依旧像飞毛腿一样。
- 功能,从文档上来看,在内容管理与模板功能方面,hugo所提供的更加丰富和灵活。
- 主题,不像之前喜欢比较花里胡哨的了,hugo的主题就满足了。
- 个人需求较少,hexo其实也没有深入使用。
基本操作
安装Hugo
macOS下可直接使用homebrew安装,其他平台请参考官方文档
brew install hugo
查看安装版本:
> hugo version
Hugo Static Site Generator v0.53/extended darwin/amd64
创建项目
hugo new blog
安装主题
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
这个主题是官方文档中快速开始推荐的主题,由于ananke
这个主题在元素的样式方面没有任何添加,大部分需要自己编写,可以尝试引入代码高亮适当加点颜色…
代码高亮
代码高亮可以使用常用的highlight.js
或prismjs
。以前者为例,在head模板中引入highlight.js
即可,国内的话使用bootcss
速度较快。
<link href="https://cdn.bootcss.com/highlight.js/9.13.1/styles/monokai.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
切换主题
一开始使用的是官网的默认主题,之后换成了maupassant
,发现需要改动的地方不少,感觉hugo模板的文档需要进一步加强,也是灵活性太强引来的副作用。
由于hexo
原先的内容目录结构比较统一,一般在表示内容的source
路径都具有_post
, categories
, about
, tags
等页面,而maupassant
主题使用的目录结构默认是hexo
的这种形式。因此在hugo中使用maupassant
主题时需要手动创建一下这些页面才能使用它们的模板。
概念
这部分官方文档是最好的材料
GitHub部署
-
创建Github Pages,将对应项目使用submodule拷贝下来:
git submodules add git@github.com:<USERNAME>/USERNAME>-github.io public
-
生成静态文件
hugo
-
更新与部署
使用官网文档的shell脚本
deploy.sh
:#!/bin/bash echo -e "\033[0;32mDeploying updates to GitHub...\033[0m" # Build the project. hugo # if using a theme, replace with `hugo -t <YOURTHEME>` # Go To Public folder cd public # Add changes to git. git add . # Commit changes. msg="rebuilding site `date`" if [ $# -eq 1 ] then msg="$1" fi git commit -m "$msg" # Push source and build repos. git push origin master --force # Come Back up to the Project Root cd ..
参考
- 原文作者:yrq110
- 原文链接:http://yrq110.me/post/go/build-blog-by-using-hugo/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。