Skip to main content

Lost Temple

Tag: Hugo

如何利用GithubAction发布Hugo博客

作为一个老网民,我还是很喜欢折腾博客的。从07年开始就玩各种博客,比如07年搜狐博客,那时候博客热很火,不亚于微博兴起的时候,于是我每天去刷我的搜狐博客访问量,是不是还专门去网吧写文章。 后来还开了新浪博客,一直在新浪博客混混文字,大概一直在新浪博客写了4年。

再后来又买了独立主机,自己开WordPress写博客,无奈后来被人把主机给黑了。但是那时候很快啦,天天找WordPress好看的主题,去别的的WP 搜索好用的插件。各种互加友链。

当然后来还玩了很多其他的博客,比如Google的BlogSpot,Tumbler,对就是那个Tumbler。 还有网易的LOFTER,新浪的绿洲。腾讯的QQ空间,微信公众号。

工作以后,有了Github page,看着大家都用Travis去自动化部署,于是也用HEXO搭建了一个。不过18年后一直没维护了,中途有次冲动想维护起来,发现怎么都跑不起来,于是就懒得动了。

最近大家都用Github Action自动化部署Blog。于是又折腾起来了。整个过程花了几个小时,担心以后忘记又记不起来,在这里简单做个记录。整个流程如下

1、本地安装Hugo
2、用Hugo写好Markdown文章 (hugo new posts/new_post.md) 3、然后将Markdown生成为静态文件
4、将生成的静态站点内容推送到Github发布

一、安装Hugo

mac: brew install hugo

其他系统安装方式见:https://gohugo.io/getting-started/installing/

二、生成静态站点

1、初始化站点

Hugo命令可以自动生成站点需要的文件,后续我们所有的操作命令将会在Hugo生成的目录下执行。

hugo new site hugo-blog

2、进入到hugo-blog目录,cd hugo-blog

3、安装主题
我是通过 git submodule 安装的,确保自己在hugo-blog目录下,执行命令:

git init
git submodule add https://github.com/xianmin/hugo-theme-jane.git themes/jane

4、启用主题

第三步完成后,需要在配置文件中启用主题,配置文件在hugo-blog根目录下。

echo 'theme = "jane"' >> config.toml

5、创建第一篇你的博文

hugo new posts/my-first-post.md

在下方接着写入文章内容即可。注意此时该文件为草稿状态,写作完成后需要改成 draft: false 才能部署。

6、启动 Hugo 预览服务器

Hugo 可以启动一个 Web 服务器,同时构建站点内容到内存中并在检测到文件更改后重新渲染,方便我们在开发环境实时预览对站点所做的更改。命令如下:

hugo server -D

添加 -D 选项以输出草稿状态的文章,执行成功后可以通过 http://localhost:1313/ 访问站点。