Hugo | 初次搭建记录

Posted on Oct 12, 2022

前期准备

安装 Hugo

打开 Github 中的 Hugo 库，下载最新的版本，本次下载：hugo_extended_0.99.1_Windows-64bit.zip
因为一些主题需要进行 SCSS/SASS 构建，所以推荐下载 extended 版本，普通版本可能会报错：you need the extended version to build SCSS/SASS
配置环境变量
- 在控制面板 -> 系统 -> 高级系统设置 -> 高级中找到环境变量
- 在用户变量中找到 Path 变量，点击编辑，在弹出的窗口中选择新建，输入 Hugo.exe 文件的文件夹路径（不要包括 Hugo.exe 本身）
- 测试配置是否成功：在 E:\ 空白处右键，点击 Git Bash Here ，在命令行中输入 hugo version ，若返回 Hugo 版本号信息，说明配置成功

安装 Git

在 Git 下载、安装程序，按默认选项安装即可

设置

在开始菜单找到 Git Bash ，打开输入：

git config --global user.name "Your Name"
git config --global user.email "email@example.com"

配置 SSH

SSH 密钥用来链接本地和 Git 服务器，它成对生成，分别是” 公钥 “和” 私钥 “，我们将其中的” 公钥 “保存到 Git 仓库后，就可以在电脑上向这个 Git 仓库提交代码。

生成 SSH

在 Git Bash Here 里输入：

ssh-keygen -t rsa -C"注册 github 账号时使用的邮箱"

按照系统提示指定密钥位置、是否需要密码，懒得设置可以直接回车，显示如下结果说明 SSH 生成成功：

Your identification has veen saved in id_rsa
Your public key has been saved in id_rsa.pub

连接 SSH

在 C:/Users/用户名/.ssh/ 路径找到公钥 id_rsa.pub ，右键用记事本打开，复制全部内容到 Github 账号 -> Settings -> SSH and GPG keys ，新建一个 SSH 密钥，把公钥粘贴保存测试 SSH 连接是否完成，在 Git Bash Here 输入：

ssh -T git@github.com

如果返回：

Hi username!YOu've successfully authenticated,but GitHub does not provide shell access.

说明 SSH 连接成功

创建 Github 仓库

注意仓库名要和 GitHub 用户名一致，比如你是 xiaohong，那么你要输入 xiaohong.github.io ，最终仓库的完整名是 xiaohong/xiaohong.github.io

安装 VSCode

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器

在官方下载地址选择相应的版本下载，按照默认选项安装，安装汉化插件 Chinese (Simplified) Language Pack for Visual Studio Code

安装 Typora（可选）

Typora 是一款轻型 MarkDown 编辑器，其实 VSCode 安装 md 插件后也能胜任它的工作，但是我们就让专业的 Typora 做专业的事吧

在官网 releases 页面购买，或点击 Dev/Beta Released -> 下拉到底端 old macOS beta/old Windows/Linux beta 下载 beta 版

⚠️ 建议在偏好设置里，设置插入图片时复制到指定路径（./xx/），这样复制的图片就会自动保存在当前文件夹下的xx文件夹里，方便后续管理与转移。

开始建站

新建 Hugo 网站

新建一个文件夹用来存放 Hugo 网站的文件，例如：H:/HugoWebsite
在 HugoWebsite 文件夹内空白处点击右键，选择 Git Bush Here ，执行以下命令，新建一个 Hugo 网站

hugo new site blog # blog是网站文件夹名

选择 Hugo 主题

在 github.com 搜索 hugo theme ，或在 Hugo Themes 选择你喜欢的主题。此处以 cactus 举例

⚠️ 推荐将主题仓库 fork 到自己的账号，使用 git submodule 方式进行仓库连接，这样方便后续对主题的修改进行单独维护（否则

cd blog
git init
git submodule add https://github.com/monkeyWzr/hugo-theme-cactus themes/hugo-theme-cactus

⚠️ git clone 命令也可以，就是修改可能会和原主题冲突，不方便版本管理和后续更新，在文件夹 blog 空白处右键点击 Git Bush Here

# 进入 themes 目录，如果没有这个文件夹用 mkdir -p themes 自行创建
cd themes

# 下载主题到 cactus 文件夹下
git clone git@github.com:monkeyWzr/hugo-theme-cactus.git

配置主题

备份 blog 文件夹里的 config.toml 文件，用 blog/themes/hugo-theme-cactus/exampleSite/ 下的 config.toml 覆盖 blog 文件夹下的 config.toml ，然后打开 config.toml 修改配置

必要的修改

# 修改 URL 为你的 GitHub 仓库名称
baseURL = "https://username.github.io"

# 这里必须和 themes 文件夹里的主题文件夹名称一致，所以把主题文件名从 hugo-theme-cactus 修改为 cactus
theme = "cactus"

本地预览

新建文章

在网站文件根目录：E:\HugoWebsite\blog 下执行：

hugo new post/first_article.md

到 blog/content/post 里打开并编辑文章内容，保存

启动 Hugo server

hugo server -D

打开网址 http://localhost:1313/ 进行预览，在 config.toml 里调整页面效果

部署到 GitHub

进入 E:\HugoWebsite\blog\public 目录，初始化 Git 库

# 进入 public 文件夹
cd public
# 初始化
git init
# 将 git 本地库关联至远程库
git remote add origin git@github.com:username/username.github.io.git
# 提交修改
git commit -m "firstarticle"
# 查看当前修改状态
git status
# 添加所有修改过的文件
git add .
# 提交到本地库，"add first-post"是本次提交内容的说明信息
git commit -m"add first-post"
# 提交到远程库
git push origin main

✨ 曾经 github 的默认分支是 master，时间比较久的教程「提交到远程库」这一步都是git push origin master ，这里要注意

日常使用博客要知道的

Front Matter

什么是 Front Matter

是指 .md 文件最上面的这一部分内容

title: tags

date: 2019-08-13 09:39:50

type: tags

layout: tag

Front Matter 内容

参数	描述
title	标题，默认与文件名一致
date	默认为文件创建日期
slug	指定文章网址
update	文件更新日期
lastmod	文章最后更新日期
description	文章描述，会被抓去做SEO放在HTML的header中
categories	分类（不适用于分页）
tags	标签（不适用于分页）
hidden	是否隐藏文章，值为 true 时输入正确网址就可以查看
draft	是否为草稿，值为 true 时 Hugo 不编译这个文件
layout	指定文章使用的模板，不指定的话会使用根目录/_config.toml 中的默认配置 default_layout:post
comments	开启文章评论功能，默认为 true
permalink	覆盖文章网址
coverImage	设置文章封面图片
metaAlignment	设置文章title的位置
coverMeta	文章title放在封面图片中央还是外面
coverSize	封面图片大小

如果需要添加 Hugo 创建的 .md 文件自带的 Front Matter 模板没有的参数，可以编辑 archetypes 文件夹下的 default.md 文件

更多请参考Hugo｜Front Matter

如何新建或修改博文

# 在根目录：E:/HugoWebsite/blog 下新建文章或编辑文章
hugo new post/title.md
# 本地预览，http://localhost:1313/
hugo server -D
# 构建 Hugo 网站
hugo
# 切换到目录：E:/HugoWebsite/blog/public
cd public
# 提交修改到本地库
git add .
git commit -m"commit info"
# 把内容拉下来以rebase方式合并
git pull --rebase
# 将修改推到远程库
git push -u origin main

如何删除文章

# 在目录 E:/HugoWebsite/blog/content/post 和 E:/HugoWebsite/blog/public 找到对应文章删除
# 其中public下文件不删除不会影响显示，只是文件就会一直存在，除.git删错了也不要紧，hugo命令会重建
# 本地预览，http://localhost:1313/
hugo server -D
# 构建 Hugo 网站
hugo

# 切换到目录：E:/HugoWebsite/blog/public
# 提交修改到本地库
git add .
git commit -m"commit info"
# 把内容拉下来以rebase方式合并
git pull --rebase
# 将修改推到远程库
git push -u origin main

装修没有止境

评论系统用 cactus，原装！可爱！

（202210:换了主题所以不再补充了）