Hugo是一款静态网站生成器,用Go语言编写,它具有快速,灵活,强大的特性。Hugo可以轻松地创建博客,静态网站,文档站点,以及任何其他网站。Hugo拥有一个强大的主题系统,可以轻松定制和美化网站,并且支持Markdown,HTML,CSS,JavaScript等多种格式。Hugo还支持多语言,可以轻松创建多语言网站。

安装hugo

Hugo中文文档

1
https://www.gohugo.org/

Hugo官方官网

1
https://gohugo.io

Hugo安装包下载地址:

1
https://github.com/gohugoio/hugo/releases

在下载Hugo安装包时,有Hugo和Hugo-extended两种可运行文件下载,其中Hugo仅支持JS,Hugo-extended是Hugo的扩展版本,在支持JS的基础上还支持TS,所以在下载时建议下载Hugo-extended版本的可执行文件。

Windows系统的安装与配置

Hugo安装包下载地址:Releases · gohugoio/hugo (github.com)下载好Hugo.exe文件后,将Hugo.exe文件放在想要存放的位置即可,比如我这里放在D:\Blog\Hugo文件夹下面,此时在该文件夹下面打开cmd命令提示符即可运行Hugo的相关命令,运行命令Hugo命令实际上就是在调用Hugo.exe文件。

Windows环境变量配置

​ 此电脑 – 属性 – 高级系统设置 – 高级 –环境变量 – Path

​ 在Windows的系统环境变量配置中,添加存放Hugo.exe文件的文件夹,确定之后即可在其他任意地方运行Hugo命令而不是仅在安装位置运行。

Windows下Hugo环境变量配置

安装检查

​ 在配置好环境变量后,在cmd或者shell(尽量不要在可执行文件存放的位置中)中运行Hugo命令检查是否安装成功,一般而言使用version查看是否安装成功。

在cmd和shell中执行:

1
hugo version

成功示例:

1
hugo v0.110.0-e32a493b7826d02763c3b79623952e625402b168+extended windows/amd64 BuildDate=2023-01-17T12:16:09Z VendorInfo=gohugoio

创建Hugo站点

使用Hugo创建一个新的站点非常简单。在终端或命令行工具中输入以下命令:

1
hugo new site blog-hugo

这会在当前目录下创建一个名为blog-hugo的新站点。你也可以自定义站点的名称和位置。

安装主题

两款漂亮的主题:

https://github.com/CaiJimmy/hugo-theme-stack

https://github.com/Mantyke/Hugo-stack-theme-mod

1
2
cd blog-hugo/themes
git clone https://github.com/CaiJimmy/hugo-theme-stack

这会将”Hugo-stack-theme-mod”主题下载到blog-hugo/themes目录中。

修改配置

blog-hugo根目录下config.toml重命名为config_backup.toml

image-20230225221158693

再把blog-hugo\themes\hugo-theme-stack\exampleSite的文件拷贝到blog-hugo根目录

image-20230225221914126

config.yaml是站点的配置文件,修改它即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
baseurl: https://example.com
languageCode: zh-cn
theme: stack
paginate: 5
title: 时光Blog

# Change it to your Disqus shortname before using
disqusShortname: stack

# GA Tracking ID
googleAnalytics:

# Theme i18n support
# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk
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

创建文章

使用Markdown语法编写文章,我习惯使用Typora软件,搭配图床非常好用。

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: 青龙面板安装搭建保姆级教程
date: 2023-02-25T18:29:44+08:00
draft: false
categories:
- Linux
- 教程
tags:
- 青龙面板
- docker
image: http://browser9.qhimg.com/bdr/__85/t0179b947962a684673.jpg
---
正文

在上面的代码中,title指定文章的标题,date指定文章的发布时间,draft设置为false表示文章已经发布。在---之后的部分就是文章的正文内容,使用Markdown语法编写。

青龙面板安装搭建保姆级教程.md文件放入blog-hugo/content/post目录

左侧菜单中文化

修改blog-hugo\content\page目录里文件,about对应关于,archives是归档,friends是友链,search是搜索

image-20230225223749605

再修改每个文件夹内的index.md文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
title: 关于
description: Hugo, the world's fastest framework for building websites
date: '2019-02-28'
aliases:
- about-us
- about-hugo
- contact
license: CC BY-NC-ND
lastmod: '2020-10-09'
menu:
main:
weight: -50
params:
icon: user

title: 后面改成对应的中文

image-20230225223952114

归档页修改

blog-hugo\content\categories目录内新建分类文件夹,文件夹内再新建_index.md文件

image-20230225224106629

修改_index.md文件

1
2
3
4
5
6
7
title: "教程"
description: "分享一些教程和折腾的经验"
slug: "教程"
image: "教程.png"
style:
background: "#2a9d8f"
color: "#fff"

背景图片放入同目录

image-20230225224438579

效果如下

image-20230225224522799

image-20230225224539387

预览站点

在cmd中输入以下命令:

1
hugo server -D

这会启动一个本地的Web服务器,你可以在浏览器中访问http://localhost:1313/预览你的站点。

image-20230225223455079

部署站点

当你满意站点的样式和内容后,你可以使用Hugo生成静态文件,并将它们部署到服务器上。在终端或命令行工具中输入以下命令:

1
hugo

这会在当前目录下生成静态文件,包括HTML、CSS、JS等。你可以将这些文件上传到你的Web服务器上。你可以使用FTP或SCP等工具将文件上传到服务器上,也可以将静态文件部署到GitHub Pages或Netlify等平台上。

如果你想将静态文件部署到GitHub上,可以按照以下步骤操作:

  1. 在GitHub上创建一个新的仓库,名称为blog-hugo

  2. 运行以下命令生成静态文件:

    1
    hugo
  3. 将生成的静态文件上传到GitHub仓库中,在终端或命令行工具中进入站点根目录,运行以下命令:

    1
    2
    3
    4
    5
    cd 
    git init
    git add -A
    git commit -m 'deploy'
    git push -f https://${ghp_xxx}@github.com/xiaowansm5/blog-hugo.git master:main

ghp_xxx填入你的github令牌,master:填入仓库分支

至此,你已经成功地使用Hugo创建了一个静态网站并将其部署到了GitHub上。

示例站点

我搭建的hugo博客:

https://wwang.eu.org