Github Pages+Hexo+阿里云域名绑定

1.Github Pages

Github Pages可以免费托管，所以把博客托管到github上。

首先，创建一个github仓库，仓库的命名格式为：yourusername.github.io，然后根据提示进行下一步。

2.Hexo搭建博客

本博客中使用了Anisina的主题，所以会详细介绍下按照Anisina主题搭建的步骤。

1.准备工作

1.首先要安装下node.js（官网下载）,如果已经安装可以跳过。
2.安装git（官网下载）
3.安装Hexo：

$ npm install -g hexo

安装成功后，使用version命令查看是否安装成功

& hexo version

4.本地静态hexo博客

新建一个文件夹，作为你博客文件的根目录
命令行进入该文件夹下,输入以下命令，生成模板：

$ hexo init

模板生成后，输入以下命令：

$ npm install

最后可以运行hexo s命令查看是否搭建成功

2.下载主题

在 themes 文件夹内，新增一个Anisina文件夹，并修改 _config.yml 内的 theme 设定theme: Anisina，即可切换到Anisina主题。然后把Anisina主题的内容clone到刚刚新建的Anisina文件夹下:

git clone https://github.com/Haojen/hexo-theme-Anisina.git themes/Anisina

3.配置博客

1.配置博客封面图

在需要单独设置封面图的文章所对应的md文件里，添加配置header信息如下:

header-img: http://upload-images.jianshu.io/upload_images/196894-95c037286850b891.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
cdn: 'header-off'

2.用户信息配置

注意：在主题的_config.yml中配置一下信息，而非博客根目录下的_config.yml中配置。ps:不过我的有些没起作用的就放到了根目录下的_config.yml中。

user_name: your name
user_avatar: your avatar
user_location: your location
user_description: about you introduction

// this info will show About page
user_contact: 
user_introduction:

// config you share info
//以下的username请都改为自己的
weibo_username: vivian8725118
zhihu_username: vivian8725118
github_username: vivian8725118
twitter_username: vivian8725118
facebook_username:  
linkedin_username:

3.创建About页面

在根目录下的source文件夹里创建一个about文件夹，然后在about文件夹里新建index.md文件,在文件中添加如下代码，并保存：

title: about
date: 2017-09-11 23:12:50
layout: about

需要提一下的是，作者还没有支持对About页面内容的修改，所以本博客搭建的时候，直接在themes/Anisina/layout/about.ejs中修改的内容。about.ejs里边是html的格式，可以参照里边默认的html代码，修改为自己的内容。例如下面是修改为自己的博客地址：

<li>简书《程序员》专题主编：<a target="_blank" href="http://www.jianshu.com/u/4a4eb4feee62"> 小彤花园 <span class="glyphicon glyphicon-link"></span> </a></li>
<li>掘金联合编辑：<a target="_blank" href="https://juejin.im/user/5645935a00b0814da4eacf92"> 小彤花园 <span class="glyphicon glyphicon-link"></span> </a></li>
<li>GitHub: <a target="_blank" href="https://www.github.com/vivian8725118"> vivian8725118 <span class="glyphicon glyphicon-link"></a></li>
<li>CSDN: <a target="_blank" href="http://blog.csdn.net/vivian8725118"> vivian陈薇 <span class="glyphicon glyphicon-link"></a></li>

4.创建Works页面

在根目录下的source文件夹中创建works文件夹，如上新建一个index.md，添加如下内容到文件中，并保存：

title: My Works
date: 2017-09-11 23:16:50
layout: works

然后在source文件夹下创建一个_data文件夹，打开文件夹，新建project.json文件，文件格式如下:

{
  "Apple 官网临摹": {
    "title": "Apple 官网临摹",
    "subTitle": "根据美版apple官网临摹",
    "img_link": "http://o7bkkhiex.bkt.clouddn.com/item-apple.jpg",
    "use" : ["jQuery"],
    "link": "http://haojen.github.io/apple-linmo/",
    "data":"2016.3",
    "direction": "临摹 2016 年三月份 Apple 美版单页面。"
  },
   "Anisina (阿尼丝娜)": {
    "title": "Anisina",
    "subTitle": "基于 Hexo 制作的个人博客主题",
    "img_link": "http://o7bkkhiex.bkt.clouddn.com/Anisina.png",
    "use" : ["jQuery","Bootstrap","Node.js","EJS","Hexo","SASS"],
    "link": "http://haojen.github.io/",
    "data": "2016.5",
    "direction":
        "Hexo 是某位台湾友人基于 Node.js 编写的博客框架"
  }
}

5.添加评论系统

主题中支持来比力的配置，所以在_config.yml配置文件中添加两行配置代码即可。

use_livere: true
livere_uid: 你的来比力的注册uid

那么，如何找到livere_uid呢？
首先，在来必力的网站上注册一下，然后登陆，找到”管理页面“，左边菜单中找到“代码管理”，会看到如下代码：

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC8zMDgxMi83MzY0">
<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

代码中的data-uid就是我们所需要的livere_uid。

6.添加百度统计

主题中添加了百度统计的js代码，在配置文件中直接添加track_id即可:

ba_track_id: your track id

如何找到ba_track_id？
同理，在百度统计网站注册登陆，在【管理】菜单中找到【代码管理】->【代码获取】，可以看到一段js代码。

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d6237b3ef7ace3d92cfaf9169538b06d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

hm.src = "https://hm.baidu.com/hm.js?d6237b3ef7ace3d92cfaf9169538b06d";这句代码中?后边的这一串就是我们所需要的ba_track_id。

7.部署Hexo博客

建站

hexo init yourname
cd yourname 
npm install

配置_config.yml的部署:

deploy:
  type: git
  repo: http://github.com/yousername/yourusername.github.io
  branch: master #默认master

清除缓存

$ hexo clean

生成静态网页

$ hexo g

本地查看效果，执行完后可以通过http://localhost:4000查看本地效果

$ hexo s

部署到git

$ hexo d

3.绑定阿里云域名

之前在阿里云买了域名，域名购买成功之后要等待实名认证。

1.添加CNAME文件

在根目录下的source文件夹下新建CNAME文件，没有后缀。

在Sublime Text中打开CNAME文件，在里边添加你的域名信息，如图：

保存之后，重新部署到github pages上。

2.给github项目添加

在项目的Settings中，添加Custom domain到自己的域名：

3.给域名添加解析记录

1.ping你自己的yourname.github.io获取到ip地址：

2.打开域名的解析列表，添加两条解析记录：

更换之后，可能需要等一段时间才能生效，差不多就大功告成啦。

¥打赏5毛

{% if theme.mob_share.enable %} {% endif %}

1.Github Pages
2.Hexo搭建博客
3.绑定阿里云域名