用Hexo+GitHub Pages 搭建属于自己的博客

用Hexo+GitHub Pages+Next 搭建属于自己的博客

今天来讲讲用用Hexo+GitHub Pages+NexT来搭建属于自己的博客。相信每一个看这篇文章的人，都有一个博客梦，想做一个好看的，有特色的博客，又不想从头开始造轮子。偶然的一天看到了别人用Github Pages搭的个人博客页，十分简洁大气，于是自己开始尝试，中途踩了不少的坑，花了两天的时间，做了一个不是很完善的博客。
我的个人博客链接：https://shengshengshini.github.io/

用Hexo在本地搭建一个博客

准备工作：

1、 安装 node.js。

链接：https://nodejs.org/en/

2、 安装Git。

https://github.com/waylau/git-for-win

打开cmd命令行，检查一下是否安装成功。

C:\Users\Blueheart>node -v
v8.9.4

C:\Users\Blueheart>npm -v
5.6.0

C:\Users\Blueheart>git --version
git version 2.16.1.windows.2

3、 使用npm安装Hexo。

npm install -g hexo-cli

开始搭建博客

1、 随便找个文件夹打开终端（我是在E盘），输入：

hexo init blog//blog是项目名
cd blog //切换到站点根目录
npm install //安装
hexo server //开启服务

2、 打开浏览器输入localhost:4000查看：

看到这个样子就说明成功了（由于我搭建的时候没截图，这张图片我在网上Download的），这个就是hexo默认的博客主题。现在你已经可以在这个主题下写博客了。

当然，我是不喜欢这样的，幸好，github上有大量的主题可供选择，这里我选择使用nexT主题。

选择主题nexT

1、在站点根目录输入git clone https://github.com/iissnan/hexo-theme-next themes/next：

C:\Users\Blueheart>E:

E:\>cd blog

E:\blog>cd themes

E:\blog\themes>git clone https://github.com/iissnan/hexo-theme-next themes/next

2、 完成后，打开blog文件夹下的_config.yml文件，找到theme字段，把landscape改为next：

3、 在终端输入：

hexo clean  //清除缓存
hexo g  //重新生成代码
hexo s  //部署到本地

然后打开浏览器访问localhost:4000 查看效果。
nexT主题有三种选择，这个只是最简洁的一种，我们选择最好看的那个。

• Muse- 默认 Scheme，这是NexT最初的版本，黑白主调，大量留白。
• Mist -Muse 的紧凑版本，整洁有序的单栏外观。
  -Pisces - 双栏 Scheme，小家碧玉似的清新。

4、 配置nexT

打开blog/themes/next/_congig.yml文件：

5、 在终端输入：

hexo clean  //清除缓存
hexo g  //重新生成代码
hexo s  //部署到本地

打开浏览器访问 localhost:4000 查看效果，博客类似于下面这样：

将本地博客上传到Github

话不多说，直接开始。

注册Github

https://github.com/

如果英文和我一样不好的话，建议用Chrome浏览器或者安装个有道词典。（你懂得~）

创建一个新项目，项目必须要遵守格式：账户名.github.io，不然接下来会有很多麻烦。并且需要勾选Initialize this repository with a README。

在建好的项目右侧有个settings按钮，点击它，向下拉到GitHub Pages，你会看到那边有个网址，访问它，你将会惊奇的发现该项目已经被部署到网络上，能够通过外网来访问它。

将Hexo与Github Page联系起来，设置Git的user name和email（如果是第一次的话）

进入目标文件夹，在其文件夹里面鼠标右键，点击Git Base Here。

git config --global ures.name "用户名"

git config --global user.email "邮箱"

输入cd ~/.ssh，检查是否由.ssh的文件夹。

输入ls，列出该文件下的内容。下图说明存在。

输入ssh-keygen -t rsa -C “你的邮箱”，连续三个回车，生成密钥，最后得到了两个文件：id_rsa和id_rsa.pub（默认存储路径是：C:\Users\Administrator\.ssh）。

输入eval "$(ssh-agent -s)"，添加密钥到ssh-agent。

再输入ssh-add ~/.ssh/id_rsa，添加生成的SSH key到ssh-agent。

登录Github，点击头像下的settings，添加ssh。

新建一个new ssh key，将id_rsa.pub文件里的内容复制上去。

输入ssh -T git@github.com，测试添加ssh是否成功。如果看到Hi后面是你的用户名，就说明成功了。

**问题：假如`ssh-key`配置失败，那么只要以下步骤就能完全解决**。

首先，清除所有的`key-pair`
`ssh-add -D`
`rm -r ~/.ssh`
删除你在`github`中的`public-key`

重新生成ssh密钥对
`ssh-keygen -t rsa -C "xxx@xxx.com"`
接下来正常操作
在`github`上添加公钥`public-key`:
1、首先在你的终端运行 `xclip -sel c ~/.ssh/id_rsa.pub`将公钥内容复制到剪切板
2、在`github`上添加公钥时，直接复制即可
3、保存

测试：
在终端 `ssh -T git@github.com`

配置Deployment，在其文件夹中，找到_config.yml文件，修改repo值（在末尾）。

# 这是提交到github的配置，启用本地服务器，请注释:
deploy:
  type: git
  repository: git@github.com:shengshengshini/shengshengshini.github.io.git
  branch: master

repo值是你在github项目里的ssh。

新建一篇博客，在cmd执行命令：hexo new post “我的第一篇文章”。

这时候在文件夹_posts目录下将会看到已经创建的文件。

在生成以及部署文章之前，需要安装一个扩展：npm install hexo-deployer-git --save。

使用编辑器编好文章，那么就可以使用命令：hexo d -g（也可以分开），生成以及部署了.。

部署成功后访问你的地址：https://用户名.github.io。那么将看到生成的文章。

好了，到此为止，最基本的也是最全面的Hexo+GitHub Pages搭建博客完结。

欢迎关注我的微信公众号一起交流：