hello, hugo and github pages

2023-03-12 约 1295 字预计阅读 3 分钟次阅读

简介

Hugo 是用go语言实现的一个网站生成框架, 速度非常快, 本站就是使用 Hugo 生成. 使用 Hugo + Github Pages 可以快速且免费的搭建你的个人blog服务, 而且hugo有非常多的模版可以选择.

安装 Golang (mac m1)

终端执行以下命令会安装 golang:

1
2


# 安装 go
$ brew install go

安装 Hugo (mac m1)

终端执行以下命令会安装 hugo 的 extend 版本:

1
2


# 安装 hugo
$ brew install hugo

安装完成查看版本, (我安装的版本是 v0.111.2+extended darwin/arm64):

1
2


# 查看 hugo 版本
$ hugo version

新建一个 Hugo 网站项目

可以通过几种方式新建一个 hugo 项目. 我使用的是 b 方法.

a 通过 new 命令新建 hugo 项目

这是比较标准的建立 hugo 项目的方式.

使用 hugo new 命令可以新建一个 hugo 项目, 根据不同情况你可以分别执行以下命令:

1
2
3
4
5
6


# 如果是完全全新项目(甚至都还没有git repo)
$ hugo new site path/to/hugo/site

# 如果目录已经存在, 或者目录内已经有文件(比如是一个git repo)
# 此方法可能会覆盖已有文件, 请小心确认使用
$ hugo new site --force path/to/hugo/site

建立项目后的目录结构大致如下:

archetypes :
assets : 存放一些静态资源文件, 比如图片, css, 脚本等
config.toml : 重要的配置文件
content : 重要的内容目录
data :
layouts :
public : build出来的静态站点输出目录, 需要 push 到 github pages仓库里去
resources :
static :
themes : 主题目录, 安装的主题都会在这里

b 使用 starter 方式新建 hugo 项目

有些主题的作者写了 starter 来方便大家新建自己的site, 以我为例, 我使用了 hugo-theme-stack 这个主题, 作者就提供了 starter 项目

使用这种方式也挺简单, 首先来到这个 starter 项目的 repo, 然后根据官方提示操作即可, 你可以使用 github 的 codespace 也可以自己离线下载下来本地开发, 我的情况是 codespace 在我网络情况下加载特别慢, 所以我选择下载到本地, 具体操作如下:

访问 starter 项目 starter
点击 Use this template , 选择 Create a new repository :

填写表单 :

创建 repo 后, clone 到你本地(我的repo是digevil/hugo-theme-stack-starter-digevil.git):
1

$ git clone git@github.com:digevil/hugo-theme-stack-starter-digevil.git

进入 starter 目录并安装 theme (以git子模块形式):

1

$ git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

启动 hugo 本地服务并进行编辑

1

$ hugo server --minify --theme hugo-theme-stack

查看 localhost:1313 确认效果

发布到 github pages

先在你自己空间建立一个固定名字的repo: ${name_space}.github.io, 我的空间名字 digevil, 那么就是 digevil.github.io, 这种情况下, 我网站最终的域名是: https://digevil.github.io/, 这个域名等会儿要用到

使用hugo-theme-stack皮肤 build 你的网站, 在site目录执行命令:

1
2


# https://digevil.github.io/ 就是刚才产生的域名, 请替换成你自己的 github page repo 域名
$ hugo --theme hugo-theme-stack --baseUrl="https://digevil.github.io/"

如果没有报错, 那么在你 site/public 目录下会生成最终的站点文件

进入public目录, 将最终站点文件上传到 ${name_space}.github.io 这个 repo (我的是 digevil.github.io):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


# git 初始化
$ git init

# 添加 digevil.github.io.git 为git库的remote, 记得不要用http的要用ssh的远程地址
$ git remote add origin git@github.com:digevil/digevil.github.io.git

# 提交所有public下的文件
$ git add .
$ git commit -m 'first commit'

# 和远程同步
$ git pull --rebase origin main

# 如果远程库和本地库不同步, 那么需要手动合并代码, 当把所有代码冲突合并后, 执行 rebase -continue 进行合并
$ git rebase --continue

# push 到远程库
$ git push origin main

多刷新几次 https://digevil.github.io/ 生效需要几秒到几十秒时间查看最新变化

保存你自己的 site

进入 site 目录正常 commit 和 push 就行, public 目录已经在 site 的 .gitignore 里了所以两个repo互相不影响

小结

虽说 hugo 这个框架本身并不和 git 绑定, 只是一个产生静态内容网站的框架, 但是和 git 结合的时候还是需要一些 git 基础知识, 包括发布到 github 的话也是一样, 不过一旦项目正常正确发布过一次之后, 后续一切就都会比较顺利