自己動手搭建有逼格的部落格

冰鑑IT發表於2017-12-19

很早以前就聽說可以利用github來搭建一個屬於自己的部落格，但卻遲遲沒有動手，現在終於有機會嘗試一把，查了點資料終於弄好了，便在此記錄一下，希望可以幫助有需要的人。先放上我搭建好的部落格地址：GItHub部落格地址，感覺還不錯。

一、搭建部落格的前提

  1. 有自己的GitHub賬號，沒有的話可以自己去註冊一個

  2. 安裝了Git，沒有安裝Git的人可以先去百度一下怎麼安裝Git，至於使用，沒使用過也可以。

  3. 會使用Markdown，這個主要是寫部落格用，不會可以去搜尋相關的教程。

注：關於Git和Github的使用教程，這裡強烈推薦stormzhang的部落格上的教程，這裡放上鍊接stormzhang部落格Git和GitHub教程,內容易懂，非常適合我們學習。

二、利用GitHub搭建部落格的原理

GitHub提供了一種GitHub Pages的服務，允許使用者可以在上面託管自己餓靜態網頁，並分配一個域名，並且可以繫結自己的域名。這樣就免去了我們購買維護伺服器和資料庫的麻煩。本篇教程主要是使用Hexo這個高效的部落格框架來搭建屬於我們自己的部落格，Hexo可以將Markdown格式的文字快速渲染成HTML頁面。

三、安裝NodeJS

因為Hexo這個部落格框架是基於NodeJs的，所以我們必須先安裝NodeJS環境才能在後面使用我們的Hexo來搭建部落格。這裡放上NodeJS下載地址NodeJS下載地址，大家可以根據自己的電腦選擇合適的版本，安裝的話很簡單，之間點下一步就可以安裝完成。

四、安裝Hexo部落格框架

此處的安裝使用NodeJS的包管理工具npm來安裝，滑鼠右鍵選擇Git Bash Here,可以開啟Git的命令列,然後在其中執行如下命令:

npm install hexo-cli -g
npm install hexo --save
#如果命令無法執行，可以嘗試更換npm源
npm install -g cnpm --registry=https://registry.npm.taobao.org
複製程式碼

五、初始化Hexo配置

首先在自己的碟符下新建資料夾Blog，在該資料夾下面再建一個Hexo資料夾，進入Hexo資料夾中，滑鼠右鍵開啟Git命令列，執行如下命令:

hexo init
npm install
複製程式碼

執行完畢後就會在當前目錄下生成一些資料夾，這便是我們部落格需要的檔案。

六、安裝Hexo外掛

為了使我們的部落格可以在本地渲染生成HTML網頁，然後部署到GitHub上，我們需要安裝下面的外掛，右鍵開啟Git命令列在其中執行如下命令:

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save
複製程式碼

安裝完上面的外掛我們的部落格其實已經可以在本地檢視了，是不是有點激動啊，在Git的命令列中執行如下命令:

# 生成靜態頁面
hexo g
# 啟動本地Node伺服器
hexo s
複製程式碼

然後我們在位址列中輸入localhost:4000,回車就可以看到我們的部落格啦。

七、部署部落格到GitHub上

  1. 我們首先登陸我們的GitHub賬號

  2. 在GitHub上新建一個倉庫，倉庫名稱必須為<GitHub賬號名>.github.io

  3. 新增自己的SSH祕鑰到自己的GitHub賬戶，以便於我們可以通過Git將自己的部落格程式碼上傳到GitHub(這一步在我們上面推薦的stormzhang的部落格上也有講，這裡不再贅述)

  4. 獲得我們第二步建立的部落格倉庫的https地址，注意，這裡是https地址，不是git地址，複製該地址

  5. 修改部落格配置檔案，我們開啟部落格所在目錄，找到_config.yml檔案，開啟在裡面找到如下程式碼並修改如下:

deploy:
  type: git
  repo: <你的部落格倉庫的https地址>
  branch: master
複製程式碼

注意：上面repo和你的部落格地址之間有一個空格的間隔

  1. 在部落格所在目錄右鍵開啟Git命令列，輸入如下命令:
hexo g -d
複製程式碼

命令執行過程中可能會讓你輸入你的github賬號密碼，輸入即可，只需要輸一次 7. 檢視部署效果，等命令執行完之後我們在瀏覽器中輸入https://<你的github使用者名稱>.github.io就可以看到線上部署效果了，是不是很激動啊

八、給部落格更換主題

Hexo部落格框架預設提供了一套主題，如果你覺得不好看，可以去Hexo的主題官網去下載自己喜歡的主題並更換，當然你也可以自己寫一套自己的主題，下面說一下如何為我們的部落格更換主題:

  1. 開啟Hexo的主題網站Hexo主題網站

  2. 選擇我們喜歡的主題，點選會跳轉到主題的GitHub地址，然後複製該主題的https地址，然後我們可以開啟我們部落格所在目錄的themes資料夾下，然後右鍵開啟Git命令列，執行如下命令:

git clone <主題的https地址>
複製程式碼

執行完之後你的themes目錄下就會多出一個資料夾 3. 修改配置檔案，開啟部落格根目錄下的_config.yml檔案，找到theme:後加一個空格然後在後面寫上主題的名字，如下:

theme: yelee
複製程式碼
  1. 本地檢視效果，在部落格根目錄下右鍵開啟Git命令列，執行如下命令:
hexo g
hexo s
複製程式碼

然後在瀏覽器中輸入localhost:4000即可檢視效果

  1. 部署新主題到GitHub上，執行如下命令:
# 先清除伺服器快取
hexo clean
hexo g -d
複製程式碼

其實部落格的注意還可以自定義配置許多內容，這需要根據具體的主題配套的說明進行主題的修改，這裡不再贅述。

九、釋出自己的文章

  1. 新建檔案的md檔案，在部落格根目錄下之執行如下命令:
hexo n "文章名稱"
複製程式碼

  1. 寫部落格，在部落格根目錄/source/_posts開啟建立的md檔案，在其中寫Markdown格式的文章

  2. 釋出文章到GitHub，在部落格根目錄右鍵開啟Git命令列執行如下命令:

hexo g -d
複製程式碼

十、給部落格繫結自己的域名

GitHub預設讓我們通過https://<github使用者名稱>.github.io來訪問我們的部落格，但我們可以選擇繫結自己的域名，下面說下具體步驟

  1. 申請自己的域名，我們可以到萬網、騰訊雲、西部數碼等許多網站去申請一個自己喜歡的域名，貌似現在的域名都是需要備案後才能正常訪問，一般的這種網站都會提供免費備案服務，過程略繁瑣，但一般的官網都會一步步教你怎麼把域名備案的，這裡不再贅述。

  2. 修改域名的DNS解析，騰訊雲的不用修改，如果域名是從其他網站申請的，那我們必須將域名伺服器修改為如下:

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net
複製程式碼

  1. 開啟DNSPOD官網，DNSPOD官網，註冊一個賬號，然後將自己的域名新增進去

  2. 獲得你部落格的ip地址，我們開啟命令列，在其中輸入ping <你的github賬號>.github.io，然後就可以看到自己部落格的ip了，複製下來

  3. 新增域名解析，到DNSPOD網站上，找到剛新增的域名，點選新增解析，然後分別新增兩條解析，他們的主機記錄分別是@和www，記錄值都是我們上一步獲得的ip，貼上進去就新增成功了。

  4. 在部落格根目錄/source目錄下建立一個名為CNAME的檔案，然後在其中寫上自己的域名，例如我的:

www.codekong.cn
複製程式碼

然後切換到部落格根目錄，右鍵開啟Git命令列執行提交命令:

hexo g -d
複製程式碼
  1. 等待最多72小時，我們就可以通過我們自己的域名訪問我們的部落格啦。

結語

以上就是我搭建自己部落格的一些記錄，希望可以幫到需要的人。

相關文章