Hugo：世界上最快的构建网站的框架

Hugo介绍

Hugo配置

Step 1：安装Hugo

1

 ~  brew install hugo

由于我电脑之前装过，此次采用 reinstall: 安装完成后，可以通过 hugo version 命令查看是否安装成功：

1
2


 ~  hugo version
hugo v0.105.0+extended darwin/amd64 BuildDate=unknown

Step 2：创建一个新的站点

此处，我们最好指定一个目录创建站点，我这里在 Desktop 下新建 my-hugo-blog 文件夹：

1

 ~/Desktop/my-hugo-blog  hugo new site blog

进入到 blog 目录：

1
2


 ~/Desktop/my-hugo-blog  cd blog
 ~/Desktop/my-hugo-blog/blog   

Step 3：添加主题

从 Hugo Themes 中选一个个人喜欢的主题（CaiJimmy/hugo-theme-stack），并 clone 到 themes 目录里：

hugo-theme-stack 的 GitHub：

1

git clone https://github.com/CaiJimmy/hugo-theme-stack themes/hugo-theme-stack

Step4、将主题示例下的 `config.yaml` 拷贝到站点目录 `blog` 下，并设置`config.yaml`

配置站点信息：

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


languageCode: zh-cn
theme: hugo-theme-stack
paginate: 10
title: AbnerPei

# 网站语言（中文）
languages:
    zh-cn:
        languageName: 中文
        title: AbnerPei
        weight: 1
        
DefaultContentLanguage: zh-cn

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: true

配置网站底部从哪一年开始：

1
2


    footer:
        since: 2023

配置网站左边的个人信息：

1
2
3
4
5
6
7


    sidebar:
        emoji: 👨🏻‍💻
        subtitle: 一日为码农，终身撸不停!
        avatar:
            enabled: true
            local: true
            src: img/avatar.png

Step5、快速开始

拷贝主题示例中的 content 目录下的所有内容到 blog 下的 content 目录里：执行 hugo server 开启本地服务：

1

 ~/Desktop/my-hugo-blog/blog  hugo server

执行命令后发现 Error ，找到 index.md，修改成如下：

再执行命令 hugo server : 打开浏览器，输入 http://localhost:1313/ 即可看到网站：

注：按 control + c 停止本地服务。

Step6、写博客

在上面 hugo server 开启本地服务时，有一些警告：上面的警告信息，很明显，对应的 page 没找到，那就开始配置吧：我这里有 工具 、 我的开源库 、 API 、 Flutter 、iOS ，5个分类，此处以 工具 为例说明：

下面到了关键地方，博客内容：需要一个 index.md ，并把博客写在这里

配置博客相关信息，放在 +++ 中间（语法等同于 yaml ）同理，可配置其他博客。

Step7、发布博客

在发布前，需要先执行 hugo 命令生成对应的静态网站数据：

1

 ~  hugo

此时 blog -> public 里会多出很多文件：这里采用免费的 GitHub Pages 方式发布： cd public ，依次执行如下命令s：

1
2
3
4
5


git init
git add .
git commit -m "first commit"
git remote add origin git@tiao.github.com:pitiaotiao/pitiaotiao.github.io.git
git push -u origin main

至此，网站就制作成功了，快试一下吧： pitiaotiao.github.io