使用hexo和coding建立靜態博客站點

背景

由於工作性質的原因，做技術的總想記錄和分享一下自己的學習和成長歷程，向這世界證明我來過。寫文章，發博客，一開始使用51cto，廣告太多，看起來讓人很痛苦；接着試用了博客園，廣告少一些，但感覺還是不對；接着是一些國內知名的技術博客平台，都沒有找到自己特別喜歡的。

於是決定自己搭建一個博客，作為一個運維，使用51cto搭建一個wordpress簡直so easy，但是wordpress對markdown的支持不是很好，看着別扭。此外，這樣就需要有自己的服務器，成本有點高，而且還要維護，放棄了。

去知乎上找了一下，決定用免費的資源來搭建自己的博客。使用coding pages, hexo, hexoadmin建立靜態博客站點.

一開始我部署在github pages上 (demo)，但是在國內訪問較慢，並且無法被百度收錄。
於是就選擇了國內的coding (demo)，訪問速度快多了。

解決的問題

1. 訪問速度慢
   由github pages 切換到 coding pages

2. markdown圖片插入
   使用圖床結合七牛免費空間，或者hexo admin by WangFan 結合七牛免費空間.
   

正文開始
系統環境：CentOS 7

安裝nodejs

Node.js是一個基於Chrome JavaScript運行時建立的平台， 用於方便地搭建響應速度快、易於擴展的網絡應用。

Linux下Nodejs安裝

安裝hexo

hexo官方文檔
參考1 hexo安裝較詳細
參考2 整個過程較詳細
參考3 搭建Hexo博客始末

主題

我使用的是next主題，next官方文檔 十分詳細，大部分的設置都可以找到。

hexo主題NexT的標簽與分類

# 創建標簽頁
$ hexo new page tags
# 創建分類頁
$ hexo new page categories

Hexo之next主題設置首頁不顯示全文

最簡單配置方法：在博客正文中增加

coding pages

coding官方文檔
在 Coding 上搭建 Hexo 個人博客
Hexo靜態博客免費部署到Coding托管平台全過程

hexo admin 靜態博客的后台管理程序

hexo admin官方文檔

官方版本略顯簡陋，功能單一。
簡略使用方法

npm install --save hexo-admin-yf
hexo server
open http://localhost:4000/admin/

---

hexo admin by WangFan 靜態博客的后台管理程序升級版

這里推薦一個經過優化和擴展的項目github，結合七牛，可以快速在markdown中插入圖片。

簡略使用方法，詳情參閱github

npm install --save hexo-admin-yf
hexo server
open http://localhost:4000/admin/

后期維護

更換電腦后的維護

1. 哪些文件是不必拷貝的：
   首先是.git文件，無論是在站點根目錄下，還是主題目錄下的.git文件，都可以刪掉。
   node_modules（在用npm install會重新生成）
   public（這個在用hexo g時會重新生成）
   .deploy_git文件夾（在使用hexo d時也會重新生成）
   db.json文件
   總結：.git/，node_modules/，public/，.deploy_git/，db.json文件需要刪除。

2. 切換目錄到新拷貝的文件夾里，使用 npm install 命令，進行模塊安裝。很明顯我們這里沒用hexo init初始化，不必用hexo init去整體初始化，如果不慎在此時用了hexo init，則站點的配置文件_config.yml里面內容會被清空使用默認值，

3. 安裝其他的一些必要組件，如果在node_modules里面有的，就不要重復安裝了：

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 hexo d來部署
npm install hexo-generator-feed --save 建立RSS訂閱
npm install hexo-generator-sitemap --save 建立站點地圖
npm install hexo-generator-searchdb --save 搜索

---

擴展

1 1小時編寫一個支持七牛上傳的 markdown 客戶端1 (技術實現篇）
2 Hexo的版本控制與持續集成
3 在線音樂測試
4 Hexo插入背景音樂的正確姿勢 音樂列表播放
5 從零開始制作 Hexo 主題
6 Yelee 主題使用說明