使用hugo生成静态博客

前言

hugo 是一个用 Go 语言编写的静态网页生成器，用来做博客很合适，开搞！

下载程序

git.exe// 安装

hugo.exe// 无需安装，放到一个合适的地方即可

配置环境变量

打开此电脑 - 右键 属性 - 高级系统设置 - 高级 环境变量 - 系统变量 - 选中 path - 编辑 - 新建环境比变量 -"填入 hugo 所在的文件夹路径" - 确定即可

记得 CMD 执行 hugo -version 检查一下有没有配置好

建立博客

进入 hugoblog 文件夹，右键点击 Open Git Bash here

把下面代码逐个粘贴到黑窗口执行

Copy
hugo new site hugoblog //创建名为hugoblog项目 hugo new site hugoworks
cd hugoblog //进入hugoblog
hugo new about.md //创建一个 about 页面，可以进入随便写点东西先，不写也行

下载主题

1. 下载喜欢的主题（官网有）放在 bugoblog/themes 文件夹下，我这里下 papermod, 主题项目都在 github, 找到项目克隆下来

Copy
git clone https://github.com/nanxiaobei/hugo-paper.git

2. 把 exampleSite 整个拷贝到 hugoblog 目录，config.toml 更名为 hugo.toml。提示有同名文件覆盖即可

查看博客

hugoblog 文件夹，右键点击 Open Git Bash here

Copy
hugo server --theme=blist --buildDrafts #调试替换主题名

然后黑窗口中会给你一个地址，打开选中右键 open，或者浏览器里打开： http://localhost:1313/，不出意外的话就会看到和官网主题 demo 页一样的页面。

出了意外跳转查看
可能遇到的问题

配置主题

下面把页面的一些东西改成自己想要的模样

notepad 或者记事本打开 hugo.toml
带 ### 的是必须要修改的，可以参照我的改一下，其它可改可不改
页面是实时显示的，这边修改完，那边浏览器就能看到效果

Copy
baseURL = "https://junxinjay.github.io" #页面地址
# title = "君心的博客"
author = "君心jay"
copyright = "Copyright © 2008–2024, Steve Francia and the lee.so; all rights reserved."
paginate = 5 #页面数量
languageCode = "zh"
DefaultContentLanguage = "zh"
enableInlineShortcodes = true
# prevent build failures when using Hugo's Instagram shortcode due to deprecated Instagram API.
# See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
ignoreErrors = ["error-remote-getjson"]

# ------------------------------
theme = "paper"
title = "君心Jay"

[params]
# color style
color = 'gray' # linen, wheat, gray, light
logo = "/apple-touch-icon.png"

twitter = 'Jay80820750'
qq = 'q/ki1zhngt6E'
rss = true # show rss icon

# ------------------------------

# needed to render raw HTML (e.g. , , , )
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
[menu]

[[menu.main]]
identifier = "blog"
name = "文章"
url = "/blog/"
weight = 1

[[menu.main]]
identifier = "about"
name = "关于"
url = "/about/"
weight = 2

[[menu.main]]
identifier = "contact"
name = "友链"
url = "/contact/"
weight = 3

[[menu.main]]
identifier = "serach"
name = "搜索"
url = "/serach/"
weight = 4

[taxonomies]
category = "categories"
tag = "tags"
series = "series"

[privacy]

[privacy.vimeo]
disabled = false
simple = true

[privacy.twitter]
disabled = false
enableDNT = true
simple = true

[privacy.instagram]
disabled = false
simple = true

[privacy.youtube]
disabled = false
simple = true

[privacy.qq]
disabled = false
simple = true

[privacy.WeChat]
disabled = false
simple = true

[privacy.bilibili]
disabled = false
simple = true

[services]

[services.instagram]
disableInlineCSS = true

[services.twitter]
disableInlineCSS = true

修改主题（这一步可跳过）

主题下 static 文件夹是主题要用的图片，可根据需要进行修改
主题下 layouts 文件夹是整个主题框架页面，小白就别动了，否者页面报错

写博客

博客是用 markdown 编辑器写，当然你用 txt 也是可以的，前提你要熟悉 mark 语法，这边推荐 Typora 写文章，也可以选其它的编辑器。

写好后都放到 content 文件夹下的 post 目录，文章引用图片放在 static 目录

生成静页面文件

每次写完博客，都要要重新生成静态页面，在 hugoblog 目录下执行

Copy
hugo -F --cleanDestinationDir

执行完后生成的文件会在 public 文件夹下

部署到 github

⚠️不建议部署到 gitee。因为原因审核太慢，还有部署完了页面没多久就不能用了，还不能外链，审核比较严格

・部署到 github

⚠️没有 github 先去注册个账号

1. 打开 github, 创建项目，点击 New repository，Repository name 填你的用户名（这步很重要），其它的都不用填，点击 Create repository，把仓库地址记下来，下面要用

2. 进入 public 目录，右键点击 Open Git Bash here

逐行执行

Copy
cd public

git init #第一次用这句, 下次更新博客就不用了
#git remote add origin https://github.com/junxinjay/hugo.git #这里换成你的仓库地址，第一次用这句, 下次更新博客就不用了
#git remote #第一次用这句, 下次更新博客就不用了

git add . //添加所有文件到暂存区
git status //查看状态
git commit -m 'MyFristCommit' //把文件提交到仓库 -m 后面的是备注信息
#git push -u origin master # 第一次用这句，下次更新博客用 git push 这个即可

这里我用 GitHub Desktop 进行推送

下载 GitHub Desktop 软件 地址在这https://desktop.github.com ，安装完进行登录，登陆完会出现 Let's get start!, 我们选择 add an Existing Repository from you local drive... 进行选择 public 文件夹，点击 Fetch origin 进行推送

3. 这时就可以打开https://github.com/junxinjay/blog.io 地址就出现页面了，因为懂得都懂的原因，导致国内访问 git 地址很慢，所以我们还要用到 netlify 进行一键托管

4. 打开 github 项目的设置，选择 page, 在 brach 一栏选择 master 进行保存

4. 打开 netlify，登录使用 github 进行登录即可

可能会遇到的问题

・可能会遇到

Copy
Error: error building site: POSTCSS: failed to transform "/css/styles.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/: binary with name "npx" not found

需要安装 node.js，去官网下载并安装
安装一下即可，如果再不行就执行

Copy
npm install
npm i -g postcss-cli

・可能会遇到 status 失败

Copy
On branch main
Your branch is ahead of 'origin/main' by 1 commit.
(use "git push" to publish your local commits)

nothing to commit, working tree clean

执行

Copy
git push origin master

或者

Copy
git reset
git clean -f
git checkout -- .

・可能会遇到 push 失败

Copy
$ git push
fatal: unable to access 'https://github.com/junxinjay/hugoblog.github.io.git/':
Failed to connect to github.com port 443 after 2081 ms: Couldn't connect to ser
ver

进入网址获取 ip

https://sites.ipaddress.com/www.github.com/

把 ip 和 github.com 一起写入 hosts

如

Copy
140.82.112.4 github.com

再次 push 即可

・可能会遇到

Copy
$ git status
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
(use "git push" to publish your local commits)

nothing to commit, working tree clean

执行

Copy
git fetch

再 git push

・可能会遇到

Copy
fatal: detected dubious ownership in repository at 'D:/Software/12code/hugo/myblog/public'
'D:/Software/12code/hugo/myblog/public' is owned by:
'S-1-5-32-544'
but the current user is:
'S-1-5-21-3826342517-2274634027-510025631-1001'
To add an exception for this directory, call:

git config --global --add safe.directory D:/Software/12code/hugo/hugoblog/public

执行

Copy
git config --global --add safe.directory "*";

・可能会遇到

Copy
Author identity unknown

*** Please tell me who you are.

Run

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

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'Jay@DESKTOP.(none)')

// 分别执行

Copy
git config --global user.email "你的邮箱"

git config --global user.name "你的名字"

字符串绑定无效

Copy
git config --system --unset credential.helper

・可能会遇到

Copy
fatal: unable to access 'https://gitclone.com/github.com/XXXXXXX': The requested URL returned error: 502

把目录 C:\Users\ 用户名.gitconfig 文件中这两行前面加一个#

Copy
[url "https://gitclone.com/"]
[url "https://github.com/"]

・可能会遇到

Copy
remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/junxinjay/hugoblog.github.io.git/'

大概意思：你原先的密码凭证从 2021 年 8 月 13 日开始就不能用了，必须使用个人访问令牌（personal access token），就是把你的密码替换成 token！

打开 github-Settings-Developer Settings

・可能会遇到

Copy
fatal: unable to access 'https://github.com/test/test.git/': schannel: failed to receive handshake, SSL/TLS connection failed

修改 D:[应用数据目录]\Documents\GitHub\test.git

Copy
[core]
repositoryformatversion = 0
filemode = false
bare = false
logallrefupdates = true
symlinks = false
ignorecase = true
[submodule]
active = .
[remote "origin"]
url = https://github.com/test/test.git
fetch = +refs/heads/*:refs/remotes/origin/*
[branch "main"]
remote = origin
merge = refs/heads/main
# 添加入下面这段保存就可以了
[http]
sslbackend = openssl

・可能会遇到

Copy
Failed to find a valid digest in the 'integrity' attribute for resource - The resource has been blocked - Host on Github

git 中的 config 配置文件中添加

Copy
params:
assets:
disableFingerprinting: true

・可能会遇到

Copy
Failed to connect to github.com port 443 after 21480 ms: Couldn't connect to server

开梯子再推送