前言

本文档教你如何快速使用hexo + Github Pages / Gitee Pages 免费搭建一个个人网站。

首先你需要准备一台 Win7 或者 Win10 系统的电脑。
并成功注册 Github 或者 Gitee 的账号(任意一个就行。或者两个都用)。

Github官网: https://github.com/
Gitee官网: https://gitee.com/

注册好账号后就可以进行下一步骤了。

软件下载

Hexo必备运行环境软件包下载:

两种格式任选一种格式下载就行了。
如果没安装解压缩软件或者不会解压，可以下载自解压程序。

坚 果 云：

下载自解压程序 下载Zip压缩包

腾讯微云：

下载自解压程序 下载Zip压缩包

Google Drive:

下载自解压程序 下载Zip压缩包

温馨提示：坚果云 下载.EXE格式可执行文件时会自动加上.dat后缀，下载后去掉.dat后缀即可正常使用。

网站源码模板(Hexo-butterfly-demo)：

源码下载方法可以查看本文档的下载源码部分内容

Gitee:

1
https://gitee.com/guguge/Hexo-butterfly-demo.git

Github: 

1
https://github.com/guguliu/Hexo-butterfly-demo.git

软件安装

软件下载下来并解压后会出现下面几个文件：

文件名称前面都标注有序号，按顺序逐个安装就行。

已解压文件

Git 安装

打开 1.Git-2.33.0.2-64-bit.exe 后一直按Next,直至完成安装。

温馨提示：建议不要修改安装路径，否则会导致后面的批处理脚本出现问题。

1.一直按 Next 直到安装完成

2.git安装完成

Node.js 安装

打开 2.node-v13.14.0-x64.msi 勾选 I accept 后一直按 Next 直到安装完成.

温馨提示：建议不要修改安装路径，否则会导致后面的批处理脚本出现问题。

1.勾选 I accept 后一直按 Next 直到安装完成
2.Node.js 安装完成

VSVode 安装

打开 3.VSCodeUserSetup-x64-1.59.1.exe 根据提示完成安装。安装目录随意。
附加任务部分全部勾选。

1.附加任务全部勾选
2.完成安装并运行软件一次

安装完打开发现软件是英文的，可以安装语言包。

安装语言包提示框

软件界面右下角会弹出提示框询问是否安装语言包，如果没有弹出，则需要手动安装。
点击左侧的应用图标，在弹出的搜索框内输入chinese，第一个就是语言包，点击install按钮安装就行。

1.手动安装安装语言包
2.语言包安装完成，重启软件

安装完语言包会提示重新启动软件，软件重启后就变成中文咯。

Hexo-cli 安装

打开4.安装hexo-cli.bat文件，等待安装完成就行。

Hexo-cli有三种安装方式:

  • npm : 官方源，如果是在中国大陆访问速度可能有点慢。
  • cnpm : 淘宝的npm镜像源，中国大陆访问速度最快。
  • yarn : 比 npm 速度快。

怎么知道有没有成功安装呢？
只需要再打开一次4.安装hexo-cli.bat文件。如果输出Hexo的版本信息则表示安装成功了。

Hexo-cli安装成功

配置Git用户和ssh密钥

ssh密钥 用于Git上传文件一种身份验证凭证，配置后上传文件不用输入密码。

打开5.设置git用户名和生成密钥.bat文件，并输入你的用户名和邮箱，内容随意。
然后就会弹出一个窗口，什么都不用填，输入三次 回车键即可。

1.生成密钥窗口，直接输入三次回车键，直至窗口自动关闭

2.再按一次回车，密钥内容就会 导出.txt文件

脚本执行完成后，就会发现目录下多了一个已生成ssh密钥.txt文件。
直接全选并复制文件里面的内容，用于设置Gitee和Github的ssh私钥

GitHub 配置ssh公钥

打开Github官网，并登录账号。点击网站右上角你的头像，然后选择Settings。

1.打开Settings

左侧菜单找到并点击SSH and GPG Keys。右侧内容点击 New SSH Key。

2.新建SSH Key

把之前在已生成ssh密钥.txt文件里面复制的内容粘贴进去。并点击Add SSH Key。
可能会弹出窗口要求输入Github密码进行身份验证。

2.粘贴密钥内容并保存

Gitee 配置ssh公钥

打开Gitee官网，并登录账号。点击网站右上角你的头像，然后选择设置。

1.打开设置

左侧菜单找到并点击SSH 公钥。在右侧把之前在已生成ssh密钥.txt文件里面复制的内容粘贴进去。并点击确定。
可能会弹出窗口要求输入Gitee密码进行身份验证。

2.粘贴密钥内容并保存

下载源码

建议将源码导入到自己的Github或者Gitee账号上。方便跨平台管理，可以在不同设备进行配置。
如果你只有一台电脑，也不在其他设备上同步编辑。可以直接下载源码。

网站源码模板(Hexo-butterfly-demo)：

Gitee:

1
https://gitee.com/guguge/Hexo-butterfly-demo.git

Github: 

1
https://github.com/guguliu/Hexo-butterfly-demo.git

直接下载

打开6.下载源码.bat文件，然后把上面任意一个链接，在窗口内按鼠标右键直接粘贴进去，直接回车就能下载。

直接下载源码

快速开始

下载完成后会发现目录下多了个文件夹，进入目录。
先打开启动脚本.bat，输入1并回车，执行 安装必备插件命令。

可以选择 npm 、 cnpm、 yarn 三种模式任意一种进行安装。
输入对应数字回车就行【下载慢建议选择cnpm 或 yarn】

网站内容修改

网站的配置主要包含在_config.butterfly.yml和_config.yml这两个文件内。
修改也很简单，直接修改每个选项冒号:后面的内容就行。

参考资料：
hexo-butterfly常用配置文档 butterfly官方配置文档

注意格式!!! 每个选项的冒号:与内容之间都有一个空格隔开。
如果是多行元素，注意缩进与上一行对齐。请勿破坏排列格式。
改之前建议备份以下文件。报错了方便换回来。backups目录下有备份的初始文件。
修改内容过多建议执行一下 4.清理缓存 功能。

改完直接运行启动脚本.bat 中的 本地测试功能，就能进行预览。

配置文件再次修改完要重新启动本地测试功能。页面才会更新。

新建文章和页面内容

打开创建文章或页面.bat，输入对应数字就可以选择创建文章页面或者创建独立页面。文件名可以随意输入。

文件生成位置：
文章页：位于 source \ _posts 目录内。包含一个.md文件和一个同名的文件夹，文件夹内放图片和资源文件。
独立页面：位于 source目录内生成一个单独的文件夹,文件夹内包含一个index.md。

打开生成的.md文件，会发现最上方以 --- 分隔的区域有很多参数。那些是Front-matter,可以自定义页面的各种属性。

Front-matter参数说明可查阅：
hexo-butterfly常用配置文档

--- 分隔的区域外，即后面空白处。就是文章编写区域。
文章格式采用的是Markdown格式编写，仅使用简单的符号和文字即可生成特定格式。简单易上手。

Markdown格式参考：
markdown基础教程

可以边运行启动脚本.bat 中的 本地测试功能边写文章，hexo支持实时预览文章页面内容。编写的时候保存文件并刷新浏览器页面就能看到新内容。

上传网站

需要把网站上传上去才能被所有人访问到。

上传到Gitee

打开Gitee官网并登录，点击右下角头像旁边的加号。选择新建仓库。

新建仓库

如果作为网站使用，仓库名称需要和你的用户名一样，例如：

仓库用户名要求

Gitee Pages没有限制，开源和私有都能使用。点击创建按钮完成创建

完成创建

创建成功后就会跳转到仓库页面，点击SSH按钮获取地址并复制。

复制SSH地址

回到网站源码下载目录，打开并编辑_config.yml文件。
找到 url： 把 https:// 后面的内容改成： 你的gitee用户名.gitee.io，例如：

修改url

再找到 repo: 把刚才复制的SSH地址粘贴进去，例如:

修改repo

回到网站源码下载目录，运行启动脚本.bat,输入3 并回车，就会开始上传网站内容了。
第一次上传会让你记住主机，输入yes继续。

上传成功

上传成功后返回刚才创建的仓库页面，刷新后，多了很多文件则表示上传成功。
接着点击服务,选择gitee pages

仓库页面
选择gitee pages

如果未实名认证则要根据要求上传身份信息进行实名认证。

实名认证

实名认证通过后就可以启用Gitee Pages 服务了。
勾选强制Https,再点击启用。

启用gitee pages

稍等片刻后就会出现一个网址，可以通过这个网址访问你的网站了！

注意：gitee pages 是不支持自动更新的，如果你后续上传了新的内容，都要到设置页面点击更新按钮，更新页面。

后续更新

上传到Github

打开Github官网并登录，点击右下角头像旁边的加号。选择New Repository仓库。

新建仓库

如果作为网站使用，仓库名称格式必须为： 你的Github用户名.github.io

仓库用户名要求

选择Public。再点击Create Repository 按钮完成创建

完成创建

创建成功后就会跳转到仓库页面，点击SSH按钮获取地址并复制。

复制SSH地址

回到网站源码下载目录，打开并编辑_config.yml文件。
找到 url： 把 https:// 后面的内容改成： 你的GitHub用户名.gitee.io，例如：

修改url

再找到 repo: 把刚才复制的SSH地址粘贴进去，例如:

修改repo

回到网站源码下载目录，运行启动脚本.bat,输入3 并回车，就会开始上传网站内容了。
第一次上传会让你记住主机，输入yes继续。

上传成功

上传成功后返回刚才创建的仓库页面，刷新后，多了很多文件则表示上传成功。
接着点击Settings,新页面左侧菜单 选择pages

仓库页面
选择 pages

一般会默认启用了，上面会出现你的网站地址，可以通过这个网址访问到你的网站了。
如没有启动则需要点击下面的Save

选择 pages

Github Pages是支持页面自动更新的，后续如果上传了新内容，页面就会自动刷新，无需再设置
还可以绑定自定义域名，前提是需要购买一个域名。并解析到Github的服务器上。