建站第九篇 Hugo+Github Pages+Github Action博客方案之一——使用Hugo搭建个人博客

原文传送门

花了一些时间用hugo重新搭建了猫狗窝,托管在github page上,又利用github action实现了CI/CD。非常省心!做到了专注写文,直接发布的效果。本篇记录就是写一点发布一点,陆续成文。

下面就把这一次趟坑的过程总结一下,本系列包括三部分:

  1. 搭建本地服务
  2. 发布到Github Pages
  3. 配置Github Action实现CI/CD

本篇为第一部分——搭建本地服务

为什么重建

19年的时候,用leanote做私有笔记服务,这样可以直接把笔记发成web页面,省去很多维护公共平台账号之类的杂事。但个人站点随之而来的维护工作,又让我陷入繁琐,违背了使用leanote是为了专注在写作上的初心。最终个人站还是荒废了。

今年决定重启blog,作为记录和写作的练习地。

为了避免又一次陷入泥潭,这次的笔记方案要满足以下几个需求:

  1. 支持md,并且要保证将来可以方便的迁移
  2. 可实现服务托管
  3. 源文件和站点文件都能够完全掌控
  4. 框架要有良好的社区支持

框架选择

基于希望专注写作的考虑,首先排除了wordpress,因为它太重了,提供的管理服务太灵活了,非常容易让人分心。我需要的博客引擎,一定要提供最简单的写作体验。

一番寻找之后,锁定了三个引擎:jekyll、hexo、hugo,这是目前码农最喜欢用的三个博客生成器。下面就对它们做个简单的对比。

对比维度 Jekyll Hexo Hugo
社区支持(2022年09月25日,github上star数目) 45.3k 35.4k 62.5k
开发语言 ruby nodejs go
编译速度(这里 提供了585篇文章的生成时长) 15.90s 两者之间 4.90s
其他方面 Jekyll 有github支持,可以将markdown文件直接放到git仓库,github会自动生成网页文件。(Github一直是一个亲ruby的社区) Hexo提供了方便的部署命令,可以做到一条命令部署到github上。 Hugo的官方文档写的非常好,部署简洁。前两者部署时需要安装很多依赖,而hugo可以直接提供二进制文件运行,甚至不需要root权限。

关于编译速度的差别,原因在于Hugo使用go语言开发,go是一种编译型语言,执行速度非常快。而Jekyll使用ruby,Hexo使用nodejs,这两种语言都是解释型语言,执行效率比go低很多。而nodejs又比ruby快一些。从上面的数据可以看到,Hugo比Jekyll快了近10倍,完全不是一个量级的比较。

最终,我选择了Hugo。虽然上手可能需要一点时间,但几乎所有维度的比较,都让Hugo成为我的第一选择。

本地搭建

下面就开始Hugo的探索之旅。

安装hugo

非常简单的安装。我使用的是 macOS,官方推荐用 homebrew 方式。

brew install hugo

完成后,可使用以下命令进行验证:

hugo version

创建站点

要创建一个新的web站点,可通过执行hugo new site 给博客起个名字命令来实现。

image.png

执行后会创建一个文件夹,与命令中的名字同名,包括以下内容:

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

其中

config.toml: hugo配置文件

content: md文件和html

static: 静态资源

themes: 主题

其他的可先不管。

选择主题

Hugo没有默认主题,所以需要自己安装主题。我使用的是hugo-theme-cleanwhite 。官网主题库:Hugo Themes

$ mkdir themes
$ git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite

启动 Hugo 服务器,在 http://localhost:1313/ 将会看到由主题生成的示例网站

$ hugo serve -t  hugo-theme-cleanwhite

或只需要

hugo server

即可。

配置hugo

配置文件在网站根目录下 config.toml , 根据自身需求进行修改。在 hugo-theme-cleanwhite 主题下的 exampleSite 文件夹中的文件可作为参考。默认的文章将存储在 ./content/post 中,每当写完文章,运行 hugo 命令,Hugo 将自动生成静态网站到 public 文件夹中,我们只需要将该文件夹的内容发布在网络上即可。

更多关于主题的配置可以参考 hugo-theme-cleanwhite README.md

更详细的配置规则,可参考Hugo官方文件

写作

现在可以创建一篇文章了。执行命令hugo new post/hello-world.md,会在content/post/下新增一个名为hello-world.md的文件。我们将头部自动生成的部分进行修改后,就可以在下面写自己的笔记或博文了。

---
title: "Hello World"
date: 2022-09-25T16:00:21+08:00
categories:
  - "Blog"
tags:
  - "Hugo"
draft: true
---

# Hello World.

Post example

本地部署

本地调试命令,执行它,就可以直接通过 http://localhost:1313 地址访问本地预览网页。

hugo server

本地发布命令,执行它,就能在public/目录下生成整套静态网站,可以直接复制到web服务器中。

hugo

至此,Hugo本地方案的搭建过程完成!

本作品由 IvyWooo 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可,转载请注明出处。
本文链接


参考文章

  1. 《静态博客框架jekyll、hexo和hugo三者之间的区别与差异》,https://zhuanlan.zhihu.com/p/368407566
  2. 《浅谈我为什么从 HEXO 迁移到 HUGO》,https://sspai.com/post/59904
  3. 《從 Jekyll 轉移到 Hugo 心得》,https://blog.yeshuanova.com/2018/07/from-jekyll-to-hugo/
  4. 《Hugo + GitHub Action,搭建你的博客自动发布系统》,https://www.pseudoyu.com/zh/2022/05/29/deploy_your_blog_using_hugo_and_github_action/
  5. 《使用 Hugo 搭建个人网站(博客、个人主页)并发布到 Github 上》,https://zhuanlan.zhihu.com/p/417259374
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容