使用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

 

posted @ 2024-07-22 13:31  jopny  阅读(17)  评论(0编辑  收藏  举报