博客從WordPress遷移到Hexo

偶然的機會看到了Hexo，就深深被吸引了，加載速度快，支持Makedown,還支持部署到Github上。做爲一位PHP程序員，以前的博客用的是PHP開發的WordPress,其實感受WordPress也不錯，找了個漂亮的WordPress模板，加上七牛的CDN緩存，速度上，還算滿意。既然對WordPress感受不錯，那爲何要把博客從WordPress遷移到Hexo上呢。第一，好奇，之前就常常據說Node.js有多麼多麼好，要把PHP給替代掉什麼的，雖然Node.js的做用只是用來生成靜態頁面的，但能夠感受到，生成速度的確快；第二，支持Makedown，早就想學習Makedown了，正好邊寫博客，邊學Makedown；第三，支持部署到Github上，之前WordPress都是部署到阿里雲的雲服務器ECS上的，還單獨買了一個雲數據庫RDS，一個月得一百多塊的花銷，如今能夠免費地放在Github上，省了一百多塊錢，何樂而不爲呢，哈哈。。不羅嗦了，直接上步驟。。

配置環境

1.安裝Node.js
Centos之類的,yum install nodejs && sudo yum install npm
Mac OS X系統,使用brew install node 安裝一下
若是須要源碼安裝，能夠去Node官網下載,而後編譯安裝
2.安裝git
和上面同樣，yum或brew或源碼安裝一下，這裏就再也不多說。能夠參考此文檔:https://git-scm.com/book/en/v2/Getting-Started-Installing-Git 進去能夠選擇中文,

安裝Hexo

全部必備的應用程序安裝完成後，便可使用 npm 安裝 Hexo。

npm install -g hexo-cli  
npm install hexo-server --save

使用Hexo

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

瀏覽器輸入http://localhost:4000
效果圖以下:

更換主題與配置

默認的主題不是特別好看，咱們能夠在Hexo官網的主題頁選擇本身喜歡的主題，我選的是yilia。
1.安裝

cd blog
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
cd themes/yilia
git pull

2.主題修改配置
修改blog目錄下的 _config.yml ： theme: yilia

3.yilia配置

cd blog/theme/yilia
vim _config.yml

而後根據裏面的提示填寫就好了，這裏就很少說了。裏面有個多說的配置，litten可能有點沒說清楚，其實填寫的是多說站點設置裏的多說域名你填寫的部分。


我這裏以下填寫：

duoshuo: jsyzchen

4.添加Share.js

Share.js 一鍵分享到微博、QQ空間、QQ好友、微信、騰訊微博、豆瓣、Facebook、Twitter、Linkedin、Google+、點點等

編輯yilia目錄下的_config.yml

#是否開啓分享
share_jia: false
share_addthis: false
share_social: true   #這裏添加Share.js的開關

編輯yilia/layout/_partial/head.ejs文件，加入代碼

<% if (theme.share_social){ %>
<%- css('https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.13/css/share.min') %>
<% } %>

進入yilia/layout/_partial/post目錄，添加share_social.ejs文件,代碼以下

<div style="padding:0 40px 10px;">
    <!-- social-share Button BEGIN -->
    <div class="social-share"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.15/js/social-share.min.js"></script>
    <!-- social-share Button END -->
</div>

編輯yilia/layout/_partial/article.ejs文件，找到theme.share_jia和share_addthis的位置，把加載social-share的代碼放在與他們同級的位置

<% if (!index && theme.share_social){ %>
<%- partial('post/share_social') %>
<% } %>

WordPress遷移

如今咱們將WordPress的文章遷移到Hexo，若是你不須要遷移，跳過便可。
首先，安裝 hexo-migrator-wordpress 插件。

npm install hexo-migrator-wordpress --save

在 WordPress 儀表盤中導出數據(「Tools」 → 「Export」 → 「WordPress」)（詳情參考WP支持頁面）。
插件安裝完成後，執行下列命令來遷移全部文章。source 能夠是 WordPress 導出的文件路徑或網址。

hexo migrate wordpress <source>

完成以後能夠

hexo server

瀏覽器輸入http://localhost:4000 查看效果

配置Github

1.申請GitHub
GitHub直接申請一下就行了。

2.新建Repository(倉庫)

登錄Github帳號後，點擊右上角的「+」號按鈕，選擇「New repository」

在Create a new repository界面填寫格式以下圖所示: 用戶名.github.io，固定寫法

3.設置你的git用戶名和密碼

Git會根據用戶的名字和郵箱來記錄提交，GitHub也是用這些信息來作權限的處理。
git config --global user.name"這裏是你申請Github帳號時的name"
git config --global user.email"這裏是你申請Github帳號時的郵箱"

3.SSH配置

SSH配置，有些麻煩。能夠參考此文檔：https://git-scm.com/book/en/v2/GitHub-Account-Setup-and-Configuration,進去能夠選擇中文,仍是比較詳細的。
4.部署

進入blog目錄下,編輯 _config.yml，把下面的your_username換成你的github用戶名，注意冒號後面有一空格。

deploy:
    type: git
    repo: https://github.com/your_username/your_username.github.io.git
    branch: master

部署代碼到Github

1.清除緩存文件 (db.json) 和已生成的靜態文件 (public)。

hexo clean

2.生成靜態文件

hexo generate

3.部署

hexo deploy

上面二、3兩個命令能夠合起來

hexo d -g

若是你此時沒有看到一大段執行代碼，通常是SSH配置有誤。
若是成功了，你進入Github repository,就是your_username.github.io是有代碼的
此時，你在瀏覽器裏輸入http://your_username.github.io 就能夠看到你的博客了

效果展現

個人WordPress和Hexo博客對比圖:
1.原來的WordPress

2.現在的Hexo

怎麼感受變醜了呢，沒事，能省錢就行了，哈哈。。

綁定域名

雖然使用your_username.github.io能夠直接訪問博客，但若是你想用本身的域名打開博客。
1.域名解析

進入你的域名解析管理控制檯，設置主機記錄@，類型A，到IP 192.30.252.153(GitHub IP)。
我用的是萬網,設置以下:

2.GitHub設置

在github項目中，blog/source目錄下,新建一個文件CNAME，文件中寫出你要綁定的域名,好比個人是jsyzchen.com

3.部署更新文件

hexo clean
hexo g -d

而後在瀏覽器輸入你綁定的域名就能夠看到你的Hexo博客了

性能優化

所謂的性能優化，也就是把能一些圖片,js,css放入cdn裏,這樣的話加載速度會大大加快，我這裏推薦的七牛雲存儲,它有免費的額度，通常像博客這樣的系統文件不會超的，並且七牛的CDN挺不錯的，加載速度挺快。至於如何設置，能夠查看七牛的幫助文檔，你可使用七牛的鏡像存儲，這樣你就不須要把你的文件一個一個地往七牛存了，你可能還須要改些你選擇主題的源碼，就是把它之前調的圖片，js，css地址改成CDN的訪問地址就好了，這裏不在囉嗦了。

文檔推薦

1.Hexo官方文檔: https://hexo.io/zh-cn/docs/
2.Git文檔,裏面有Git介紹、安裝和使用等等，GitHub講解也有: https://git-scm.com/doc
3.Node.js官網: https://nodejs.org
4.MakeDown語法中文版: http://www.markdown.cn/

參考文章

1.HEXO+Github,搭建屬於本身的博客
2.hexo--搭建
3.Hexo在github上構建免費的Web應用

爲了更好的交流，能夠加QQ羣：415183844

碼字不容易,轉載請註明原地址，Jsyz Chen的博客：http://jsyzchen.com/2016/04/30/blog-wordpress-to-hexo/ 謝謝！