hexo搭建我的博客--基础篇

写在前面

基于hexo搭建我的blog的文章在网上已经有不少了，不过因为时间的缘由有不少已经再也不适用或者说留下了不少坑，本文是基于我的这些天搭建的经历，踩了无数坑把这些坑给填上后总结出的目前最简易也是最靠谱的方法，相信小白看着也能直接搭建一个漂亮美观可随时访问的我的博客，嘿嘿，先晒一晒本身的成果，我的仍是比较满意的--个人blog。

hexo介绍

官网上的描述是Hexo是一个快速，简单而强大的博客框架。您可使用Markdown（或其余语言）编写文章，Hexo能够在几秒钟内生成具备美丽主题的静态文件。

简单来讲它就是一个主打简单快速的博客框架，这个能够对比下知名度更高一些的WordPress，相对来讲后者更强，不过更适合有服务器的人使用，好比你去购买个阿里云什么的建站那种，不过咱们此次追求简洁，不想在服务器折腾，后文会介绍具体在哪里架设咱们的博客，并且hexo能够魔改...给爱折腾的人用也很不错，另外hexo基于如今大热的nodeJS，能够配合学习一下，这也是我选择它的出发点之一。

正文

声明一下，本教程主要针对windows用户，其余平台用户在某些操做上可能有些不一致，能够在评论区或者右下角留言交流。

若有须要本教程会持续更新。

Git安装

下载并安装git（安装就是一直next就能够）

git主要用于版本控制，另外这里hexo的操做不少都须要在git bash进行，否则会出现奇怪错误，想要了解更多git知识能够参考如下连接：Git教程--廖雪峰网站。固然，直接跟着本教程走也是彻底没问题的。

NodeJS安装

关于NodeJS的一些介绍能够稍微看一下这篇文章--NodeJS简介，在本教程中NodeJS主要用于管理下载第三方包，例如hexo，而这些工做都是npm在负责的。
1.下载并安装NodeJS
这里选择最新的稳定版本v8.9.4安装过程能够一路next，不过推荐在选择安装路径时选择D盘，而后记住路径名，通常状况下是D:\Program Files\nodejs\
安装后输入Win+R输入cmd打开控制台输入如下代码：

node -v
npm -v

若是返回版本号即安装完成，不然就须要配置环境变量（参考步骤2中的图片）再测试

2.NodeJS配置
配置npm
咱们要先配置npm的全局模块的存放路径以及cache的路径，最好在nodejs安装路径下创建"node_global"及"node_cache"两个文件夹。以下图：

启动cmd，输入

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

配置环境变量（win10能够经过小娜查询“环境变量”找到入口），以下图打开

框中的三条记录是必须的（路径改成大家本身的路径）

测试是否配置完成，能够安装express来进行测试，打开cmd，输入

npm install express -g

完成后在node_global目录下查看是否存在express目录便可。

hexo安装

打开git bash，为了不出现错误后面的操做在git bash进行
首先新建一个存放hexo文件的目录，例如在D盘根目录新建hexo文件夹，而后cd到该目录下，开始安装

$ cd D:hexo/     #换成你的目录
$ npm install -g hexo-cli  #安装hexo脚手架
$ hexo init      #Hexo自动在当前文件夹下下载搭建网站所需的全部文件
$ npm install      #安装依赖包

$ hexo g         #完整命令为hexo generate，生成静态文件
$ hexo s         #完整命令为hexo server，启动服务器，用来本地预览

用浏览器访问http://localhost:4000/，这时就能够看到了一个比较漂亮的博客了，这个是hexo的默认主题landscape，而咱们会使用的是NexT主题，这个在后面会说到如何配置。

Github/Coding

本地博客搭建好了接下来是要把它部署到网上，这里能够选择github和国内的coding平台，后者在打开本身网站时会跳出广告，前者访问速度比较慢，你们自行选择，而后我如今的话是两个同时在使用。
注册部分我就不说了，若是两个都注册的话建议名字取相同的。下面详细说一下github和coding的Pages服务如何建立
1.Github Page
打开github主页，新建仓库（repository），这里要注意仓库的名称，好比个人账号是alvabill，那么仓库名称应该是：alvabill.github.io。

2.Coding Page
Coding的操做和github相差无几

新建一个名为 {user_name}.coding.me 的项目。{user_name} 指您本人的用户名，例如个人用户名为alvabill

配置SSH

以上过程完成后就是把hexo生成的静态页面上传了，觉得要结束了吗，还没呢，这里还须要配置SSH，首先要本地生成公钥私钥

$ ssh-keygen -t rsa -C "你的邮件地址"

引号里面的内容输入你的邮箱地址，而后回车，会提示你文件保存的路径，这时候按回车键确认，而后会提示你输入密码，输入便可（输入密码是看不到的），而后会确认输入一次，就能够在刚刚的路径看到生成了两个文件，一个是id_rsa，另外一个是id_rsa.pub，用sublime打开id_rsa.pub而后选中里面的所有内容，复制下来。
打开GitHub或Coding的SSH页面
Github：setting-->SSH and GPG keys-->New SSH key

Coding：

发布

打开D:\hexo，用sublime打开_config.yml文件，文件最后能够看到

deploy:
  type:

修改（注意要换上本身的连接）

deploy:
  type: git
  repository: git@github.com:yourname/yourname.github.io.git   #发布到github
  #repository: git@git.coding.net:yourname/yourname.git            #发布到Coding
  branch: master

或者同时发布到两个平台：

deploy:
  type: git
  repository:
    github: git@github.com:yourname/yourname.github.io.git,master
    coding: git@git.coding.net:yourname/yourname.git,master

ctrl+s保存修改。
打开git bash在当前目录输入如下命令：

$ hexo d         #完整命令为hexo deploy，将本地文件发布到page服务平台上

如遇遇到异常能够

$ hexo clean && hexo g
$ hexo d

若是出现如下异常

ERROR Deployer not found: git

尝试输入如下命令，而后从新执行刚刚的两条命令

$ npm install hexo-deployer-git --save

这时候若是弹出一个对话框，输入在github/coding上面的用户名和密码便可
这时候咱们就能够在浏览器输入https://yourname.github.io 或者https://youname.coding.me 打开

更改主题

D:\hexo目录下的theme文件夹下存放的就是博客的主题，hexo即是依据主题来生成静态文件的，挑选主题能够在官网https://hexo.io/themes/ 查找，根据本身的喜爱来挑选。
下载主题的方式以下：

$ cd your-hexo-site  #eg:D:\hexo
$ git clone {主题连接} themes/{主题名称}

启用主题的方式也很简单
sublime打开上文提到的hexo目录下的_config.yml，ctrl+f输入theme查找这个关键字，修改其主题名称为下载的主题名称便可。

theme: {主题名称}

以本人使用的next主题为例：
下载最新版：

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

修改hexo目录下的_config.yml

theme: next

具体能够到主题官网看看--NexT

域名申请

通过以上过程咱们已经实现了一个能够即时访问的我的博客，不过咱们想要的是一个更酷的更个性化的域名，下面就看一下如何申请一个免费的域名而后配置到咱们的github/Coding Page上面，实现以我的域名访问本身的博客。
1.免费域名
这里推荐一个网站Freenom，点进去注册，注册以后按照如下步骤进入下面这个页面，而后就能够在输入框处输入你喜欢的名字查找域名了

既然是我的博客，那固然仍是找本身昵称啦，例如个人昵称，查找有免费的域名后就点击加入购物车~

最后别忘了拖到最后点击确认购买

这里能够选择免费一年，域名快到期前的一个星期会发邮件提醒续期，续期也是不要钱的，也就是能够一直无偿使用了。点击continue确认而后填写一堆信息后就能获取到了。

回到初始界面后查看本身的域名，能够看到刚刚购买的域名已经在列表下了

2.使用第三方DNS解析工具
虽然freenom自身也能进行DNS解析，可是毕竟不适合国内的朋友使用。因此咱们使用国内的DNSPOD、CloudXNS等第三方DNS工具。
这里介绍如何使用CloudXNS管理，一如既往的先注册，这里好像须要身份证验证了，挺麻烦的，不过为了咱们的域名能好好的用上，仍是只能选择原谅他啊。
进入控制台-->个人域名，点击添加域名，例如刚刚弄到手的alvabill.ga

而后会跳出这么一个提示

意思就是要到freenom那边把域名接管过来，好的，咱们先记住那一段蓝色字

lv3ns1.ffdns.net
lv3ns2.ffdns.net
lv3ns3.ffdns.net
lv3ns4.ffdns.net

打开freenom刚刚的那个界面，点击对应域名的manage Demain按钮进入域名管理界面

进入NS服务器管理界面

选择Use custom nameservers (enter below)，而后把刚刚记录的那四段字符串复制粘贴进去，点击change nameservers

完成，回到CloudXNS，等半分钟刷新一下就有了，能够如今就点击开启，或者以后配置好了点击开启。

域名绑定Page服务

1.添加记录
以下为个人域名的记录，记录值分别为coding page和github page的网址，大家只须要修改这两个值，其余和个人同样配置即可。若是是只使用一个page服务就只须要两条对应的记录，而后记得要把线路类型都设置为全网默认哦。

2.配置Page服务
GitHub：
进入{yourname}.github.io仓库-->Settings，向下找到如下界面，在红框处填入你的域名

到D:\hexo\sourse目录下（即你安装hexo的目录下的sourse目录下）新建文件CNAME，用Sublime打开填入你的域名，如alvabill.ml，保存。
而后到D:\hexo目录下用sublime打开_config.yml，ctrl+f查找skip_render，而后改成

skip_render:
  - README.md  
  - CNAME

这个指令就是能够跳过CNAME和README.md文件，防止每次hexo从新渲染把它们清除掉。这里的README.md无关紧要，最好仍是有，由于每一个github项目都须要一个readme文件，添加位置和CNAME同样。

Coding：
进入项目-->pages服务，填入域名，绑定~

最后从新布置项目：

$ hexo clean && hexo g && hexo d -g
$ hexo g && hexo s   #如需本地预览，执行这一条

浏览器输入你的域名回车，就能够成功访问你的我的博客了！

总结

摸索了一段时间才完成的，仍是颇有成就感的，比较遗憾的是并无很好地记录下本身搭建这么一个网站的过程，教程写完后总感受漏了什么，当时遇到的问题应该仍是挺多的，再加上从新写博客时没法再次亲身经历那种由无到有的过程，不免会有很多疏漏的地方，欢迎你们在评论区或私戳我进行讨论，遇到什么问题也欢迎提出，我会及时地进行修正的。下一篇文章将介绍如何优化以及个性化Next.mist主题。若是你也喜欢这个主题的话，能够继续关注个人更新~~