简介
Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。这是官方的介绍。实际安装的时候还是踩了很多坑,现在记录下来,以备后用。
安装
GitHub主页:GitHub - gohugoio/hugo,到releases页面下载最新版本。
Windows
-
下载页面:hugo_extended_0.111.3_windows-amd64.zip
一定要下载
extended版本的,否则有些主题没法编译 -
将
hugo.exe文件复制到C:\Windows里 -
打开
cmd或者power shell,输入命令hugo version,显示版本信息
MacOs
官方推荐使用 Homebrew 安装:
brew install hugo
Linux
和windows一样,也要下载extended版本
# 下载
wget -c https://github.com/gohugoio/hugo/releases/download/v0.111.3/hugo_extended_0.111.3_linux-arm64.deb
# 安装本地文件
sudo dpkg -i hugo_extended_0.111.3_linux-amd64.deb
# 查看版本
hugo version
使用hugo创建博客
以下操作都是在windows系统操作,别的系统都差不多,可以到官网查看。
打开cmd或者power shell
创建站点
使用hugo new site创建新站点
PS C:\Users\Admin> d:
PS D:\> hugo new site blog
创建的文件内容如下
# blog文件的结构
│─archetypes
│ default.md # 新建md文件模板
├─assets
├─content # 博客文章所在目录
├─data
├─layouts # 网站布局
├─public # 编译后的文件
├─static # 静态文件
├─themes # 博客主题
└─config.toml # 配置文件
设置主题
HUGO必须要设置一个主题才能运行
选一个好看的主题用git下载,我们选择Tranquilpeak这个主题
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git themes/hugo-tranquilpeak-theme
复制hugo-tranquilpeak\exampleSite文件夹里的所有文件,粘贴到blog文件夹里。
启动网站
输入命令
hugo server
在浏览器输入http://localhost:1313/打开,即可看到博客主页面。
创建文章
你只需要按照Markdown 的格式编写自己的文章,然后将写好的文章放在blog/content/posts,hugo 就会读取到这片文章,并将这片文章展示在你的博客中。
与普通Markdown 文章不一样的地方是,你需要在文章的开头写入如下结构的内容,这些内容包含在三杠线之间,在三杠线下边就是Markdown 的正文了:
---
title: "文章标题" # 文章标题
author: "作者" # 文章作者
description : "描述信息" # 文章描述信息
date: 2015-09-28 # 文章编写日期
lastmod: 2015-04-06 # 文章修改日期
tags: # 文章所属标签
- "文章标签1"
- "文章标签2"
categories: # 文章所属分类
- "文章分类1"
- "文章分类2"
keywords: # 文章关键词
- "Hugo"
- "static"
- "generator"
# 下面是模版自带的参数
autoThumbnailImage: false # 自动缩略图
thumbnailImagePosition: "top" # 在首页显示图片位置 top、right、left
# 在首页显示的图片 如果图片在static/img/showcase.png
# thumbnailImage: "/img/showcase.png",默认先从blog/static文件夹里寻找
thumbnailImage: //d1u9biwaxjngwg.cloudfront.net/welcome-to-tranquilpeak/city-750.jpg
# 文章页面显示的图片
coverImage: //d1u9biwaxjngwg.cloudfront.net/welcome-to-tranquilpeak/city.jpg
# 文章页面标题显示位置:top、right、left
metaAlignment: center
---
Markdown正文
比如我们编写了这样一篇文章,文件名为hello-hugo.md
---
title: "Hello HUGO"
author: "Jack"
description : "我的第一篇bolg~"
date: 2023-03-19
lastmod: 2023-03-20
tags:
- "博客标签1"
- "博客标签2"
categories:
- "博客分类"
keywords:
- "博客关键字"
thumbnailImagePosition: "left"
thumbnailImage: "/img/showcase.png"
---
欢迎来到我的blog~
这里在主页显示
<\!--more-->
注:实际应用时要删除!前面的\
# H1
> 引用
**加粗**
我们将文件保存在blog/content/posts ,打开地址http://localhost:1313/,可以看到现在的博客中,新增了一篇文章:
配置文件
博客的配置文件为config.toml可以根据自己的需要修改,我们来看下主题的配置文件,这些配置属性通过英文并不难理解。
# 网站地址
baseURL = "https://example.org/"
# 网站语言
languageCode = "en-us"
# 如果模版里有i18n文件夹,则会显示对应语言
defaultContentLanguage = "zh-cn"
# 网站title
title = "My Blog"
# 主题的名字,这个要跟myblog/themes 目录中的子目录的目录名一致
theme = "hugo-tranquilpeak-theme"
# 谷歌分析工具,如果公网访问可以打开
# googleAnalytics = "UA-123-45"
# 分页,每页显示文章数
paginate = 10
[permalinks]
# 文章链接会按http://localhost:1313/2023/03/hello-hugo/显示
posts = "/:year/:month/"
[taxonomies]
tag = "tags"
category = "categories"
archive = "archives"
[markup]
# Set startLevel = 1 to support # title (<h1>title</h1>) otherwise table of content is blank/empty
[markup.tableOfContents]
endLevel = 3
ordered = false
startLevel = 1
# 主页的左侧页面设置和关于页面显示的内容
[author]
name = "Firstname Lastname"
bio = "Super bio with markdown support **COOL**"
job = "Your job title"
location = "China"
# 图片,也可以调用static文件夹里的图片picture = "/img/head.jpg"
picture = "https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png"
#侧边栏菜单
[[menu.main]]
weight = 1
identifier = "home"
name = "Home"
pre = "<i class=\"sidebar-button-icon fas fa-lg fa-home\" aria-hidden=\"true\"></i>"
url = "/"
[[menu.main]]
weight = 2
identifier = "categories"
name = "Categories"
pre = "<i class=\"sidebar-button-icon fas fa-lg fa-bookmark\" aria-hidden=\"true\"></i>"
url = "/categories"
[[menu.main]]
weight = 3
identifier = "tags"
name = "Tags"
pre = "<i class=\"sidebar-button-icon fas fa-lg fa-tags\" aria-hidden=\"true\"></i>"
url = "/tags"
[[menu.main]]
weight = 4
identifier = "archives"
name = "Archives"
pre = "<i class=\"sidebar-button-icon fas fa-lg fa-archive\" aria-hidden=\"true\"></i>"
url = "/archives"
[[menu.main]]
weight = 5
identifier = "about"
name = "About"
pre = "<i class=\"sidebar-button-icon fas fa-lg fa-question\" aria-hidden=\"true\"></i>"
url = "/#about"
[[menu.links]]
weight = 1
identifier = "github"
name = "GitHub"
pre = "<i class=\"sidebar-button-icon fab fa-lg fa-github\" aria-hidden=\"true\"></i>"
url = "https://github.com/"
[[menu.misc]]
weight = 1
identifier = "rss"
name = "RSS"
pre = "<i class=\"sidebar-button-icon fas fa-lg fa-rss\" aria-hidden=\"true\"></i>"
url = "/index.xml"
# 个人定制
[params]
# head标签里<meta name="description" content="myblog">
# 显示在文章页的顶部
description = "myblog"
# 代码高亮
syntaxHighlighter = "highlight.js"
# 日期格式化,默认2 January 2006
# 日期必须填2006-01-02,否则显示错误
dateFormat = "2006-01-02"
# 在所有页面隐藏侧边栏 true:隐藏,false:不隐藏
clearReading = true
# 侧边栏大小,无需修改
sidebarBehavior = 1
# 侧边栏背景图片
coverImage = "images/cover.jpg"
# 在有图片的文章底部显示图片库,无需修改
imageGallery = true
# 在首页显示文章的缩略图片
thumbnailImage = true
# favicon
# favicon = "/favicon.png"
# 加载自定义js
# [[params.customJS]]
# src = "js/myscript.js"
# 加载自定义css
# [[params.customJS]]
# src = "css/custom.css"
#底部分享按钮
# [[params.sharingOptions]]
# name = "Twitter"
# icon = "fab fa-twitter"
# url = "https://twitter.com/intent/tweet?text=%s"
# 页面右上角小图标设置
[params.header.rightLink]
class = ""
icon = ""
url = "/#about"
# 自定义页脚
# [params.footer]
# copyright = "<a href=\"https://github.com/kakawait\">kakawait</a>"