使用Hexo框架及Next主題搭建我的博客之折騰過程

​ 一直以來都有搭建我的博客的想法，以前也使用過其餘免費的在線博客，可是總感受沒有本身搭建的爽。用那些在線博客就好像是租房子，老是要受到房東的各類條條框框的限制，而後就是各類廣告啥的，主題風格也有限。而若是是本身開發個博客網站應用的話，就好比建房子，自由度是最高的。不過維護成本較高，有點大材小用。因此最終選擇了這種能夠選擇框架，自定義功能，維護博客內容，而後託管到第三方的平臺上面的形式，就比如如買房子。總之，在參考了衆多網友的意見後，博主選擇了基於Hexo框架和NexT主題來搭博客。而具體要如何選擇一個適合本身的博客，能夠參考此連接。最後搭建完成的成果——請進傳送門。

<!-- more -->

搭建過程

註冊託管網站

​ 首先，博客發佈後要放到哪一個平臺上？這是一個問題，由於這個關係到博客的訪問方式。不少人選擇放到GitHub上，而後使用GitHub Pages來託管靜態網頁。But，因爲GFW的存在，以及百度不能抓取GitHub上面的推送（其實也能夠，不過須要一些插件），致使國內用戶訪問老是不那麼友好；還有一點就是若是想要須要在多臺電腦都能支持更新博客的，就須要把本地的Hexo相關的網站源碼也放到遠程倉庫上，而GitHub只能存放公開的倉庫，源碼中可能有一些AccessKey，AccessId之類的東西最好仍是放到私有倉庫中來保證安全。So,博主最終選擇了碼雲來託管博客靜態網頁以及存放源碼。固然還有其餘選擇，好比GitLab、Coding等等。

安裝相關包及工具

​ 安裝博客須要的工具及框架網上已經有不少教程了，這裏就再也不贅述。

• 安裝Git
• 安裝Node.js
• 安裝Hexo
• 安裝NexT主題
• 安裝Markdown編輯器(博主使用的是一款小衆的編輯器Typora，在windows和Mac下都很好用，並且免費~)

基本的Hexo命令

hexo init [folder]

新建一個網站。若是沒有設置 folder ，Hexo 默認在目前的文件夾創建網站。

hexo new "post_name"
縮寫hexo n "post_name"

新建一篇文章，引號中的爲文章名稱。

hexo generate//生成靜態文件
縮寫 hexo g
hexo g -d//-d,--deploy 文件生成後當即部署網站

hexo server//啓動本地服務器查看效果
縮寫hexo s//-p,--port 重設端口
hexo s -g//啓動服務器前先生成靜態文件

默認url:http://localhost:4000/

hexo deploy//部署網站
hexo d -g//部署以前預先生成靜態文件

hexo clean

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

進行個性化設置

​ 安裝完須要的工具後，就能夠開始進行個性化設置了。 ​ 首先，能夠參考NexT官方文檔進行基本的配置，設置語言、菜單、頭像、網站名稱、站點描述等等。按照文檔中的的進行修改。須要注意的是配置文件主要有兩個，一個是Hexo的站點配置文件_config.yml，一個是NexT的主題配置文件themes\next\_config.yml。 ​ 固然，只有以上這些基本的配置是遠遠不能知足咱們的個性化需求的。還有一些功能好比文字統計、站點推送、添加評論、修改樣式等，就須要使用各類插件了。具體能夠參考hexo的next主題個性化教程:打造炫酷網站。

添加站內搜索功能

1. 在本地的博客目錄下安裝搜索包

npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save

1. 打開站點配置文件，增長如下內容

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

1. 打開主題配置文件，啓用本地搜索功能

# Local search
local_search:
  enable: true

使用七牛雲作圖牀

註冊七牛雲平臺帳號

{% qnimg 七牛雲.png title:七牛雲 alt:七牛雲 'class:' extend:?imageView2/2/w/450 %} 首先到七牛雲網站上面註冊一個帳號（還須要進行身份認證），而後新建存儲空間，具體操做可參看官方文檔。須要注意的是七牛雲提供的免費服務是有必定額度限制的，超過限制就須要收費了。免費額度爲：

• 下載流量10G/月
• 文件存儲空間10G
• api請求次數GET請求100萬次/月，put/delete/post請求總共10萬次/月

安裝hexo-qiniu-sync插件

npm install hexo-qiniu-sync --save

在站點配置文件添加：

qiniu:
  offline: false
  sync: true
  bucket: blogwenbo
  //這裏將其註釋掉，不註釋，執行hexo g報錯
  # secret_file: sec/qn.json or C:
  access_key: your access_key
  secret_key: your secret_key
  // 上傳的資源子目錄前綴.如設置，需與urlPrefix同步
  dirPrefix: static
  //外鏈前綴
  urlPrefix: http://p2zukkwm9.bkt.clouddn.com/static
  //使用默認配置便可
  up_host: http://upload.qiniu.com
  //本地目錄
  local_dir: static
  // 是否更新已經上傳過的文件(僅文件大小不一樣或在上次上傳後進行更新的纔會從新上傳)
  update_exist: true
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css

而後在文章中使用如下格式添加圖片:

{% qnimg 七牛雲.png title:七牛雲 alt:七牛雲 'class:' extend:?imageView2/2/w/450 %}

具體的圖片格式設置能夠參考官方文檔 最後，只有使用hexo s或hexo g命令，hexo-qiniu-sync就會自動上傳圖片到圖牀上。

結語

原本是想要把搭建博客過程當中的遇到的一些坑給寫出來，然而由於實在是太懶了，博客搭建好了快一個月纔開始寫這篇博客的。。不少安裝細節都忘了:cry:，並且文筆也很差。之後有想到的問題再慢慢補充吧。只能說寫博客仍是須要很大的耐心和精力的，但願能堅持下去！