Hugo食用指南
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命令而不是仅在安装位置运行。
安装检查
在配置好环境变量后,在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 | cd blog-hugo/themes |
这会将”Hugo-stack-theme-mod”主题下载到blog-hugo/themes
目录中。
修改配置
blog-hugo
根目录下config.toml
重命名为config_backup.toml
再把blog-hugo\themes\hugo-theme-stack\exampleSite
的文件拷贝到blog-hugo
根目录
config.yaml
是站点的配置文件,修改它即可
1 | baseurl: https://example.com |
创建文章
使用Markdown语法编写文章,我习惯使用Typora软件,搭配图床非常好用。
1 | --- |
在上面的代码中,title
指定文章的标题,date
指定文章的发布时间,draft
设置为false
表示文章已经发布。在---
之后的部分就是文章的正文内容,使用Markdown语法编写。
青龙面板安装搭建保姆级教程.md
文件放入blog-hugo/content/post
目录
左侧菜单中文化
修改blog-hugo\content\page
目录里文件,about对应关于,archives是归档,friends是友链,search是搜索
再修改每个文件夹内的index.md文件
1 | title: 关于 |
把title:
后面改成对应的中文
归档页修改
blog-hugo\content\categories
目录内新建分类文件夹,文件夹内再新建_index.md
文件
修改_index.md
文件
1 | title: "教程" |
背景图片放入同目录
效果如下
预览站点
在cmd中输入以下命令:
1 | hugo server -D |
这会启动一个本地的Web服务器,你可以在浏览器中访问http://localhost:1313/
预览你的站点。
部署站点
当你满意站点的样式和内容后,你可以使用Hugo生成静态文件,并将它们部署到服务器上。在终端或命令行工具中输入以下命令:
1 | hugo |
这会在当前目录下生成静态文件,包括HTML、CSS、JS等。你可以将这些文件上传到你的Web服务器上。你可以使用FTP或SCP等工具将文件上传到服务器上,也可以将静态文件部署到GitHub Pages或Netlify等平台上。
如果你想将静态文件部署到GitHub上,可以按照以下步骤操作:
在GitHub上创建一个新的仓库,名称为
blog-hugo
运行以下命令生成静态文件:
1
hugo
将生成的静态文件上传到GitHub仓库中,在终端或命令行工具中进入站点根目录,运行以下命令:
1
2
3
4
5cd
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博客: