GitHub+Hexo搭建个人网站

准备工作-工具安装

一般搭建博客网站需要有服务器、数据库、注册域名，如果这些都没有，那么使用GitHub照样能做到。

服务器：GitHub提供了 GitHub Pages 功能来架设一个静态网站，这就解决了服务器的问题。
数据库：Hexo是一个快速、简介且高效博客框架，可以结合Node.js很快速的将MarkDown格式的文章渲染成静态网页文件html，这样文章的内容、标题、标签等信息就没必要存数据库里面了，是直接纯静态页面了，这就解决了数据库的问题。
域名：GitHub Pages 允许每个账户创建一个名为 {username}.http://github.io 的仓库，并自动为这个仓库分配一个 http://github.io 的二级域名，这就解决了域名的问题，当然如果想要自定义域名的话也是可以支持的。

Git

Git是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。配合云端仓库（例如Github、码云等）进行使用，可以将我们在本地计算机编写的代码提交到云端仓库上。
安装目的：将在本地编写的文档提交到云端仓库Github上。
git官方下载地址：https://git-scm.com/downloads

下载后默认下一步安装即可。
安装完成后右击桌面会看到增加了两项内容：

选择Git Bash Here，可以在弹出窗口中输入git命令上传文件

注意：安装完成后有可能需要重启电脑git才能生效。

github

GitHub是一个利用Git进行版本控制、专门用于存放软件代码与内容的共享网站。
github官方注册地址：https://github.com/

然后依次点击 continue ，submit，就到这个界面，start a project

接着会让你去邮箱验证

登录自己的邮箱，点开github给你发的邮件，点击链接

验证成功后，就正式注册完成了。
如果不想在浏览器中操作github网站而是想要安装github的客户端的话也是可以的。

node.js

下载并安装：
Node.js是HEXO的依赖的应用程序，
下载地址：https://nodejs.org/zh-cn/download/
根据自己的系统选择下载对应的版本。
下载完成后一路点击next进行安装即可。
安装完毕之后，确保环境变量配置好，能正常使用 npm 命令。
目的是为了能够使用npm命令安装HEXO。
测试安装是否成功：
在cmd命令行中输入npm -v查看npm的版本，输入node -v查看安装的nodejs的版本。
直接输入 node，就进入到了node的开发模式下，输入 console.log(‘xx’) 回车，如果可以看到输出的信息，说明nodeJs 的环境没有问题，nodeJs安装完成。

hexo

hexo简介：
Hexo是一个快速、简介且高效博客框架，支持Markdown格式，能够结合Node.js让页面在快速完成渲染，有众多优秀插件和主题。
官网：?http://hexo.io
github:?https://github.com/hexojs/hexo
工作原理：
由于github pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，太麻烦，所以hexo所做的就是将这些md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到github。
注意事项：

1. 很多命令既可以用Windows的cmd来完成，也可以使用git bash来完成，但是部分命令会有一些问题，为避免不必要的问题，建议全部使用git bash来执行，包括Hhexo的安装，具体安装步骤可见下文；
2. hexo不同版本差别比较大，网上很多文章的配置信息都是基于2.x的，所以注意不要被误导；
3. hexo有2种_config.yml文件，一个是根目录下的全局的_config.yml（站级配置文件），一个是theme下的（主题配置文件）。

本地搭建网站

安装hexo

在计算机本地找一个目录来作为本地的仓库,比如” E:\dxwblog”,那么就在dxwblog文件夹下安装hexo并利用hexo初始化本地仓库。
注意：由于这个文件夹将来就作为存放博客内容的地方，所以选择的时候慎重一些，最好不要随便放。
进入本地仓库目录，右击打开git bash终端，并使用npm命令安装hexo：

npm install -g hexo-cli

注意：此命令为全局安装，npm install hexo命令为局部安装，详情可参见官网https://hexo.io/zh-cn/docs/
输入hexo –v验证安装是否成功

初始化hexo

安装hexo后，对本地仓库进行初始化，注意一定要在本地仓库的根目录下执行

初始化完成后会自动下载一些文件到这个本地仓库，目录结构如下图：

1. _config.yml：站点配置文件，可以在其中配置网站的大部分参数。
2. package.json：应用程序的信息。
3. source：资源文件夹，用来存放用户资源的地方。
4. themes：主题文件夹，Hexo会根据主题来生成不同的静态页面。
5. scaffolds：md文档模板文件夹，当新建文章的时候，Hexo会根据模板来建立文件。

生成静态页面

hexo g # 此命令的作用是：生成public文件夹，并将source文件夹中的Markdown文档渲染成html静态网页文件放在此文件夹下（渲染功能是hexo结合node.js实现的）

注意：将来要推到远端（github）上去的内容默认都是public文件夹中的内容。

本地访问hexo网站

hexo s # 此命令的作用是：在本地起动 http 服务，将生成的 html 等输出文件布署到本地服务器上

这时，在浏览器中通过访问http://localhost:4000就可以看到hexo的默认主题了。
此主题在本地仓库中的路径为source/_posts/hello-world.md。
注意：hexo s命令是在前台运行的命令，如果要想要后台运行，可以输入如下命令：
nohup hexo s > blog.log 2>&1 &

部署到github

Github创建仓库

登陆Github账号并创建仓库，用来保存个人网站项目。
几个注意的地方：

1. 仓库名字必须是：username.github.io，其中username是你的用户名，其它名称无效，所以每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库，将来个人网站访问地址就是 http:// username.github.io ；
2. 仓库创建成功可能不会立即生效，稍作等待。

选择新建一个仓库（repository）

仓库名字必须是：username.github.io
例如用户名为kanbuki，那么仓库名必须是kanbuki.github.io
仓库属性选择为公开（public-公开-所有人可见，private-私有-只有自己可见）

提交后一个空的仓库就建好了

这时候我们通过kanbuki.ithub.io访问个人网站会报错，因为还未开启Github-Pages功能

本地仓库部署到Github

配置SSH

生成 SSH 密匙

目的：我们提交代码要有github权限才可以，但是直接使用用户名和密码太不安全了，所以使用ssh key来解决本地和服务器的连接问题。
打开 git-bash，执行三条命令：
git config –global user.name "账号"
git config –global user.email "邮箱"
ssh-keygen -t rsa -C "邮箱"
注意：
账号：是Github的用户名
邮箱：是Github经过验证后的邮箱
前两条配置很重要，每次 Git 提交时都会引用这两条信息，说明是谁提交了更新，所以会随更新内容一起被永久纳入历史记录。
配置完成后可用git config –list来查看已有配置。
第三条配置用来生成密匙，提示的是给 key 配置一个 password，可以为空，所以按三次回车，不设置密码，之后正常情况下就会生成成功。


因为我本地已经生成一次了，所以会提示“Overwrite”是否覆盖的信息，输入‘y’回车即可，如果是第一次生成是不会有这个提示信息的 ，直接回车三次就可以的。
SSH 公钥和私钥都被保存在提示的文件夹中，我们需要的是公钥。

添加 SSH 密匙

打开 github 并登陆，点开右上角个人头像，打开?Settings 。选择左边?SSH and GPG keys ?标签，在 SSH Keys 一栏右边点击?New SSH Key 。
? Title 自己填一个，可考虑用来标识本台计算机。
? 用记事本打开刚才提到的 id_rsa.pub 公钥文件，把所有内容复制粘贴到 Key 中。
? 点击 Add SSH Key，需要输入账号密码，完成后看见多了一个 SSH key。

测试是否配置成功

ssh -T git@github.com
注意邮：原文输入即可，看到“Hi liuxianan! You’ve successfully authenticated, but GitHub does not provide shell access”的提示信息表示SH已配置成功。

配置deploy

打开本地仓库站级配置文件的_config.yml，找到有关deploy的部分，采用SSH的方式推送到创建的github仓库中去
SSH方式即git@github.com的方式，并非https://的url方式。
原文件内容为：

修改为：
deploy:
type: git
repository: git@github.com:username/username.github.io.git
branch: master
注意，除了所有：的后面都是有一个空格的，千万要小心，不然后出错的，其中yourname即在github上面的用户名
例如：
deploy:
type: git
repository: git@github.com:kanbuki/kanbuki.github.io.git
branch: main

部署到github

安装插件

hexo d命令执行时会调用 hexo 中的 hexo-deployer-git 插件，在该插件内部会启动一个进程调用git命令，从而将生成的html等代码上传到 github上。
npm install hexo-deployer-git –save

注意：不安装插件的话会报错以下错误

生成并部署

hexo g #生成静态文件
hexo d #部署到github
这两条命令可以合并成一个更快捷的命令：hexo d -g #在部署前先生成
效果是一样的

部署完成后本地仓库会生成一个.deploy_git文件夹

查看github，本地仓库public文件夹中的内容已上传成功

通过域名username.github.io访问网站能够看到与访问本地仓库网站时的内容一致，表示博客网站搭建成功。

修改博客主题

我们一般不会使用默认的主题，可以在官方提供的主题中进行选择。官方主题：https://hexo.io/themes/

下载主题

比如选择的主题为：hexo-theme-yilia
进入本地仓库themes文件夹，克隆主题内容并放在yilia文件夹下：
cd ./themes
git clone https://github.com/litten/hexo-theme-yilia yilia
注意：
我在输入clone命令后提示错误：

原因可能是本地仓库中已经存在过这些包，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布，结果克隆成功。

克隆成功后themes目录中生成了下载的主题包：

更换主题

1. 进入根目录，打开根目录下的_config.yml站级配置文件更改主题，

theme: landscape修改为theme: yilia

2. 执行hexo d -g重新生成部署

通过域名username.github.io访问网站看到主题更换成功

绑定自定义域名

github支持域名访问，可以使用默认的 username.github.io 来访问。如果想更个性一点，可以绑定一个属于自己的域名。

域名注册

要有自己的专属域名，就要去申请注册域名，可以通过万网申请购买：https://wanwang.aliyun.com/
注意：新购买的域名需要完成实名认证，可能需要时间较长，只有认证通过之后才能进行域名解析。

域名解析

域名实名认证通过后，进入万网的控制台，点击“云解析DNS”：


找到已经购买的域名，点击“解析设置”
注意：实名认证通过后状态为正常，否则为异常状态，异常状态下是无法解析的。

点击“添加记录”，记录一共需要添加2条, 这样可以保证无论是否添加www都可以访问：
第1条记录：采用“A”+IP地址的方式，主机记录填入“www”、记录值填入ip，其余项默认即可。
ip可以通过ping你的url获取：例如：在cmd命令行中输入ping命令：
ping www.kanbuki.github.io


第2条记录：采用CNAME+域名的方式，

2条记录均设置完成后的结果：

主机记录www对应www. kanbuki.cn，主机记录 @对应kanbuki.cn
设置完成解析之后，直接访问域名查看能否跳转到我们github页面，答案是不能，显示404的错误，因为此时GitHub Pages 的配置项中还未配置自定义的域名。

域名配置

在username.github.io仓库中找到“setings”

进入设置后，往下拉，找到GitHub Pages设置界面 ：

在custom domain 的选项中输入你想自定义的域名地址，点击“save”，
勾选Enforce HTTPS，作用：GitHub Pages 会在我们配置自定义域名之后自动帮我们配置 HTTPS 服务。刚配置完自定义域名的时候可能这个选项是不可用的，一段时间后等到其可以勾选了，直接勾选即可，这样整个博客就会变成 HTTPS 的协议的了。

完成网址变为输入的自定义域名，不再是username.github.io，如图所示：

此时项目目录下面生成了一个 CNAME 文件，内容就是自定义域名。
CNAME文件的作用：CNAME是一个别名记录，它允许你将多个名字映射到同一台计算机。比如刚才添加的CNAME文件，会被github自动识别，当我们输入username.github.io和输入自定义域名时，它将指向同一个ip地址，展示同样的内容。

自定义域名配置完成后，通过自定义的域名可以访问成功，同时通过域名username.github.io仍然也可以访问成功。

注意： 生成的CNAME文件只在github中，本地仓库中并不存在，下次从本地提交文档时容易被冲掉，所以需要在本地仓库的source文件夹下建立一个相同内容的CNAME文件（从github中下载也可以）。

赏

谢谢你请我吃糖果