Hexo+NexT+GitHub简易建站流程

2017-12-04 本文已影响79人 Micrason

一直以来，我都急切的渴望拥有一个属于自己的博客网站，但是两年来，由于各种原因一直没能是真正的实践。正好这几天闲了下来，无意中看他人博客时发现了个人建站的曙光。

温馨提示：该网站使用Hexo+NexT+GitHubPage构建，如果你已了解并成功建立了自己的网站，那么请及时下车，免得耽误您的时间。如果你还不了解并用建站的渴望，那么接着往下看。下面开始开车啦...

先打个广告哈，这是我刚建的网站：Welcome to KCrason's blog ，期待大佬们的践踏！

搭建环境

安装git客户端。鉴于git客户端在国内的下载速度慢的感人，在此提供一个超快的下载地址。传送门
安装Node.js。这里只要直接从官网首页下载他的.exe的文件直接安装即可。
安装Hexo。安装Hexo需要使用Git Bash，因此先找到刚才安装的git客户端找到Git Bash并打开。
1、输入$ npm install -g hexo-cli，该命令为在本地安装Hexo。
2、在任意一个盘中的任意位置建立一个文件夹，名称随便取，最好为youname.github.io。比如我在D盘建立了一个名为kcrason.github.io的文件夹。
3、复制你创建的文件夹地址，接着在Git Bash中输入$ hexo init D:\kcrason.github.io（注意，将路径该成你自己的）。该命令将会复制建站所需文件，并初始化相关建站参数。这个过程为需要网络，耐心登录片刻。
4、接着，输入$ cd D:\kcrason.github.io命令。
5、最后，输入$ npm install命令。
6、输入$ hexo g，该命令用于生成静态文件。
7、输入$ hexo s，改命令为启动Hexo服务。
8、在浏览器输入：localhost:4000，回车，出现下面这个界面，恭喜你，成功了三分之一了。 Hexo建站

Hexo安裝NexT主題

Hexo的默认主题为landscape。本教程将使用另一款现极为流行的主题NexT为基础。后续的主题相关配置都是基于NexT的。如果你要建站，我也强烈建议你使用该主题。

安装步骤并切换至NexT主题
1、使用Git Bash输入$ cd D:\kcrason.github.io进入网站文件夹。
2、接着输入$ git clone https://github.com/iissnan/hexo-theme-next themes/next克隆最新版本的Next主题。当然你也可以使用稳定版，详情请查看官网。下载会有点慢哦，别着急~
3、使用Notepad++/Sublime Text打开站点配置文件，即\kcrason.github.io\_config.yml文件。找到 theme字段，并将其值由默认的landscape更改为next。
4、输入$ hexo g，重新生成静态文件。
5、输入$ hexo s，启动Hexo服务。
6、再次输入在浏览器输入：localhost:4000，回车。这时候你会看到你的网站界面已经是下面这样啦。
NexT主题下的站点

Hexo站点配置和主题配置

Hexo的配置包括多个部分，广义上来说主要是Hexo本身的配置和Hexo主题的配置。Hexo本身配置主要在\kcrason.github.io\_config.yml配置。而主题的配置则在\kcrason.github.io\themes\next\_config.yml配置。其中，以主题配置为主。

Hexo站点配置

Hexo站点的配置是在\kcrason.github.io\_config.yml文件中进行的，其一般包括以下几个部分，自行根据需求修改站点配置文件当中的值。

站点配置一般内容

Hexo主题配置

Hexo的主题配置是在\kcrason.github.io\themes\next\_config.yml文件进行配置，主题的配置包括多个方面。这方面的配置查看NexT的官方文档即可。

将Hexo站点托管至GitHub

在GitHub创建一个新的repository，名称为：youname.github.io
Create a new repository
站点部署
1、打开Git Bash，输入$ npm install hexo-deployer-git --save。该命令用于安装hexo-deployer-git。目的是将本地和Hexo网站部署到刚刚在GitHub创建的repository中。
2、打开\kcrason.github.io\_config.yml，找到其中的deploy字段。修改和增加如下内容。

deploy:
  type: git
  repo: https://github.com/KCrason/kcrason.github.io.git（你自己的在GitHub的repository地址）
  branch: master

3、在Git Bash中输入$ hexo clean && hexo g && hexo d命令。该命令为三条命令的合并：清理本地缓存->重新编译生成静态页面->上传站点内容至GitHub仓库。
4、此时在浏览器输入：https://youname.github.io就能访问了。比如我的为https://kcrason.github.io。至此，免费的个人博客算是完成了，如果你想使用自己的域名。那么就要花一点钱买一个域名了。下面讲如何将现有的站点绑定自己购买的域名。

将Hexo站点绑定新的域名

域名购买

1、本人是在阿里的万网上购买的，阿里巴巴还是不错的。现在买.com域名送一个.xyz的域名。

域名
成功购买域名后，先在站点的source路径下建立一个名为CNAME的文件，比如我的路径为D:\kcrason.github.io\source。注意文件名称必须大写。然后在文件中填写你的域名（去掉前面的www）。如：我申请的域名为：www.kcrason.com，就只要在文件中填写kcrason.com即可。
2、打开Git Bash，输入$ hexo d命令，将CNAME上传到GitHub的仓库中。

域名解析

打开阿里云后台，打开你所购买的域名列表，点击指定域名右边的解析。然后添加解析。

第一个解析，记录类型选择CHAME，主机记录为@，记录值为youname.github.com（也就是你所建立的站点域名）。其他默认即可。
添加@解析
再次点击添加解析，记录类型选择CHAME，主机记录为www，记录值为youname.github.com（也就是你所建立的站点域名）。其他默认即可。
添加www解析
最后，等待几分钟，输入新的域名，发现可以访问啦！