除了可以使用 hexo 来搭建个人博客之外,我们还可以使用 hugo 博客框架来搭建自己的个人博客。hugo 和 hexo 相比搭建过程更加的简单快捷,需要的依赖较少,搭建过程不容易出错,对于新手来说更加的友好一些。所以如果你还没能成功搭建起 hexo 博客的话,那么不妨试试 hugo+github pages 搭建。

简介

hugo 是一个基于 GO 语言开发的博客框架,相比于 hexo 来说 hugo 的生成静态资源网页的速度更快。支持 Markdown 语法,也有较多的主题可以选择,搭建个人博客不失为一个好的选择。

准备工作

其实 hugo 的搭建不需要借助过多的工具,仅仅需要你的电脑上有一个 Git 环境(工具),一个 GitHub 账号。嫌弃麻烦的话可以直接下载使用 cmder 或者是 Git Bash,如果你也是使用的 Windows Terminal 的话,那么可以参考我之前的 Windows Terminal 配置中关于将 Git Bash 集成到 Windows Terminal 上的博客。下面的操作我将在 Windows Terminal 上进行。前面说到的其他工具也可以,命令没有什么差别。

下载 hugo

第一次搭建我建议下载二进制文件,而不是其他命令行方式下载,这样做是为了减少出错的概率。先去 GitHub 下载 hugo,根据自己的系统下载对应的二进制文件即可。这里需要注意的是,hugo 和 hugo_extended 是有些区别的,部分主题会指定使用 hugo_extended。

image

image

所以你在使用主题的时候,或者说你在下载版本的时候要考虑清楚。在电脑上新建一个文件夹,之后在里面再新建一个 bin 文件夹,然后将下载的二进制文件解压过去,保证 bin 下载只有 hugo 的二进制文件,没有再往下的目录,即 D:\hugo\bin\hugo.exe 这样的方式。然后在系统环境变量中找到 path 将二进制文件的路径添加进去。在终端输入 hugo version,如果显示版本号则表示环境变量配置正确,否则就要进行检查。

开始搭建

我们进入 hugo 的文件夹中执行 hugo new site blog 建立站点文件夹(blog 只是一个例子,你可以随意取什么名字),进入 blog 文件夹中我们会发现里面内容如下:

archetypes: 配置文章元数据

content: 博客文章所在目录

data: 用来存放数据文件,一般是 json 文件

layouts: 网站布局

static: 一些静态的内容,例如图片等

themes: 博客主题

config.yml: 站点配置文件,支持 yml.toml 和 json 三种格式的

下载配置主题

这时候我们先去选择一个自己喜欢的主题然后将其克隆下来,我以 PaperMod 为例。

我们找到主题仓库,然后在 blog 下执行

Code
 

git clone https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

这个时候我们就会看到 themes 下面多了一个叫做 PaperMod 的文件夹,里面存放的就是主题资源。

这里需要注意的是:不同的主题之前的配置方式是不同的,甚至会对 hugo 的版本有限制,所以配置主题的时候一定要仔细查阅主题文档。有些主题下面有一个 exampleSite 文件夹,那么你主要找到下面的 config 文件,然后复制到 blog 下面,将原本的 config 文件替换掉。之后你再对 config 文件进行自己的配置。

还有一种主题,例如我这里使用的 PaperMod 下面就没有 exampleSite,所以就需要自己在官方文档中找到示例的配置然后复制到 blog 下的 config 中。特别要说明的是必须要在 theme 中指明主题名称,否则 hugo 会找不到该主题模块。

如果没能克隆到主题,那么你需要先执行一次 git init

部署到 GitHub Pages

在 GitHub 上新建一个仓库,命名方式为你的GitHub用户名+github.io, 勾选第一个添加 README 文件,点击创建。

我们完成上述的配置之后,我们接下来在 blog 下执行 hugo, 这个时候我们会看到 blog 中多了一个 public 文件夹。我们先在 blog 下执行 hugo new post/first.md 生成一个 Markdown 文件,vi 进去之后我们先输入 hello world 然后保存退出。我们接着输入 hugo -t 主题名生成静态资源文件,输入 hugo server -D 先在本地预览一下效果,没有问题之后我们进入 public 文件夹,依次执行以下命令:

markdown
 

git init(初始化git)
git add . (添加静态文件到缓存区)
git branch -M master (新建一个master分支)
git commit -m 'initial commit'(提交说明随便写)
git remote add origin [email protected]:username/username.github.io.git
(这是ssh提交方法, 需要生成Token搭配GitHub Actions自动发布)。
git remote add origin https://github.com/ilemonEllen/ilemonEllen.github.io.git
(这是采用https方法提交,通过本地的public连接远程仓库提交).二者任选其一就可以。
git push -u origin master (提交到master上)

然后我们去仓库中点击 setting-----pages----GitHub Pages 下将发布分支改为 master. 等待一会儿,不出意外的话很快就能看到你的博客了。

image

image

注意问题

1. 如果你的博客已经成功提交但是没有显示内容

只需要将文章元数据的 draft 的 true 改为 false,然后提交就可以了。

2.git 提交上去的是 blog 下的文件夹,但是 GitHub Pages 显示 404

提交博客都是在 public 文件夹中提交的,在提交之前要也特别注意要先执行 hugo -t 主题名操作,生成静态资源文件。在 public 中提交时,要执行 git init,不然会出现无法提交或者是只提交上去一个 public 文件夹。

3.remote origin already exists 怎么解决

这是因为你之前于该分支的关联没有解除,所以你需要执行 git remote rm origin,然后再与远程仓库分支建立连接。

4. 出现 LF will be replaced by CRLF 警告

出现这个现象的原因是在 Windows 中使用 CRLF 标识一行的结束,而在 Linux/UNIX 系统中只使用 LF 标识一行的结束,其实这对于博客部署来说没有什么影响。如果要去掉的话我们只需要执行以下命令:

markdown
 

查看core.autocrlf属性
git config --global --get core.autocrlf
git config --get core.autocrlf
true
设置core.autocrlf属性
git config core.autocrlf false
git config --get core.autocrlf
false

到此 hugo+github pages 的搭建就结束了。至于使用自动脚本 + GitHub Actions 自动发布网上的教程有很多,我就不在这里赘述了。

常用的命令

markdown
 

hugo -t + 主题名 本地生成静态资源
hugo server -D 本地预览
hugo new post/xxx.md  新建博客文章
git add .
git commit -m "提交说明"
git push
git remote -v 查看分支连接
git branch -a 查看远程分支
git push origin --delete <branchName> 删除远程分支