搭建GithubPage博客(Hugo)

背景信息

使用Hugo初始化静态页面，Diary主题模板，这款主题带有Gitalk功能模块，统一在cofig.toml内配置参数即可，下面是快速跳转入口，如有需要，请点击进行快速跳转
背景信息
 环境介绍
 博客搭建
 细节
 代码
 结语

环境介绍

操作系统：Windows10
Git: 2.28.0 x64
静态博客生成工具：Hugo-0.74.3
主题：Diary-1.2.0

博客搭建

注册

首先，既然是利用GithubPage，所以需要一个Github账户，如果没有，请先注册一个，点击下方传送门可以直接跳转，已经注册过就可以跳过这步了。
需要注意的是，第一次打开页面，这就是注册，按要求输入信息即可，Username不可重复，后续是URL中的标识，重名了就改一个吧！:)
Github.com
下载

账号准备就绪了后，就需要下载Git客户端以及Hugo了，附上传送门。
注意 : 选择自己的版本和对应x86/x64版本(x86是32位/bit，x64是64位/bit)，不要下载其他操作系统的文件！
Git

Git(win)

Hugo(版本很多，windows的在下方)
安装配置
- Git
  全部都下载好后，进行安装与配置，这里转载一下其他博主的文章，大家看看，只需要配置Git能够使用即可。转载：Git下载、安装与环境配置
- Hugo
  - 将下载的文件解压，得到hugo.exe文件，然后如上一篇博文一样，将文件放到自己想要的位置后，添加环境变量path为文件所在目录即可(如D://software)。
    验证Hugo是否安装成功：[hugo version]
  - 接下来新建一个文件夹，用来装静态网页，使用[hugo new site 自定义站点名称]，需要在文件夹内使用CMD命令，可以在文件夹地址栏输入[cmd]打开CMD再使用新建命令。
  - 新建完成后，应该会产生如下图所示结构
```
├─archetypes
├─content
├─data
├─layouts
├─static
├─themes
└─config.toml
```
    这个时候就需要挑选一款自己喜欢的主题了，传送门： Hugo主题
    挑选主题多注意主题作者的文档，里面记录了如何配置主题参数。
  - 将主题下载到本地后，移动到站点下的themes文件夹，并将里面的config.toml移动出来覆盖外面的配置文件，接下来，在站点文件夹下使用CMD命令hugo server开启本地测试，调试参数，直到满意，访问地址为http://localhost:1313(注意主题文档，有一部分需要配置config.toml文件才能正常使用)
  - 如果测试无误，进入下一个环节。
部署准备

进入Github主页，新建一个仓库，仓库名为：[你的用户名].github.io(以下简称Page仓库)，使用自动初始化，然后打开你的本地Git仓库，使用命令将Page仓库 [clone]下来。
如需配置Gitalk请看：进入用户设置，左边最后一栏Developer settings - oAuth Apps,右侧点击New oAuth

记录下[Client ID]和[Client Secret]

回到你的静态网页站点，将config.toml中的[baseURL]地址改为[https://Page仓库名]，按照文档进行额外修改，最后使用[hugo]命令生成根目录下public文件夹，准备完成。
部署

将本地的Page仓库内的文件复制到public文件夹内，在内部使用Git命令将文件夹上传，顺序如下 :
- [git add -A]
- [git commit -m "上传说明"]
- [git push - u origin master]
也许会要求输入账号密码，按照要求输入即可(密码看不见，保护隐私)。
上传完成后，访问[baseURL]地址，你的博客准备好了，以后每次都使用[hugo]修改public文件夹,再上传即可。

细节

Gitalk
这次我还配置了Gitalk,遇到的问题详见搭建博客中遇到的问题(Gitalk)。值得一提的就是根据不同的主题，如果想要开启评论，需要在config.toml中设置组件启用，在文章的元数据内开启评论。

代码

config.toml

baseURL = "https://xxx.github.io"
DefaultContentLanguage = "zh" # Theme's display language, supports: en, fr, zh, zh-hant
languageCode = "en-us"
title = "xxx's Blog"
copyright = "xxx"
theme = "diary"

[markup]
[markup.highlight]
   codeFences = true
   guessSyntax = false
   hl_Lines = ""
   lineNoStart = 1
   lineNos = false
   lineNumbersInTable = true
   noClasses = true
   style = "monokai"
   tabWidth = 4

[params]
subtitle = "a subtitle"
enableGitalk = true # 开启Gitalk
favicon = "/images/icon.ico" # 显示在浏览器标签栏上的小图标，由于格式特殊，文件过小，所以就没有使用图床

# Twitter Card and Open Graph settings
enableOpenGraph = true
enableTwitterCards = true
title = "My Blog" # will set 'og:site_name'
description = "My HomePage Description"  # will set 'og:description'

[params.gitalk]
owner = "你的GitName"
repo = "你的仓库名称" # 如Gitalk
client_id = "" # 填入记录的Client ID
client_secret = "" # 填入记录的Client Secret
[taxonomies]
   tag = "tags"
   category = "categories"

[[menu.main]]
url = "/categories" # 侧边栏映射
name = "categories" # 侧边栏名称(我的繁体字是输入就是繁体不是上面的DefaultContentLanguage)
weight = 2 # 优先级，越小越靠上
[[menu.main]]
url = "/tags"
name = "tags"
weight = 3
[[menu.main]]
url = "/posts"
name = "posts"
weight = 1
[[menu.main]]
url = "/index.xml"
name = "RSS Feed"
weight = 4

.md

title: "文章大标题"
date: 2020-08-11T14:15:30+08:00
description: "副标题"
#标签，会自动出现在Tags菜单内，但不会自动删除，需要使用Hugo重新生成public时才会去除
tags: [配置, github,blog]  
featured_image: "图片地址"
#分类
categories: 配置
#开启评论
comment : ture

结语

感谢阅读我的博客，希望能给你带来帮助。:) @jASSSSSSON

最后修改于 2020-08-11

背景信息

环境介绍

博客搭建

注册

下载

安装配置

部署准备

部署

细节

Gitalk

代码

结语

`Gitalk`