Github Pages+Hexo+阿里雲域名繫結

小彤花園發表於2017-09-19
GithubHexo阿里

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.下載主題

git clone https://github.com/Haojen/hexo-theme-Anisina.git themes/Anisina複製程式碼

3.配置部落格

1.配置部落格封面圖

將img的alt屬性設定為post-cover即可

2.使用者資訊配置

注意：必須在主題的_config.yml中配置一下資訊，而非部落格根目錄下的_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
weibo_username: 
zhihu_username: 
github_username:
twitter_username: 
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中修改的內容。

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複製程式碼

6.新增百度統計

主題中新增了百度統計的js程式碼，在配置檔案中直接新增track_id即可:

ba_track_id: your 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.開啟域名的解析列表，新增兩條解析記錄：

更換之後，可能需要等一段時間才能生效，差不多就大功告成啦。

相關文章