开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情
GitHub Pages，一般多用于托管个人的静态网站，所以现在很多人也用来它来搭建私人博客，省去了购买服务器、域名等等一系列复杂的操作。如果你想方便、简约并且体现极客精神，那么我强烈推荐你拥有一个自己的 GitHub Pages。
在学习以下内容之前，请先准备好GitHub账号，如果没有请自行注册。如果觉得访问 GitHub 不够稳定，也可以注册 Gitee 账号，Gitee Pages 提供了和 GitHub Pages 相同的功能，搭建步骤也类似。
搭建步骤
1.前往GitHub并创建一个名为username .github.io 的新公共存储库，其中username是你在 GitHub 上的用户名（或组织名称）。
如果存储库的名字与用户名不完全匹配，将无法显示，因此请确保正确设置。
2.克隆项目到本地。
git clone https://github.com/*用户名*/*用户名*.github.io
3.添加index.html文件。
cd 用户名.github.io
echo "Hello World" > index.html
4.推送到远程仓库
git add --all
git commit -m "初始提交"
git push -u origin main
5.一个最简单的GitHub Pages 创建完成，可以开始访问了！地址：https:// username .github.io。
当然，上述操作完全可以在 GitHub web端完成，核心就是取一个和账户名相同的仓库名，并且在根目录下放置index.html文件，就可以解析为GitHub Pages。
Gitee Pages 的创建和 GitHub 非常相似，项目结构也一样，可以直接 clone 到Gitee 仓库中，区别是 Gitee 需要手动去部署。点击服务->Gitee Pages，然后选择对应分支部署项目即可。
静态页面网站技术选型
你们一定会好奇，为什么别人的 GitHub page 如此赏心悦目，做到这样的效果是不是需要花费很大的精力，我不过就是写个文章而已，这样是不是本末倒置了？
其实，伟大的开源文化已经帮你搞定了这一切。搭建静态页面网站有技术非常多，有很多静态网站生成器可以解决这个问题。
什么是静态网站生成器？如果追溯到最早的网站形式，那时候的网页都是静态的，即一个内容不变的html文件放在服务器上，人们通过互联网访问浏览的都是这个一成不变的页面。后来，人们发现，需要和网页进行交互，能根据用户的输入动态呈现出相应的内容，这就是动态网站。为什么现在又回归使用静态网站呢？特别是对于博客网站这种特殊的形式。我的理解是：
- 访问速度提升。静态页面不需要像动态页面那样经常去查询数据库，而是直接将最终页面内容返回。
- 搜素引擎友好。便于搜索引擎索引，比如很多动态网站的页面地址是一样的，只是后面传入的参数不一样，容易让搜索引擎误认为是同一个页面。（虽然不会）
- 可以完全抛弃数据库，减少复杂度，将最复杂的一步交给静态网站生成器，自己只专注写作、生成、发布三个步骤。
- 博客文章可以以文本文件的方式（MarkDown）在本地维护管理，不需要像之前那样在网页的编辑器里提交到网站数据库。你可以方便的使用github管理你的博客文章，不会丢失，又能追溯到每一次的内容变更。
目前有三种主流技术选型：Hogo是 Go 语言，Hexo是 nodejs，jekyll 是 Ruby。
-
jekyll 的优势是方便，是 Github 官方推荐的，本身有内核支持深度绑定，项目中直接添加配置文件开始写文本就行。windows不推荐安装ruby环境，并且不支持部分私密不可见。
-
hexo 的优势是速度快，中文社区，缺点是每次更新内容都需要执行严格的语法检查，然后再次部署。
-
Hugo 简介响应快，简单，社区非常活跃，并且编译速度也非常快，并且本地环境配置简单方便。
经过对比，我选择了 Hugo 作为搭建静态页面网站的技术。
并且额外提一句，Gitee Pages 内核对 Hugo、Hexo、JekyII 提供了内核级别的支持，可以通过 Gitee 编译直接发布，这也可以看出我们在这三种技术中进行选型问题不大。
Gitee Pages是一个免费的静态网页托管服务，您可以使用Gitee Pages托管博客、项目官网等静态网页。如果您使用过Github Pages那么您会很快上手使用Gitee的Pages服务。目前GiteePages支持 Jekyll、Hugo、Hexo编译静态资源。Jekyll、Hugo、Hexo 编译判断依据
- 编译 Hugo 依据：仓库编译目录下存在
config.toml|json|yaml文件和content目录的时候，会使用hugo生成静态文件。- 编译 Hexo 依据：仓库编译目录下存在
package.json，_config.yml文件和scaffolds目录的，会使用hexo generate生成静态文件，由于每次部署编译需要重新克隆编译并进行npm install，所以使用 Hexo 的时间相对 Hugo 和 Jekyll 会长一些。- 当不符合上述1和2条件的时候，就默认使用Jekyll编译。
本文以 Hugo 的安装和使用作为介绍，其他技术请自行研究，涉及的相关资料链接已经给出。
jekyll
Hexo
Hexo 官网是中文，大家自行查阅即可，比较简单。
Hugo
Hugo是一个用Go语言编写的静态网站生成器，它使用起来非常简单，相对于Jekyll复杂的安装设置来说，Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。
Hugo生成静态页面的效率很高，可以将你写好的MarkDown格式的文章自动转换为静态的网页，几乎瞬间生成。并且内置web服务器，可以方便的用于本地调试。
文档-快速开始：gohugo.io/getting-sta…
文档-变量使用：gohugo.io/variables/p…
Hugo 安装
Mac 用户的安装十分方便，直接使用 brew命令 。
brew install hugo
Window 可以下载对应版本的安装包，链接：github.com/gohugoio/hu…
安装完成后可以在命令行输入hugo 检查是否安装成功。
Hugo 目录结构
安装完成后可以选择一个文件夹，然后创建一个站点。
hugo new site mysite
Hugo 会自动生成这样一个目录结构：
- archetypes/
- content/
- layouts/
- static/
- config.toml
config.toml是网站的配置文件，这是一个TOML文件，全称是Tom’s Obvious, Minimal Language，这是它的作者GitHub联合创始人Tom Preston-Werner 觉得YAML不够优雅，捣鼓出来的一个新格式。如果你不喜欢这种格式，你可以将config.toml替换为YAML格式的config.yaml，或者json格式的config.json，hugo都支持。
content目录里放的是你写的markdown文章，layouts目录里放的是网站的模板文件，static目录里放的是一些图片、css、js等资源。
Hugo 基本操作
进入生成的site目录：
$ cd mysite
创建一个页面：
$ hugo new about.md
如果是博客日志，最好将md文件放在content的post目录里。
$ hugo new post/first.md
执行完后，会在content/post目录自动生成一个MarkDown格式的first.md文件：
+++
date = "2015-01-08T08:36:54-07:00"
draft = true
title = "first"
+++
# 下面可以开始写正文了！
Hugo 默认生成的网站是没有任何皮肤模板的，可以去官网选择一个主题来下载：themes.gohugo.io/themes，并且放到… 文件夹中。
$ cd themes
$ git clone https://github.com/spf13/hyde.git
启动本地调试：
$ hugo server -D
浏览器里打开：http://127.0.0.1:1313
部署Hugo到Pages
进入项目根目录，然后执行 Hugo 命令生成最终页面：
$ hugo --theme=hyde --baseUrl="http://xxx.github.io/"
如果一切顺利，所有静态页面都会生成到 public 目录，将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。
$ cd public
$ git init
$ git remote add origin https://github.com/zzz/zzz.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master
我搭建的博客效果如下。
