# Hugo+GitHub Pages
### （1）工具准备
git，下载地址：
go，下载地址： （可选）
Hugo文件下载：
### （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显示版本
```
choco
```
3：安装hugo（需要翻墙）
```
choco install hugo -confirm
```
4：安装“Sass/SCSS”扩展（需要翻墙，可选）
```
choco install hugo-extended -confirm
```
{% hint style="info" %}
参考资料：
{% endhint %}
### （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 yml
```
3：切换到blog目录
```
cd blog
```
4：测试网站，并根据提示的地址进行访问
```
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: [""]
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: ""
favicon16x16: ""
favicon32x32: ""
apple_touch_icon: ""
safari_pinned_tab: ""
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: "![]()
"
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//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: monokai
```
2：config.yml将baseURL改为：
```
baseURL: "https://peiyafei.github.io/"
```
{% hint style="info" %}
参考：
{% endhint %}
3：在 config.yml 中配置主题：
```
theme: "PaperMod"
```
4：测试网站
```
hugo server
```
5：新建文章
```
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
alt: "" # alt text
caption: "" # 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//content"
Text: "Suggest Changes" # edit text
appendFilePath: true # to append file path to Edit link
---
```
{% hint style="info" %}
参考：
{% endhint %}
6：文件路径为：C:\blog\content\post\first.md，编辑文件内容
```
draft: true 改为 draft: false
```
{% hint style="info" %}
baseURL的地址为在github仓库中访问的地址：
https\://\.github.io
{% endhint %}
7：config.yml文件中输入中文
首先需要用VS Code软件开发，在右下角设置为UTF-8
然后将鼠标悬浮在中文字上，选择“调整设置”
再点击“在突出显示内容中排除...”即可
8：设置logo
{% hint style="info" %}
参考网址：
{% endhint %}
通过网页制作一个图片，名称为：apple-touch-icon.png，放置到static目录下
9：修改页脚
修改blog\themes\PaperMod\layouts\partials\footer.html文件
```
Hugo &
PaperMod
```
10：插入图片
第一种：绝对路径（首选）
(图片资源放置在根目录下的static下，也就是网站的绝对路径) 图片存放位置
引入图片的markdown代码
```
```
分析：图片请求路径
第二种：相对路径
图片存放位置
引入图片的markdown代码
```
```
分析：图片请求路径，这个demo，要和博客文件名相同(我这里此篇博博客的文件名叫demo)，所以需要新建demo文件夹。
{% hint style="info" %}
参考资料：
{% endhint %}
### （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 master
```
8：修改文件之后，第二次上传或以后上传
```
cd public
git pull --rebase origin master
cd ..
进行博客内容编辑修改
hugo --buildDrafts 或者 hugo -D
cd public
git add .
git commit -m "xxxx"
git push -u origin master
```
{% hint style="info" %}
git pull origin master与git pull --rebase origin master的区别主要是在远程与本地代码的合并上面了。
rebase好处 想要更好的提交树，使用rebase操作会更好一点。 这样可以线性的看到每一次提交，并且没有增加提交节点。
{% endhint %}
9：批处理提交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 master
```
10：如果遇到无法上传，错误提示如：“It seems that there is already a rebase-apply directory”
，执行如下命令，然后再运行以上脚本内容
```
rm -rf .git/rebase-apply
git rebase -i origin/master
```
{% hint style="info" %}
参考资料：
{% endhint %}
### （8）设置自定义域名
1：GitHub Pages页面Custom domain处输入域名
2：在域名商管理后台添加两条CNAME记录
* 主机记录：www , 记录值：xxx.github.io （仓库名）
* 主机记录：@ ， 记录值：xxx.github.io （仓库名）
3：用自定义域名访问测试
### （9）部署到Netlify
1：点击[Netlify官网](https://app.netlify.com/)用GitHub账号一键登录
2：部署过程简单，不再赘述
3：添加CNAME解析
* 记录类型：CNAME，主机记录：www，记录值：Netlify站点默认生成的访问地址（XXX.netlify.app）
* 记录类型：CNAME，主机记录：@，记录值：Netlify站点默认生成的访问地址（XXX.netlify.app）
{% hint style="info" %}
主机记录www表示，以www\.qtdevelop.com方式访问，
主机记录为@表示：以qtdevelop.com方式访问
{% endhint %}
### （10）搜索引擎优化（SEO）
### 参考资料：
#### 1.Quick Start ：快速的了解如何使用 Hugo
{% embed url="" %}
#### 2. Host on Github：了解如何部署 Hugo 作为一个 Github Pages
{% embed url="" %}
#### 3.作为拓展阅读材料，我觉得有兴趣可以了解下这些软件是怎么运作的
* Netlify：做的一些 Vue 或者 React 想上线部署之后可以让别人预览，可以通过 Netlify 这个平台实现
* Nanobox：本地开发工具，可以消除环境的复杂性，在部署和生产环境之间，进行自动化环境，通过虚拟化使得开发环境更简洁
* AWS Amplify：亚马逊出品的移动应用开发程序管理工具
* Firebase：Google 出品的 BAAS
#### 4.了解 GitHub Pages
{% embed url="" %}
#### 5.创建一个 Github Pages site
{% embed url="" %}