Hugo+GitHub Pages
（1）工具准备
git，下载地址：https://git-scm.com/
go，下载地址：https://go.dev/ （可选）
Hugo文件下载：https://github.com/gohugoio/hugo/releases
（2）通过Chocolatey安装Hugo（与下二选一）
1：右键管理员powershell.exe命令行启动，输入以下命令：
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))或者，右键管理员cmd.exe命令行启动，输入以下命令：
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"2：输入choco显示版本
choco3：安装hugo（需要翻墙）
choco install hugo -confirm4：安装“Sass/SCSS”扩展（需要翻墙，可选）
choco install hugo-extended -confirm（3）Hugo环境变量配置（与上二选一）
1：在E盘建立hugo文件夹，把hugo_extended解压后hugo.exe文件放目录下
2：环境变量设置
3：在任意目录右键选择“Git Bash Here”，输入以下命令，验证配置结果
hugo version（4）在C盘目录新建blog站点
1：在C盘右键选择“Git Bash Here”
2：新建blog站点
hugo new site blog -f yml3：切换到blog目录
cd blog4：测试网站，并根据提示的地址进行访问
hugo server（5）下载主题
1：克隆主题到指定的位置
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1（6）设置主题
1：新建config.yml文件，复制案例代码
baseURL: "https://examplesite.com/"
title: ExampleSite
paginate: 5
theme: PaperMod
enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false
googleAnalytics: UA-123-45
minify:
disableXML: true
minifyOutput: true
params:
env: production # to enable google analytics, opengraph, twitter-cards and schema.
title: ExampleSite
description: "ExampleSite description"
keywords: [Blog, Portfolio, PaperMod]
author: Me
# author: ["Me", "You"] # multiple authors
images: ["<link or path of image for opengraph, twitter-cards>"]
DateFormat: "January 2, 2006"
defaultTheme: auto # dark, light
disableThemeToggle: false
ShowReadingTime: true
ShowShareButtons: true
ShowPostNavLinks: true
ShowBreadCrumbs: true
ShowCodeCopyButtons: false
ShowWordCount: true
ShowRssButtonInSectionTermList: true
UseHugoToc: true
disableSpecial1stPost: false
disableScrollToTop: false
comments: false
hidemeta: false
hideSummary: false
showtoc: false
tocopen: false
assets:
# disableHLJS: true # to disable highlight.js
# disableFingerprinting: true
favicon: "<link / abs url>"
favicon16x16: "<link / abs url>"
favicon32x32: "<link / abs url>"
apple_touch_icon: "<link / abs url>"
safari_pinned_tab: "<link / abs url>"
label:
text: "Home"
icon: /apple-touch-icon.png
iconHeight: 35
# profile-mode
profileMode:
enabled: false # needs to be explicitly set
title: ExampleSite
subtitle: "This is subtitle"
imageUrl: "<img location>"
imageWidth: 120
imageHeight: 120
imageTitle: my image
buttons:
- name: Posts
url: posts
- name: Tags
url: tags
# home-info mode
homeInfoParams:
Title: "Hi there \U0001F44B"
Content: Welcome to my blog
socialIcons:
- name: twitter
url: "https://twitter.com/"
- name: stackoverflow
url: "https://stackoverflow.com"
- name: github
url: "https://github.com/"
analytics:
google:
SiteVerificationTag: "XYZabc"
bing:
SiteVerificationTag: "XYZabc"
yandex:
SiteVerificationTag: "XYZabc"
cover:
hidden: true # hide everywhere but not in structured data
hiddenInList: true # hide on list pages and home
hiddenInSingle: true # hide on single page
editPost:
URL: "https://github.com/<path_to_repo>/content"
Text: "Suggest Changes" # edit text
appendFilePath: true # to append file path to Edit link
# for search
# https://fusejs.io/api/options.html
fuseOpts:
isCaseSensitive: false
shouldSort: true
location: 0
distance: 1000
threshold: 0.4
minMatchCharLength: 0
keys: ["title", "permalink", "summary", "content"]
menu:
main:
- identifier: categories
name: categories
url: /categories/
weight: 10
- identifier: tags
name: tags
url: /tags/
weight: 20
- identifier: example
name: example.org
url: https://example.org
weight: 30
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
# pygmentsUseClasses: true
# markup:
# highlight:
# # anchorLineNos: true
# codeFences: true
# guessSyntax: true
# lineNos: true
# style: monokai2：config.yml将baseURL改为：
baseURL: "https://peiyafei.github.io/"3：在 config.yml 中配置主题：
theme: "PaperMod"4：测试网站
hugo server5：新建文章
hugo new post/first.md页面案例代码：
---
title: "My 1st post"
date: 2020-09-15T11:30:03+00:00
# weight: 1
# aliases: ["/first"]
tags: ["first"]
author: "Me"
# author: ["Me", "You"] # multiple authors
showToc: true
TocOpen: false
draft: false
hidemeta: false
comments: false
description: "Desc Text."
canonicalURL: "https://canonical.url/to/page"
disableHLJS: true # to disable highlightjs
disableShare: false
disableHLJS: false
hideSummary: false
searchHidden: true
ShowReadingTime: true
ShowBreadCrumbs: true
ShowPostNavLinks: true
ShowWordCount: true
ShowRssButtonInSectionTermList: true
UseHugoToc: true
cover:
image: "<image path/url>" # image path/url
alt: "<alt text>" # alt text
caption: "<text>" # display caption under cover
relative: false # when using page bundles set this to true
hidden: true # only hide on current single page
editPost:
URL: "https://github.com/<path_to_repo>/content"
Text: "Suggest Changes" # edit text
appendFilePath: true # to append file path to Edit link
---6：文件路径为：C:\blog\content\post\first.md，编辑文件内容
draft: true 改为 draft: false7：config.yml文件中输入中文
首先需要用VS Code软件开发，在右下角设置为UTF-8
然后将鼠标悬浮在中文字上，选择“调整设置”
再点击“在突出显示内容中排除...”即可
8：设置logo
通过网页制作一个图片，名称为：apple-touch-icon.png，放置到static目录下
9：修改页脚
修改blog\themes\PaperMod\layouts\partials\footer.html文件
<a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
<a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a>10：插入图片
第一种：绝对路径（首选）
(图片资源放置在根目录下的static下，也就是网站的绝对路径) 图片存放位置
引入图片的markdown代码
分析：图片请求路径
第二种：相对路径
图片存放位置
引入图片的markdown代码
分析：图片请求路径，这个demo，要和博客文件名相同(我这里此篇博博客的文件名叫demo)，所以需要新建demo文件夹。
（7）上传文件至GitHub
1：配置GitHub SSH密钥，设置git的user name和email，例如：
git config --global user.name "Luke.Deng"
git config --global user.email "xiangshuo1992@gmail.com"2：检查是否存在SSH Key
cd ~/.ssh
ls
或者
ll
//看是否存在 id_rsa 和 id_rsa.pub文件，如果存在，说明已经有SSH Key如果没有SSH Key，则需要先生成一下，例如：
ssh-keygen -t rsa -C "xiangshuo1992@gmail.com"3：在C:\Users\Administrator\.ssh文件夹下用编辑器打开id_rsa.pub，复制其中的密钥
4：在GitHub后台-->Settings-->SSH and GPG kyes里添加密钥
5：验证
ssh -T git@github.com
//运行结果出现类似如下
Hi xiangshuo1992! You've successfully authenticated, but GitHub does not provide shell access.6：在GitHub新建仓库peiyafei.github.io
7:上传文件至peiyafei.github.io仓库
cd public //切换到public文件夹
git init
git add .
git commit -m "说明文字"
git remote add origin git@github.com:peiyafei/peiyafei.github.io.git
git push -u origin master8：修改文件之后，第二次上传或以后上传
cd public
git pull --rebase origin master
cd ..
进行博客内容编辑修改
hugo --buildDrafts 或者 hugo -D
cd public
git add .
git commit -m "xxxx"
git push -u origin master9：批处理提交git（可新建计划任务，每日定时提交）
新建一个Auto_push_git.bat文件，填入以下内容，因为其中使用了绝对路径，bat文件可放到任意位置运行，默认放到blog站点目录运行
@echo off
@title bat 交互执行git提交命令
rem 下面这个命令使用绝对路径
cd c:\blog\public
git pull --rebase origin master
cd ..
rem 进行博客内容编辑修改
hugo -D
cd public
git add .
git commit -m "update"
git push -u origin master10：如果遇到无法上传，错误提示如：“It seems that there is already a rebase-apply directory”
，执行如下命令，然后再运行以上脚本内容
rm -rf .git/rebase-apply
git rebase -i origin/master（8）设置自定义域名
1：GitHub Pages页面Custom domain处输入域名
2：在域名商管理后台添加两条CNAME记录
主机记录：www , 记录值：xxx.github.io （仓库名）
主机记录：@ ， 记录值：xxx.github.io （仓库名）
3：用自定义域名访问测试
（9）部署到Netlify
1：点击Netlify官网用GitHub账号一键登录
2：部署过程简单，不再赘述
3：添加CNAME解析
记录类型：CNAME，主机记录：www，记录值：Netlify站点默认生成的访问地址（XXX.netlify.app）
记录类型：CNAME，主机记录：@，记录值：Netlify站点默认生成的访问地址（XXX.netlify.app）
（10）搜索引擎优化（SEO）
参考资料：
1.Quick Start ：快速的了解如何使用 Hugo
2. Host on Github：了解如何部署 Hugo 作为一个 Github Pages
3.作为拓展阅读材料，我觉得有兴趣可以了解下这些软件是怎么运作的
Netlify：做的一些 Vue 或者 React 想上线部署之后可以让别人预览，可以通过 Netlify 这个平台实现
Nanobox：本地开发工具，可以消除环境的复杂性，在部署和生产环境之间，进行自动化环境，通过虚拟化使得开发环境更简洁
AWS Amplify：亚马逊出品的移动应用开发程序管理工具
Firebase：Google 出品的 BAAS
4.了解 GitHub Pages
5.创建一个 Github Pages site
最后更新于
这有帮助吗？