序

作為一名合（zhuang）格（bi）的程式猿，經常寫點東西，肯定少不了各種網站、部落格，通俗的CSDN，文藝的簡書，強大的GitHub，以及微信、掘金、知乎等等風格迥異的平臺。不過，再多的地方，也容不下一顆想捯飭的心，不管什麼網站，都有自己固定的模板，統一的風格，這怎麼能滿足程式猿的一顆躁動的心？

那就自己動手，利用各種開源工具，自己搭建一個屬於自己的個人部落格吧。

下面記錄的是自己搭建部落格的每個步驟，儘量將所有細節記錄下來，為有同樣好奇心的小夥伴給個參考

準備

搭建部落格，前期需要四個工具

• Hexo:Hexo快速、簡潔且高效的部落格框架
• Node.js:建立在Chrome上的JavaScript執行引擎
• Git:一款免費、開源的分散式版本控制系統
• GitHub:國內一款面向開發者的雲端開發平臺，提供程式碼託管，執行空間，質量控制，專案管理等功能

1. 安裝

安裝必要的配置環境，如果已經安裝過，可以跳過

• 1.1 安裝Git
  Git官網
  
  找到Download,安裝自己對應的系統版本，系統會自動判定你當前版本，推薦下載，如果沒有推薦，那就自己選擇吧。
  下載成功安裝的步驟我就不貼了，

同理系統依然會判定你的系統並給出穩定推薦的版本和嚐鮮版，兩種，供君選擇。下載安裝步驟同樣省略

• 1.3 GitHub賬號註冊
  GitHub賬號註冊過程很簡單，註冊流程就省略，完成之後，就開始建立部落格了

2.建立個人部落格

註冊完成之後,點選頭像左側的+號, —>New repository，建立新倉庫

因為我們建立的是個人網站，所以倉庫的名稱需要安裝GitHub個人網站專案的規定來寫。
規則就是：

比如我的GitHub使用者名稱是dazhaoDai，那我就要填寫 dazhaoDai.github.io。然後選擇Public模式，接著點選建立倉庫按鈕。

建立成功後，進入新倉庫，點選Settings，往下找到

選擇一個主題，之後一個託管在GitHub上的部落格就就搞定了，大概半個小時後，例如我的個人部落格：https://dazhaoDai.github.io/就可以訪問了,注意：將其中的使用者名稱換成你建立的倉庫名

這時候，你的確可以訪問自己部落格了，但是我們的部落格訪問地址是：userName.github.io，是不是一點都不滿足？想用自己個性化的域名作為自己的部落格地址？

接下來，就需要我們去購買域名，配置成自己個性化的域名地址

域名

購買域名有很多途徑，例如阿里雲、騰訊雲等，這裡以阿里云為例。
域名的價格差別比較大，我們是做個個人部落格，所以買個便宜的字尾域名，如圖所示，價格差別較大

購買域名很簡單，但是一定要注意的是，選擇的域名字尾一定是可以備案的，不然只能是註冊保護，無法使用，在購買時，阿里雲會有提示資訊：

例如我註冊的是 outofmemory.top,具體購買流程就不寫了。

解析

購買完成後，選擇管理控制檯--域名--域名服務--域名列表，看到你購買的域名，選擇解析

參考下圖，修改下面資訊
分別新增兩個A記錄型別,

一個主機記錄為www,代表可以解析 www.outofmemory.top的域名
另一個為 @, 代表 outofmemory.top
記錄值就是我們的GitHub倉庫地址：userName.github.io，當然我們也可以填寫IP地址，使用終端，ping一下：

紅框內就是我們倉庫的具體IP地址，所以根據自己選擇，可以填寫userName.github.io，也可以填寫IP地址

這裡，我們已經完成了域名解析工作，回到GitHub，完成域名和GitHub Pages 的繫結

繫結

回到Github, 選擇我們建立的個人域名倉庫，選擇Settings，找到GitHub pages，將我們購買的域名地址填入下方 Custom domain， 然後儲存，這時候我們的GitHub pages 和 域名就繫結到一起。

到了這一步，我們已經完成了個人部落格的建立，不過你肯定有疑問了，為什麼你的部落格主題那麼個性？別急，下面就來試試

Hexo

Hexo官方文件
前面我們已經安裝了Git、Node.js，然後使用npm，安裝hexo:

$ npm install -g hexo-cli

安裝完畢，我們就需要對自己的倉庫進行配置，首先使用Git，將自己的倉庫克隆到本地

• 克隆倉庫
  複製倉庫地址，在本地建立一個個人部落格的資料夾，例如GitHub_Blog，進入資料夾，使用git命令：

git clone [email protected]:dazhaoDai/dazhaoDai.github.io.git

• 配置Hexo
  使用命令列

$ hexo init <替換為當前部落格資料夾，例如我的是/Users/dai/Documents/android_dai>
$ cd /Users/dai/Documents/android_dai
$ npm install

新建完成後，指定資料夾的目錄如下：

.
├── _config.yml #配置資訊
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts #部落格內容
└── themes #主題

我們大部分操作都在 _config.yml中，開啟 _config.yml,檢視資訊：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: T9'S Develop Blog    #你部落格的標題
subtitle: 不僅有工作，更有生活  #顯示在瀏覽器上搜索的時候顯示的標題
description: 喜歡探索未知,保持好奇心  #描述
author: daidai   #顯示作者
email: [email protected]  #郵箱
language: zh-Hans    #語言
timezone: Asia/Shanghai   #時區

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://outofmemory.top      #這個就是填寫你的部落格地址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
         Android：android
         Hexo： Blog
        
tag_map:
      android 

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
#要修改主題，就修改theme
theme: hexo-theme-next    

 #GitHub倉庫地址
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/dazhaoDai/dazhaoDai.github.io.git  
  branch: master

我們要修改的就是有註釋的地方：

# Site
title: T9'S Develop Blog    #你部落格的標題
subtitle: 不僅有工作，更有生活  #顯示在瀏覽器上搜索的時候顯示的標題
description: 喜歡探索未知,保持好奇心  #描述
author: daidai   #顯示作者
email: [email protected]  #郵箱
language: zh-Hans    #語言
timezone: Asia/Shanghai   #時區


# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://outofmemory.top      #這個就是填寫你的部落格地址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:


#要修改主題，就修改theme
theme: hexo-theme-next    

 #GitHub倉庫地址
deploy:
  type: git
  repo: https://github.com/dazhaoDai/dazhaoDai.github.io.git 
  branch: master

• 修改CNAME
  最後一步，只需要修改 我們github倉庫下的 CNAME 檔案。
  選擇 CNAME 檔案，使用的註冊的域名進行替換,然後提交儲存
  
  這時，輸入你自己的域名，就可以解析到你的主頁了。

• 新增文章
  將上面的資訊都改為自己的資訊，既然配置好了，當然要新寫個文章了，進入source/_posts，新建一個Markdown檔案，關於的使用，這裡介紹的很詳細獻給寫作者的 Markdown 新手指南，

比如我新建一個 hello.md,內容很簡單

儲存之後，就需要把新增的部落格上傳到GitHub了

上傳到GitHub

在GitHub_Blog檔案下，執行命令(建議每次都按照如下步驟部署)：

hexo clean
hexo generate
hexo deploy

搞定！，這時候去瀏覽器輸入你的域名，outofmemory.top是不是成功看到你的部落格了？

風格不喜歡？簡單，去更換主題，去Hexo檢視眼花繚亂的主題

這個主題不錯

找到GitHub地址

去前面GitHub_Blog,進入themes,克隆這個主題

然後去_config.yml 修改主題,使用倉庫名作為主題名

12#要修改主題，就修改theme
theme: hexo-theme-yelee  

儲存，然後將更新重新上傳到GitHub

hexo clean
hexo generate
hexo deploy

成功！

TODO

後續將繼續介紹如何新增 網站統計、評論、標籤、友鏈等功能，希望大家繼續關注