使用hugo生成静态个人博客,速度快,无需安装
1. 简介
hugo为使用go语言开发的博客生成程序,支持多种模板,主题,本地运行,将markdown转换为一个网站,适合做文档网站,博客等。
hugo在github上有超过70W星。
2. 下载
https://gohugo.io/
3. 安装运行
解压后,仅有一个20M左右的exe文件,在Powershell中执行即可。
./hugo.exe new site quickstart #quickstart为你的站点名
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke #你可能需要配置git代理,请参考https://www.cnblogs.com/jopny/p/18298798/Git-Set-Proxy-Server
echo "theme = 'ananke'" >> hugo.toml # 指定当前Theme
hugo server #生成,并开启一个Web服务,默认Url:http://localhost:1313/
增加Theme ananke
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
增加Theme ananke
git submodule add https://github.com/FarseaSH/hugo-theme-moments.git themes/moments
4. 页面配置
4.1 content文件下为带生成的markdown内容。
以下是一个.md文件的头
--- # 前面不要有空行,否则不能高亮显示。这里不要使用+++,否则预览时会front matter不会被隐藏,亦不会高亮显示front matter内容
title: 'Git代理设置'
description: '1.设置临时代理,取消临时代理。2. 设置永久代理。3. SSL设置'
categories: ['Development', 'Tools']
slug: 'git-proxy-config-ssh'
tags: ['git', 'ssh', 'proxy', 'setting']
date: 2024-07-12T23:02:44+08:00 # 未来日期不会被生成
draft: false
isCJKLanguage: true #有此项设置的SummaryLength才有用
summary: '1.设置临时代理,取消临时代理。2. 设置永久代理。3. SSL设置' # 这里是自定义的文章列表中显示的摘要
featured_image: 'Pickup-roller.png' # 不要加./这种相对路径,否则生成路径在首页和详情页不同,导致无法显示。
---
4.2 首页显示的列表,默认是最新的三个,包括content文件下的所有内容
4.3 路径处理
例如:
content/
└── posts/
└── avif-maker/ <-- 页面束
├── post-x.md <-- 改为index.md
└── avif-maker.jpg <-- 页面资源
生成后的Url: https://xx.com/posts/avif-maker/psot-x/
页面中插入图片:
![制作avif动画/动图](avif-maker.webp "制作avif动画/动图") # 这里尽量不要使用./这种相对路径,如果使用,显示没有问题,就是其路径是完整的加了http://example.com:1313/这种完整路径。
此时的图片链接错误,不能显示出来。如果路径改成../avif-maker.webp,最然生成页面能显示出来了,但markdown编写时的预览页面显示不出来。
如果将post-x.md改为index.md,
content/
└── posts/
└── avif-maker/ <-- 页面束
├── index.md <-- 改为index.md
└── avif-maker.jpg <-- 页面资源
则生成的Url为:
https://xx.com/posts/avif-maker/
此时使用图片路径./avif-maker,则预览和生成结果均能正常显示。
5. hugo.toml配置例子
baseURL = 'https://www.yourdomain.xyz/'
languageCode = 'zh-cn'
title = 'XXXX小站'
theme = 'ananke'
[params]
subtitle = 'The Best Widgets on Earth'
[params.contact]
email = 'info@example.org'
phone = '+1 202-555-1212'
[menus]
[[menus.main]]
name = '博客'
pageRef = '/posts'
weight = 9
[[menus.main]]
name = '科技'
pageRef = '/tech'
weight = 10
[[menus.main]]
name = 'About'
pageRef = '/about'
weight = 20
[[menus.main]]
name = 'Contact'
pageRef = '/contact'
weight = 30
[mediaTypes]
[mediaTypes.'image/avif']
suffixes = ['avif']
summaryLength = 20
hasCJKLanguage = true