很多人都想搭建自己的博客扼菠，但是奈何技術有限，服務器部署都弹，HTML娇豫，域名解析，等等畅厢，這一大堆東西可真有的折騰。

但是如果有這樣一個機會氮昧，不需要太復雜的操作框杜，不要服務器，不要域名袖肥，不用寫html咪辱，你愿意去嘗試嗎？

可以先看一下我自己的http://wapchief.github.io
背景圖有點大椎组，3M多油狂，可能加載比較慢，但是一進去能看到默認的有個背景寸癌，然后是默認背景慢慢被覆蓋的情況专筷。
當時也是費了半天功夫才搭建好，在這篇文章中會詳細介紹整個流程蒸苇，盡量避免入坑吧磷蛹，但要是真是你自己給自己挖坑那就沒辦法了。

搭建的時候也是看著別人的教程一點點跟進溪烤，但是都有缺陷味咳。
比如分支的創(chuàng)建，和私人域名的解析檬嘀，有這方面的教程但是都不是太完善槽驶，有些只是教你搭建但是后期沒有考慮換電腦，換環(huán)境的情況鸳兽。包括后期維護等等掂铐。

這是我github上的源碼，為了便于理解贸铜。本文相關部分也會結合源碼進行講解堡纬。有不清楚的地方歡迎提問，盡我能力給大家解決（畢竟我不是專業(yè)的）蒿秦。
https://github.com/wapchief/wapchief.github.io

優(yōu)點
1烤镐、不需要服務器，github免費提供的托管服務
2棍鳖、不需要域名炮叶，github同樣提供了一個.io的域名
3碗旅、不用自己寫xml、hexo提供了很多開源的博客模板镜悉。
4祟辟、便于維護更新，換風格直接換模板就行侣肄。

進入正題###

• 安裝相關工具#####

1旧困、安裝Node.js
https://nodejs.org/dist/v7.4.0/node-v7.4.0-x86.msi
https://nodejs.org/dist/v7.4.0/node-v7.4.0-x64.msi
選擇需要的版本下載，分別是32位和64位稼锅。下載后安裝一直默認下一步就行吼具。
2、安裝Git
Git-2.11.0.3-32-bit.exe
Git-2.11.0.3-64-bit.exe
打開cmd命令行(win+r 輸入cmd回車)分別執(zhí)行

node -v
npm -v
git --version

會得到相對應的版本信息（如圖）

wapchief.com

npm install hexo-cli -g

等待自動安裝完成后。輸入

hexo -v

檢查是否安裝成功
到這一步如果所有都安裝成功哮肚，并測試無問題登夫，那么本地配置已經搞定，下面開始在github上建項目了绽左。

• 在github上創(chuàng)建并設置遠程庫

注冊登錄略過悼嫉，不會的請自行百度。
登錄后點擊“+”號拼窥，選擇New repository戏蔑，下一步
在Repository name下面填寫你要創(chuàng)建的地址，這個地址是就是你的域名鲁纠，以github.io結尾总棵。例如填寫wapchief.github.io以后就在地址欄直接輸入wapchief.github.io就可以訪問網站
按照提示一步步完成創(chuàng)建。
創(chuàng)建之后改含，點擊setting設置遠程庫：
找到GitHub Pages點擊change theme選個主題select theme設置模板
等待github pages創(chuàng)建完成情龄，然后輸入你創(chuàng)建的地址測試github pager是否創(chuàng)建成功。此時頁面是空的沒有任何東西捍壤。

wapchief.com

• 初始化Hexo

創(chuàng)建一個文件夾用于存放hexo。然后右鍵該文件夾使用

git bash here

命令就可以直接定位到當前目錄鹃觉。

wapchief.com

然后使用把github上的項目克隆下來

git clone https://github.com/wapchief/wapchief.github.io.git

接著使用cd定位到克隆下來的目錄

cd wapchief.github.io

然后開始安裝相關工具

 npm install hexo --save

初始化hexo基礎配置文件专酗。初始化時間比較長，不用急盗扇，等完成后輸入

hexo init

初始化hexo祷肯。這個命令和git 倉庫命令相似沉填。意思一樣都是初始化。
接著輸入

npm install

配置node佑笋。然后輸入

hexo g

加載hexo基礎html翼闹、css、js等文件蒋纬。
在這完成后等于已經在本地創(chuàng)建了一個網頁猎荠，想查看的話，輸入

hexo s

然后相當于開啟了一個本地的服務器颠锉，會提示你拷貝url到瀏覽器法牲。
(如圖)

wapchief.com

wapchief.com

• 安裝主題

關于主題大多都是以壓縮包形式戈毒，可以去github上搜hexo theme艰猬，會出來很多，里面都有介紹埋市。

hexo-theme主題

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

等待下載完成食听。如果出現(xiàn)失敗的提示，有可能是網絡環(huán)境不好污茵。重試即可樱报。
ok，下載完主題后我們打開文件夾泞当，找到themes文件夾迹蛤，發(fā)現(xiàn)里面多了個
next

這個就是我們下載下來下來的主題文件。
接下來我們回到hexo根目錄下用記事本打開_config.yml文件襟士。

hexo s

打開瀏覽器地址欄輸http://localhost:4000/

• 修改內容

內容較多建議參考官方文檔
https://hexo.io/zh-cn/docs/configuration.html
修改完之后陋桂，可以重新執(zhí)行hexo s在瀏覽器查看效果逆趣。并確認無誤，包括以后需要添加文章章喉，或者更新主題等汗贫，都建議先在本地查看無誤再遠程部署身坐。
根_config.yml文件中

# Site
title: 網站標題
subtitle: 副標題
description: 個人簽名
author: 姓名
language: zh-Hans
timezone:

這里有幾個坑需要注意一下：

1、所有的配置“:”符號后面都要帶空格落包，否則執(zhí)行本地測試直接失敗部蛇。
2、language是設置語言咐蝇。zh-Hans是中文涯鲁。
3、如果設置zh-Hans后仍出現(xiàn)亂碼問題有序。需要更改文件的字符編碼集為UTF-8,方法很多具體抹腿，就不詳細介紹了。

_注意同時要在旭寿，根config.yml中配置自己的遠程倉庫地址

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/wapchief/wapchief.github.io.git
  branch: master

這一步很關鍵警绩，不要漏了。

• 提交項目盅称，部署

繼續(xù)在本目錄命令行
安裝部署工具（方便以后更新）
npm install hexo-deployer-git --save
1肩祥、初始化本地倉庫：
git init
2、連接遠程倉庫：
如果是第一次使用git缩膝，在使用git的時候會提示輸入用戶名和密碼混狠，用戶名是自己的注冊郵箱。
git remote add origin https://github.com/wapchief/wapchief.github.io.git
3疾层、發(fā)布hexo到github page
hexo clean && hexo g && hexo d

以后可以用以下命令部署将饺。也就是第三步

//等于一次性執(zhí)行了，清空痛黎、刷新予弧、部署三個命令
hexo clean && hexo g && hexo d

如果部署時不clean，可能之前修改的文章還存在舅逸。包括一些配置等桌肴，有時候部署完成后并沒有改變提揍，其實是緩存未清除漫谷。

部署完成后無需提交代碼。
建議重新創(chuàng)建一個倉庫命雀，將本地代碼同步到新的倉庫旗笔，并設置好忽略文件彪置，方便后續(xù)遠程管理。

• 進階-綁定域名

域名可以自行去阿里云蝇恶，景安等網站購買拳魁。一般都有系統(tǒng)提示步驟。
拿到域名之后撮弧，進行解析潘懊，推薦使用dnspod免費解析姚糊。
具體使用方法：
1、注冊登錄dnspod之后授舟，添加域名救恨，然后解析，添加兩條記錄

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

3、登錄github奢啥，找到項目秸仙，設置setting，找到GitHub Pages

4桩盲、在master分支下的CNAME.MD文件寫入注冊的域名

再次訪問差不多就好了寂纪，如果延遲的話，可能解析立馬不會生效赌结。需要等會兒才能看到弊攘。

自己創(chuàng)建博客已經有些日子了，現(xiàn)在朋友想搭建博客姑曙，正好自己接觸過，也整理一下迈倍，以后方便查看伤靠。所有的流程都在這里。
對于有git啼染、nodeJs基礎的人來說搭建起來可能也就是十幾分鐘的事宴合，但是對于沒接觸過的就要費很大工夫。如果遇到問題歡迎留言迹鹅。

跳坑指南：
使用hexo+github搭建個人博客遇到過哪些坑