10分钟使用hugo搭建自己的blog网站

hugo是什么

Hugo 是最受欢迎的开源静态网站生成器之一。用户可以使用 Hugo 来快速搭建自己的网站。

搭建步骤

1.安装hugo

在mac上面，可以使用以下命令来安装hugo:

brew install hugo

[外链图片转存中…(img-NFUEn3U8-1746455169785)]

安装完之后可以使用 hugo version 来查看是否安装好:

2.使用hugo创建blog网站

安装完 hugo 之后，就可以使用 hugo 来搭建自己的blog网站了。
使用hugo new site my-blog 来创建一个名为 my-blog 的网站。
[外链图片转存中…(img-7jYgTZqe-1746455169786)]
运行完之后就会在当前目录创建一个 my-blog 的目录。
之后进入该目录，并使用 git 进行初始化。

cd my-blog
git init

3.选择一个theme

在创建好网站之后，需要选择一个theme。这里有很多主题可供选择：hugo themes
在这里我选择的是 hugo-theme-even 这个主题。此时需要将其作为一个 submodule 放在themes/even下面。

git submodule add https://github.com/olOwOlo/hugo-theme-even.git themes/even

[外链图片转存中…(img-5GRDW2ph-1746455169786)]
之后将 themes/even/exampleSite/config.toml 拷贝到当前目录，并覆盖 hugo.toml

cp themes/even/exampleSite/config.toml hugo.toml

4.创建一篇blog

当配置好主题之后，就可以创建自己的blog了。
使用hugo new content content/post/my-first-post.md 即可创建一篇blog。
可以看到当执行完该命令后，在 content/post/ 下面会出现一个新的md文件。
[外链图片转存中…(img-ydEmmf0J-1746455169786)]

5.运行hugo

当前面的配置好之后，就可以使用 hugo server 来启动一个hugo server。
[外链图片转存中…(img-9KcKGYFH-1746455169786)]
点击链接，即可访问blog网站的地址
[外链图片转存中…(img-RSXhtGva-1746455169786)]
此时会发现，之前创建的那篇blog并没有在里面显示，原因是一开始创建的blog是draft,在hugo server 模式下并不会显示draft的blog。
如果需要显示，则需要使用hugo server -D。
[外链图片转存中…(img-foJGIprD-1746455169786)]

以上就可以完成了blog网站的搭建了。

参考链接

1. https://gohugo.io/getting-started/quick-start/
2. https://github.com/olOwOlo/hugo-theme-even
3. https://medium.com/@magstherdev/hugo-in-10-minutes-2dc4ac70ee11