目录
前言
前几天查资料的时候，意外注意到了别人的博客地址是github.io结尾的，出于好奇就查了一下，原来是利用github的免费Pages服务来托管静态网站。因此本篇文章还是采用学习笔记的方式来记录，不断更新。如有错误疏漏之处还望指出，共同学习进步。
简介
Github提供静态网站托管服务，也就是Github Pages服务；而Hugo是一个静态网站生成器，可从一系列源文件生成静态网站。
资料
GitHub Pages英文文档 https://docs.github.com/en/pages
GitHub Pages中文文档 https://docs.github.com/zh/pages
Hugo英文文档 https://gohugo.io
Hugo中文文档 https://www.gohugo.org
准备工作
关于Git
首先得安装git，官网 https://git-scm.com/
具体的安装和使用方法百度一下有很多资料，这里不占用篇幅了，个人推荐看这个Git教程：https://www.liaoxuefeng.com/wiki/896043488029600
还有就是可以安装tortoisegit，官网 https://tortoisegit.org/
安装tortoisegit就不用敲git命令了，右键一下很方便，而且还有中文语言包，对小白很友好。
github的正确打开方式
虽然可能有些太基础，但是还是提一下子，毕竟标题是从零开始搭建个人博客嘛。
注册账号就不提了，按照官网的注册账号流程走就行。
有些了解的同学应该知道github访问时灵时不灵的，具体什么原因就不乱讲了，总之方法有两种：
1.科学上网（需要梯子）
2.修改hosts
第一种就是弄个梯子就ok，这里只说第二种怎么操作。
首先打开cmd（win+r输入cmd），输入命令ping github.com，可以看到下面返回了IP[20.205.243.166]，注意具体的IP以当前返回的为准。
注意：如果ping不通，则去 https://github.com.ipaddress.com/获取IP。
然后进入电脑的C:\Windows\System32\drivers\etc路径，找到hosts文件。
如果打不开文件需要管理员权限，就右键-属性-安全，点编辑再选完全控制就行。
最后使用记事本或者各类文本编辑软件打开hosts文件并修改就行。
如图增加一行20.205.243.166 github.com，注意IP填自己ping的。
原理简单提一下，其实就是不通过DNS服务器解析域名，而是使用IP来访问github。
github的推送代码方法
为什么要提一下github推送代码的方法呢，因为现在已经不能使用账号密码作为凭证，而是需要使用令牌，所以需要注意一下。
1.点右上角头像选择settings，进入页面后再选择左侧列表的Developer settings。
2.来到这个页面可以看到左侧列表有个Personal access tokens项，点开后有两种tokens，这里我们选择Tokens(classic)；然后点页面中的Generate new token，选项中选择Generate new token(classic)。
3.然后跳出输入登录密码，之后进入下面的页面。
这里要注意：Note输入的名称会作为之后令牌登录的username，而生成的token则是password。
默认令牌有效期30天，可以按需修改。然后勾选repo项，就可以拉到最下面点击Generate token来生成token了。
4.生成的token是一串字符，点击旁边的复制按钮复制下来并妥善保管，这个token只能看一次，弄丢了的话需要重新生成。
5.前面也说到了，Note输入的名称会作为之后令牌登录的username，而生成的token则是password。之后在推送代码到git仓库时，就不要输自己的github登录账号密码了，是无法通过验证的。
在成功推送过一次之后，控制面板\所有控制面板项\凭据管理器中就会存储凭证，之后推送就不用再输任何东西了。如果令牌过期了，就到这里点开git:https://github.com项，把用户名和密码修改为新生成的、有效期内的note和token，然后就ok了。
初次尝试：建立一个简单的html页面
准备工作就絮絮叨叨写了这么多，实非我愿。但这些都是自己学习时踩过的坑，希望能帮助到更多的人不会重蹈覆辙。
现在进入正题，来建立一个简单的html页面作为登录页。
创建一个静态网站项目仓库
1.登录后点击右上方头像旁边的+号，选择新建一个仓库。
2.创建项目仓库时注意，仓库名以格式：账户名.github.io来创建。
如图我的账户名是test2782，那么仓库名就是test2782.github.io，仓库地址就是https://github.com/test2782/test2782.github.io，访问博客的网址就是https://test2782.github.io。
创建一个index.html
1.打开前面创建的仓库，点击Add file，选择Create new file。
2.文件名：index.html，这样才能作为首页来访问。
内容的话就写个经典的helloworld吧，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>hello world</title>
</head>
<body>
hello world
</body>
</html>
3.最后点Commit changes提交代码就ok了。
稍等几分钟，就可以输入网址：https://自己的账户名.github.io来访问自己的helloworld页面了。至此博客教程就算完成了第一步，在互联网上也是拥有属于自己页面的人啦。
浅尝辄止：使用hugo生成初始模板
hugo下载安装
安装包地址：https://github.com/gohugoio/hugo/releases
根据自己的系统选择对应的安装包，这里还是以windows系统举例：
但是hugo还有个extended版本，推荐直接安装这个版本，避免一些主题不支持基础版本。
环境配置
下载的文件解压后将其中的hugo.exe放在自定义文件路径下，这里我选择了D:\hugo。
然后就是基础操作，把路径D:\hugo加到环境变量的path里。
简单提一下怎么加环境变量，从来没加过环境变量、找不到在哪加的话还是百度下。桌面上右键计算机-属性-高级系统配置-环境变量，来到下面这个界面找到path点开，在最后面加上";D:\hugo"，注意每一个路径之间都有英文分号";"分隔。
加环境变量这一步做完就可以验证一下了。还是打开cmd，输入hugo version查看安装的hugo版本号，如果显示如下，说明安装配置成功了。
如果显示"hugo不是内部或外部命令，也不是可运行的程序或批处理文件。"那就说明环境配置有误，再重新检查一遍。
生成初始站点
还是打开cmd，进入自己准备生成项目的文件目录。以D:\hugo为例：
切换到D盘：D:
进入文件目录：cd D:\hugo
以生成项目名test2782.github.io为例，输入命令：hugo new site ./test2782.github.io
这样就在 D:\hugo\test2782.github.io 目录里生成了初始站点。
进去目录：cd ./test2782.github.io
在文件夹里看一下目录结构。
创建第一篇文章
输入命令：hugo new post/first.md，first.md 自动生成到了 content/post/first.md。
使用markdown编辑器（例如typora）或者文本编辑器（例如vs code）打开，初始内容如下。
这里得提一下子，文件后缀.md就是markdown文件，使用markdown标记语言编写。语法很简单，百度一下几分钟就能上手，主要作用就是用来写笔记。
title就是这篇文章的标题，修改成自己想起的名字。
darft是标记这篇文章是否为草稿，虽然有预览草稿页面的命令，但正式生成的时候是不生成草稿页面的，所以现在先把true改为false。
正文内容就写在- - -之外，这里还是写个经典的helloworld。
引入一个主题
进入themes目录：cd ./themes
git克隆一个hyde主题：git clone https://github.com/spf13/hyde.git
本地启动
先修改下配置文件，也就是hugo.toml。
在初始的基础上我们需要做一些修改，增加一行：theme = ‘hyde’。
返回上一级文件目录：cd …
启动指令：hugo server
注意看倒数第二行，web服务启动在http://localhost:1313/，默认使用1313端口，但如果被占用的话就以实际为准。现在打开浏览器，在地址栏输入http://localhost:1313/，就可以访问部署在本地服务器上的个人博客了。
打包上传到github
修改配置文件hugo.toml，将baseURL的值替换为自己的github博客访问地址，代表网站语言的languageCode的值改为zh-CN。
然后输入打包指令：hugo -D
此时文件目录下生成了一个public的文件夹，将这个public文件夹中的内容推送到github仓库即可（怎么推送代码不再赘述，准备工作有讲）。
稍等几分钟，即可看到之前访问html文件的博客网站，已经替换为了由hugo生成的个人博客页面。
渐入佳境：引入心仪的自定义主题
资料
主题列表英文地址 https://themes.gohugo.io/
主题列表中文地址 https://www.gohugo.org/theme/
主题loveit项目地址 https://github.com/dillonzq/LoveIt
引入主题
在上述的主题列表网站中选择自己心仪的主题，然后和上一部分中的引入一个主题做法一致：
进入themes目录：cd ./themes
git克隆一个主题：git clone 主题的github地址
（以克隆主题loveit为例：git clone https://github.com/dillonzq/LoveIt.git）
进行配置
事实上主题就是一个预设模板，只需要根据说明文档来进行配置，修改hugo.toml文件就可以了。
4819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
