简单！这可能是最快速的个人博客搭建姿势！|原创

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 如此赏心悦目，做到这样的效果是不是需要花费很大的精力，我不过就是写个文章而已，这样是不是本末倒置了？

其实，伟大的开源文化已经帮你搞定了这一切。搭建静态页面网站有技术非常多，有很多静态网站生成器可以解决这个问题。

目前有三种主流技术选型：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 编译判断依据

1. 编译 Hugo 依据：仓库编译目录下存在config.toml|json|yaml文件和content目录的时候，会使用hugo生成静态文件。
2. 编译 Hexo 依据：仓库编译目录下存在package.json，_config.yml文件和scaffolds目录的，会使用hexo generate生成静态文件，由于每次部署编译需要重新克隆编译并进行npm install，所以使用 Hexo 的时间相对 Hugo 和 Jekyll 会长一些。
3. 当不符合上述1和2条件的时候，就默认使用Jekyll编译。

本文以 Hugo 的安装和使用作为介绍，其他技术请自行研究，涉及的相关资料链接已经给出。

jekyll

官网：https://www.jekyll.com.cn/

中文文档：https://www.jekyll.com.cn/docs/

主题：https://github.com/topics/jekyll-theme

Hexo

官网：https://hexo.io/zh-cn/

文档：https://hexo.io/zh-cn/docs/

Hexo 官网是中文，大家自行查阅即可，比较简单。

Hugo

Hugo是一个用Go语言编写的静态网站生成器，它使用起来非常简单，相对于Jekyll复杂的安装设置来说，Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。

Hugo生成静态页面的效率很高，可以将你写好的MarkDown格式的文章自动转换为静态的网页，几乎瞬间生成。并且内置web服务器，可以方便的用于本地调试。

社区：https://discourse.gohugo.io/

安装：https://gohugo.io/getting-started/installing/

文档-快速开始：https://gohugo.io/getting-started/usage/

文档 ：https://gohugo.io/documentation/

文档-变量使用：https://gohugo.io/variables/page/

主题：https://themes.gohugo.io/themes

Hugo 安装

Mac 用户的安装十分方便，直接使用 brew命令 。

brew install hugo

Window 可以下载对应版本的安装包，链接：https://github.com/gohugoio/hugo/releases，然后直接点击exe文件进行安装。具体可以参考官方文档：https://gohugo.io/getting-started/installing/

安装完成后可以在命令行输入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 = "2020-09-13T014:20:12-07:00"
draft = true
title = "first"
 
+++
# 下面可以开始写正文了！

Hugo 默认生成的网站是没有任何皮肤模板的，可以去官网选择一个主题来下载：https://themes.gohugo.io/themes，并且放到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

我搭建的博客效果如下，大家可以点击阅读原文查阅，欢迎收藏，后续会对面试题和知识点进行归类并且发布相关文章到此博客。