GitHub Pages 是什么？

它是由 GitHub 官方提供的一种免费的静态站点托管服务，让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面。

Hexo 是什么？

官网：hexo.io

Hexo 是一个快速、简洁且高效的静态博客框架，它基于 Node.js 运行，可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。

Hexo + GitHub 文章发布原理

在本地撰写 Markdown 格式文章后，通过 Hexo 解析文档，渲染生成具有主题样式的 HTML 静态网页，再推送到 GitHub 上完成博文的发布。

优点和不足

优点：完全免费；静态站点，轻量快速；可按需求自由定制改造；托管在 GitHub，安全省心；迁移方便……

不足：发文不便，依赖于本地环境；更适合个人博客使用；GitHub 在国内访问速度有点不快。

1.准备工作

注意事项

输入代码时，核对准确，最好切换成英文输入法；
将文中的 “用户名” 和 “邮箱” 替换为自己的 GitHub 账户名和绑定的邮箱；
统一使用 Git Bash 进行操作（支持 Win、Mac）；
小白请严格按步骤进行，不要跳！

环境搭建

Hexo 基于 Node.js，搭建过程中还需要使用 npm（Node.js 已带）和 git，因此先搭建本地操作环境，安装 Node.js 和 Git。

Node.js：https://nodejs.org/zh-cn
Git：https://git-scm.com/downloads

下载 Node.js 和 Git 程序并安装，一路点 “下一步” 按默认配置完成安装。安装完成后，在MacBooks找到“终端”或者英文叫做“Terminal”打开命令窗口，依次输入 node -v、npm -v 和 git –version 并回车，正确出现程序版本号即可。

2. 连接 Github

使用邮箱注册 GitHub 账户，选择免费账户（Free），并完成邮件验证。

再次在“终端”或者英文叫做“Terminal”打开命令窗口，依次输入命令行

git config --global user.name "你的GitHub 用户名"

git config --global user.email "你的GitHub 邮箱"

创建 SSH 密匙，输入命令行

ssh-keygen -t rsa -C "GitHub 邮箱"，

然后一路回车。

添加密匙：

先找到 id_rsa.pub 密钥文件

方法一：
打开终端输入

cat ~/.ssh/id_rsa.pub

就会显示出来，然后复制

方法二：
打开终端输入

open ~/.ssh

即可，打开文件夹，就可以找到id_rsa.pub文件了。

方法三：
在finder里按下cmd+shift+G，然后输入~/.ssh，确定，你就能看到你的文件了

用Xcode软件打开，并全文复制里面的内容。

登陆 GitHub ，点击右上角头像，下拉框，进入 Settings 页面，选择左边栏的 SSH and GPG keys，点击 New SSH key。Title 随便取个名字，粘贴复制的 id_rsa.pub 内容到 Key 中，点击 Add SSH key 完成添加。

验证连接：

打开“终端”命令窗口，输入

ssh -T git@github.com

上面命令输入后，若是弹错Permission denied (publickey)

以下是解决办法

用如下命令(id_rsa对应目标账户的私钥)命令，制定目标Git账号

ssh-add -K ~/.ssh/id_rsa

再次输入

ssh -T git@github.com

命令，即可弹出成功界面

出现 “Are you sure……”，输入 yes 回车确认。

显示 “Hi xxx! You’ve successfully……” 即连接成功。

3. 创建 Github Pages 仓库

GitHub 主页右上角加号 -> New repository：

Repository name 中输入用户名.github.io
勾选 “Initialize this repository with a README”
Description 选填

填好后点击 Create repository 创建。

创建后默认自动启用 HTTPS，博客地址为：https://用户名.github.io

4. 本地安装 Hexo 博客程序

在Mac的用户目录下，新建一个文件夹用来存放 Hexo 的程序文件，如Blog。

打开“”终端”，输入

CD blog （如何你的文件夹命名为XXX，则CD XXX）

4.1 安装 Hexo

在终端输入命令，一键安装 Hexo 博客程序，

sudo npm install -g hexo-cli

Mac 用户需要管理员权限。要输入密码，直接在终端提示下，输入即可。密码输入后不会显示出来，直接按回车enter键即可。

安装时间有点久（真的很慢！），界面也没任何反应，耐心等待，安装完成后如下图。

4.2 Hexo 初始化和本地预览

初始化并安装所需组件，继续输入命令

hexo init         #    初始化
npm install     # 安装组件

完成后依次输入下面命令，启动本地服务器进行预览：

hexo g   # 生成页面
hexo s   # 启动预览

访问 http://localhost:4000，即可出现 Hexo 默认页面，本地博客安装成功！

Tips：如果出现页面加载不出来，可能是端口被占用了。Ctrl+C 关闭服务器，运行 hexo server -p 5000 更改端口号后重试。

Hexo 博客文件夹目录结构如下：

5. 部署 Hexo 到 GitHub Pages

本地博客测试成功后，就是上传到 GitHub 进行部署，使其能够在网络上访问。

首先安装 hexo-deployer-git：输入下方命令

npm install hexo-deployer-git --save

然后修改 _config.yml 文件末尾的 Deployment 部分，修改成如下：

deploy:
type: git
repository: git@github.com:用户名/用户名.github.io.git
branch: master

完成后运行命令

hexo d

将网站上传部署到 GitHub Pages。完成！
这时访问我们的 GitHub 域名 https://用户名.github.io 就可以看到 Hexo 网站了。

6. 开始使用

6.1 发布文章

进入博客所在目录，右键打开 Git Bash Here，创建博文：

hexo new “My New Post”

然后 source 文件夹中会出现一个 My New Post.md 文件，就可以使用 Markdown 编辑器在该文件中撰写文章了。

写完后运行下面代码将文章渲染并部署到 GitHub Pages 上完成发布。以后每次发布文章都是这两条命令。

hexo g # 生成页面
hexo d # 部署发布

也可以不使用命令自己创建 .md 文件，只需在文件开头手动加入如下格式 Front-matter 即可，写完后运行 hexo g 和 hexo d 发布。

title: Hello World # 标题
date: 2019/3/26 hh:mm:ss # 时间
categories: # 分类

Diary
tags: # 标签
PS3
Games

摘要

正文

6.2网站设置

包括网站名称、描述、作者、链接样式等，全部在网站目录下的 _config.yml 文件中，参考官方文档按需要编辑。

注意：冒号后要加一个空格！

6.3 更换主题

在 Themes | Hexo 选择一个喜欢的主题，比如 NexT，进入网站目录打开终端

下载主题，输入命令行

git clone https://github.com/iissnan/hexo-theme-next themes/next

然后修改 _config.yml 中的 theme 为新主题名称 next。（有的主题需要将 _config.yml 替换为主题自带的，参考主题说明。）

依次输入下方命令行，发布新主题

（不管修改配置文件，还是主题，都依此操作。完成后，大概有几分钟延迟，等等再刷新网站即可）

hexo clean # 清除缓存

hexo g -d # 生成并发布

6.4 常用命令

hexo new “name” # 新建文章
hexo new page “name” # 新建页面
hexo g # 生成页面
hexo d # 部署
hexo g -d # 生成页面并部署
hexo s # 本地预览
hexo clean # 清除缓存和已生成的静态文件
hexo help # 帮助

7. 常见问题

1、Hexo 设置显示文章摘要，首页不显示全文Hexo

主页文章列表默认会显示文章全文，浏览时很不方便，可以在文章中插入进行分段。该代码前面的内容会作为摘要显示，而后面的内容会替换为 “Read More” 隐藏起来。

2、设置网站图标进入 themes/主题文件夹，打开 _config.yml 配置文件，找到 favicon 修改，一般格式为：favicon: 图标地址。（不同主题可能略有差别）

3、修改并部署后没有效果使用 hexo clean 清理后重新部署。

4、开启 HTTPS 后访问网站显示连接不安全？

证书还未部署生效，等待一会儿，清除浏览器缓存再试。

5、Mac 安装 Hexo 报错无法安装

Mac 用户需要管理员权限运行，使用 sudo npm install -g hexo-cli 命令安装。

6、npm 下载速度慢，甚至完全没反应

使用 npm 安装程序等待很久也没反应，或者下载速度很慢，可以更换 npm 源为国内 npm 镜像。临时更换方法：在 npm 安装命令后面加上：

--registry https://registry.npm.taobao.org

结语

Hexo 是一种纯静态的博客，我们必须要在本地完成文章的编辑再部署到 GitHub 上，依赖于本地环境。不能像 WordPress 或 Typecho 那样的动态博客一样能直接在浏览器中完成撰文和发布。

可以说是一种比较极客的写博客方式，但是优势也是明显的——免费稳定省心，比较适合爱折腾研究的用户，或者没有在线发文需求的朋友。

来源参考：

作者：crystal
链接：https://zhuanlan.zhihu.com/p/60578464
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

更新日志

2019-10-16 在知乎原文基础上，解决Mac用户会遇到的细节问题。