18年3月由群里发起的一个关于个人博客的讨论,让我了解到 Hexo 这个静态博客框架,自那日始,折腾近一年多时间,对 Hexo 可谓是十分熟悉了,Hexo 有万般好,唯独这生成速度令人喷血,页面多了那真是煎熬(虽然我暂时还没那么多页面)。三大静态博客系统,Hexo 和jekyll我都使用过,唯独这 Hugo 还从未接触过,遂于前天下午开了这个坑,并决定尝试制作一款 Hugo 主题。早就听闻它以速度快著称,一试之后果然如此,这次使用的 Hugo 是基于 Go 开发,谷歌家的一门语言。直接编译生成一个二进制文件,没有 Hexo 包依赖的问题,生成速度相比 Hexo 是质的飞跃,唯独这生态大不如 Hexo ,没有中文文档,没有插件,主题商店也很破旧冷清。
安装
这里仅记录Mac端的操作。使用 Homebrew 安装,Homebrew 是macOS上的第三方包管理工具,十分强大,还没安装的可以按照官网介绍自行安装。
安装 hugo :
brew install hugo
新建站点
进入你要放博客的目录,在当前目录生成 Blog 站点。
cd 自定义目录
hugo new site Blog
使用上述命令会在当前用户目录下面生成一个 Blog 站点,打开后看到如下图的站点目录结构
Blog
├── archetypes
├── config.yaml
├── content
├── data
├── layouts
├── static
└── themes
一共六个文件夹,外加一个全局配置文件 config.toml(类似 Hexo 的_config.yml),各个文件夹的作用如下:
- archetypes:给不同的类型定义默认 FrontMatter,相当于 Hexo 的 scaffolds 目录
- content:源文件,相当于 Hexo 的 source 目录
- data:数据文件,一般用不上
- layouts:模板(主题的核心部分)
- static:静态资源,也就是不需要 Hugo 处理的静态资源,比如css、js、图片等
- themes:第三方主题,将第三方主题拷贝到这个文件夹下即可使用
比较常用的就是 content 和 static ,一个存放文章内容文件,一个存放资源文件。Hugo 的 content目录 对应 Hexo 的 外 source 文件夹,static目录对应 Hexo 主题内 source 目录。因为文章和目录结构都没有改变,所有文章里面的图片链接路径都不需要修改。
然后在官网选择一个主题拷贝到 themes 目录。然后修改config.toml
中 theme 为主题的目录名称,运行 hugo --server
在浏览器里打开: http://localhost:1313 即可。 目前我所使用的这款主题是参考 WordPress 上一款著名主题 素锦 的 Hugo 移植版代码和 EASTER 的样式,差不多花了一天半时间完成了该主题的 Hugo 版开发。静态和 Hugo 不支持的功能如登录、搜索等能砍的全给砍了(评论功能在静态博客我倾向使用valine
,一开始我想还是不要评论,现已使用Hitalk
,文章后面介绍)。整体还有一些不太满意的地方,等后续完善吧!尽善尽美之后会考虑开源。
总体来说,只要不用自己写 css、js,移植的成本是很小的,就是新接触 Hugo ,语法不会,又没中文文档,只能对着官网英文文档硬啃了(其实有用谷歌翻译……),很多细节也是不明就里的。待主题开发白嫖完以后,我是将 themes 内的 layouts 和 static 文件夹移到 Hugo 的外目录,themes 文件夹直接空着不要了,配置文件中也不用指定主题名称和路径了。Hugo 首先会扫描根目录的 layouts 和 static 文件夹,如果没有再扫描 theme 文件夹里的 layouts 和 static 文件夹。这样做的考虑是我不会再用其他主题,修改一下本地测试一切正常后就可以部署上线了。
部署上线
同 Hexo 一样, Hugo 也是生成全静态文件。
hugo --gc --minify
使用上面的命令生成站点,然后直接将这些文件部署到服务器上或 Github Pages。目前我是放了两个位置,一个用脚本推送到 Coding,并由腾讯云新上线的云开发CloudBase中的静态网站托管自动拉取代码部署,目前不支持香港地区,故不能绑定自定义域名,另一个是将生成的 public 文件夹内所有东西丢到阿里云对象存储,开启静态页面,并绑定域名和上传SSL证书以支持HTTPS。
推送到 Coding 的脚本:
# <!-- coding deploy.sh -->
hugo --gc --cleanDestinationDir --minify
cd public/
git add .
git commit -m "modify"
git push
cd ..
在 public 父级目录即 Hugo 根目录下执行该文件,但是,直接./deploy.sh
的话,并不会切换到 public 目录下,需要按如下命令操作:. ./deploy.sh
或 source ./deploy.sh
。
注意:第一次 push 时需要指定远程仓库,请自行操作,可参考廖雪峰的Git教程,此脚本是为方便于第2次-第n次的部署。
这个脚本适用于 Git 远程仓库,GitHub、coding、gitee 都行,部署到阿里云OSS的详细步骤留待后续文章再说,暂时就这样吧……
站点历程简要
2020.06.21 更新:
本站已采用基于 Valine 的私人定制项目 Hitalk 作为评论系统,但是没有邮箱提醒。本觉得反正没人看,有没有评论无所谓,不过我花费几天时间定制的样式仅欣赏就很有味,如果不展示出来岂不是太亏了,而且除了不能提醒别的功能一应俱全,表情包采用酷安网那样的全品类表情包,集贴吧微博QQ之大成。2020.08.11 更新:
今晚在 LeanCloud 云引擎部署了 Valine-admin 以提醒服务,经测试发现只有站长能收到看客发来消息的提醒,而看客@站长或其他人的评论则无提醒,我估计是 hitalk 作者在改造 Valine 所做的某些改动导致此 bug,而 Valine-admin 是针对 Valine 制作,还是换回来吧,现在此立个ToDo
:换 hitalk 为 valine,样式和表情包啥的再慢慢改吧…2020.08.12 更新:
已换成 Valine,支持邮箱提醒,将 v1.4.0 源码撸到本地魔改成了现在这副模样,目前只剩表情包的问题了…2020.08.13 更新:
表情包已替换为之前用的自己组装的搭配,经测试 Valine 的功能与模样已与之前所改的 Hitalk 一般无二,而且还支持邮箱提醒服务,截止今日,评论功能算是圆满了!2021.12.23 更新:
LeanCloud网址换了,博客的Lean-count和评论系统也瘫痪了,在新网页上重新登录并激活应用,又发现原来的serverURLsus.avoscloud.com
不支持了,新版网站的UI大变,很多功能也不见了,比如为原生serverURLs自定义域名,最后将serverURLs赋值为 设置–>应用凭证–> REST API,一切又恢复如初了。2021.12.25 更新:
今日测试,Win10(chromium-edge浏览器,内核版本96)上,发现哆啦A梦那篇的视频不见了,后又发现不仅如此,是所有在MarkDown中直接插入HTML的内容都不显示,最后F12发现原HTML被 “<!--raw HTML omitted-->
” 所取代,而我在Mac(内核版本还在78的360浏览器)上却能正常显示原生HTML,原因我并未深究,在网上找到了解决方案,视频、音乐、自定义样式图片终于都回来了!2022.08.03 更新:
LeanCloud出了新公告,国际版也受限了,大陆用户无法再使用默认API域名,2022年8月1号起正式生效。解决办法,要么绑定自定义域名,要么迁至国内节点。于是于3号捣鼓了一下,以前就想弄自定义域名来着但不知为啥失败了,这次成功绑定。好在这次的受限还不算彻底,但是这一个一个事件都传递着一个信号,大陆用户享受着的国际服务都是暂时的,迟早都要被喂屎,对肉食者的失望又加重了一分……多的不说了,能润者润之,不能润者等润之吧!