Hexo快速搭建部落格

DerekZ95發表於2017-10-26
Hexo

fate-cover
fate-cover

本文首次釋出在 碼農小呆的幻想鄉

前言

 對於酷愛嘗新的程式設計師們來說，部落格可能是為數不多的仍被廣泛使用的舊東西之一了。不論是為了技術積累，還是為了提高逼格，多數程式設計師心中都曾有過搭建部落格站的想法。

 在搭建部落格的時候，大佬或者不麻煩會死星人都喜歡擼起袖子自己幹，然而對於像我一樣的一批渣渣小白來說要脫離現成框架自己搞出個名堂來絕非易事。換工作的空檔期，忙得只剩下時間，也手擼了個部落格站，除去編碼時間，大部分的時間花在伺服器部署上，對於一名前端切圖狗來說，還是費了不少心思的，有興趣的這裡送上傳送門。

 就效果來說自己動手肯定是可以學到更多東西的，願意投入時間是值得去嘗試的，而且自己開發是可以根據需要個性化定製的，這是第三方服務不能很好地提供的。隨之而來的壞處其一是開發成本和學習成本，獨立部落格站需要一定的技術積累，有一定的門檻，並不適合所有人。其二是即便你有能力有時間做到，後期是否會花心思去維護打理也是一個問題。想起我自己一開始滿腔熱血，下定決心要搞出個完美部落格，結果七天草草收工，預先想加上的功能一個個都無疾而終，甚至到昨天域名都還沒備案。

 我以為獨立部落格站適合於自由職業者或者能夠在短時間內把自己的需要實現的大佬們，因為這兩者後期要麼有時間維護要麼不需要過多時間去維護。在部落格站搭建完成以後他們就可以把重心放回到自己的工作和生活當中，在有技術積累或者裝逼需要的時候只需要記錄、上傳這些簡單的操作。

 更加省心的選擇是成熟的第三方框架，比如本站所用的Hexo，不得不說Hexo提供的功能和樣式都是很有吸引力的，本身也不需要多少學習成本，甚至於非程式設計師也可以跟著教程實現。本文還是針對對於git有了解的想要快速搭建部落格的程式設計師們，如果這方面有問題的話，也可以先去了解下git相關的東西。

Hexo 走你

大膽假設

  • 你的SSH key配置無誤
  • 你安裝好了node/npm
  • 你在你的Github上建了一個 your_user_name.github.io 的 repo

安裝

這裡使用cnpm主要是為了方便和公司的源做區分，倒不是因為淘寶源快，換成npm沒影響的

# 全域性安裝hexo
cnpm install hexo -g

# 安裝hexo deploy包
cnpm install hexo-deployer-git --save

# 初始化部落格目錄
cd your_blog_dir
hexo init

# 安裝依賴包
npm install

# 啟動本地服務，訪問127.0.0.1:4000，bingo！你將看到hexo預設首頁
hexo server複製程式碼

Hexo設定

基本設定

# 編輯根目錄下的配置檔案
vi _config.yml

# 部署配置
deploy:
  type: git
  repository: git@github.com:derekeeeeely/derekeeeeely.github.io.git
  branch: master

# 站點設定
title: DZ's Gensokyo
subtitle: Best Time, Best You and Me
description: life are flashes and here is my life
author: Derek Zhou
language: zh-Hans
timezone:

# 你的域名
url: http://derekz.cn複製程式碼

完成基本設定後可以使用系一部分提到的命令進行建立文章、生成檔案、部署到Git等操作

常用命令

# 新建文章
hexo new XXX

# 在source目錄下生成一個XXX資料夾，可以配置到head的導航處（後面有說明）
hexo new page XXX

# local server, 簡化hexo s
hexo server

# 生成靜態頁面，簡化hexo g
hexo generate

# 部署到Github，簡化hexo d
hexo deploy

# 清除public，修改未生效時（有待研究hexo的熱更新）
hexo clean

# 生成+部署
hexo d -g複製程式碼

Hexo主題 --- Next

Hexo 提供了很多主題的選項，本站使用的是Next，也是比較流行，個人認為比較好看的主題。筆者用的版本是5.1.3，應該是比較高的版本，本身已經整合了很多有用的外掛，配置起來更方便一些。其他版本和其他主題應該也多有相似之處，可供參考。

Next 安裝

# 專案根目錄clone Next主題程式碼
git clone https://github.com/iissnan/hexo-theme-next.git themes/next

# 修改專案配置，設定主題為Next，後續的很多設定都在Next的_config.yml 檔案中進行，可以看成一個extend的關係
vi _config.yml
theme: next複製程式碼

Next 外掛篇

敲黑板，劃重點啦，好不好用，逼格高不高就看這裡了。

導航條
# menu設定
menu:
  home: / || home
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  # sitemap: /sitemap.xml || sitemap
  commonweal: /404.html || heartbeat
  about: /about/ || user

# Enable/Disable menu icons.
menu_icons:
  enable: true

# Next的四種主題，Mist表現中規中矩
scheme: Mist複製程式碼

 menu對應Next的Mist主題下頭部導航，需要new出相應的頁面，其中歸檔(archives)是預設有的，分類(categories)、標籤(tags)、404頁面和關於(about)是需要建立或編輯的。

站內搜尋
# 安裝依賴包
cnpm install hexo-generator-search --save
cnpm install hexo-generator-searchdb --save

# Local search 開啟
local_search:
  enable: true複製程式碼
閱讀量統計
# leanCloud配置 （Next config已存在）
leancloud_visitors:
  enable: true
  app_id: ssssssssssssssssssssssss
  app_key: sssssssssssssssssssssss複製程式碼

 使用leancloud做統計，Next的外掛目錄底下的lean-analytics.swig檔案已經存在leanCloud的引入和統計程式碼，我們只需要註冊leanCloud，使用app_id和app_key做身份校驗，按如上填寫好就可以了。

字數統計和閱讀時間估計
# 安裝依賴包
cnpm install hexo-wordcount --save

# wordcount 設定（Next config已存在）
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: false
  separated_meta: true複製程式碼
siderbar設定
# 社交連結/icon設定
social:
  GitHub: https://github.com/derekeeeeely
  微博: http://weibo.com/u/3248682277
social_icons:
  enable: true
  GitHub: github
  微博: weibo

# links友情連結
links:
  我的小站: http://119.23.217.75複製程式碼

 Next的icon預設使用的是Font Awesome庫，需要注意的是key應該保持一致。友情連結可以放些自己的或者自己收藏的社群啊論壇啊大佬部落格之類的，方便快速跳轉。本站這裡是因為自己另一個部落格的域名沒備案，所以放了IP，不要在意這些細節。有關於RSS和頭像這部分沒有累列出來，RSS是因為最後得到的是一個XML，老實說我不知道這個XML拿來有啥用，頭像的話其實就改樣式，不想自己寫的話隨便搜搜都有的，也就不貼出來了2333。

檔案壓縮
# 安裝依賴包
cnpm install hexo-all-minifier --save

# 在根目錄配置檔案中新增
html_minifier:
  enable: true
  ignore_error: false
  exclude:
css_minifier:
  enable: true
  exclude:
    - '*.min.css'
js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'
image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false複製程式碼
文章連結唯一化
# 安裝依賴包
npm install hexo-abbrlink --save

# 在根目錄配置檔案中修改
permalink: posts/:abbrlink/  # “posts/” 可自行更換

# abbrlink config
abbrlink:
  alg: crc32  # 演算法：crc16(default) and crc32
  rep: hex    # 進位制：dec(default) and hex複製程式碼

進階黑科技

SEO (觀察效果ing)

# 安裝依賴包
cnpm install hexo-generator-sitemap --save
cnpm install hexo-generator-baidu-sitemap --save

# 根目錄配置中新增
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

# source目錄新增robots.txt
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://www.derekz.cn/sitemap.xml
Sitemap: http://www.derekz.cn/baidusitemap.xml複製程式碼

 上述配置完後需要自備梯子翻牆登入google search console，按照提示一步一步走，驗證域名所有權->抓取對應路由頁面資料->加入資源索引，由於次數有限制，需要確定好哦。

七牛雲及圖床

 七牛雲註冊以後會提供10G的免費儲存空間，一般來說存些圖片是夠用的了，問題在於我們在寫markdown的時候圖片連結複製是在是太麻煩了。這裡提供幾個選項：

  • ipic 免費版圖片上傳至微博，每月付費可上傳至七牛雲（RMB玩家可以考慮）
  • picU 只支援七牛雲，可以一鍵截圖上傳並複製好圖片連結（比較好用，但是筆者的這個不知道為啥用得好好的某一天突然就驗證不通過了）
  • qiniu-image-tool 需要安裝qshell（七牛雲的一個命令列工具）以及 Alfred（非RMB玩家能接受破解版的話可以去這裡下載哦）

域名指向

 推薦阿里雲，順便一提，阿里雲的ECS最低配首年只要300塊，有伺服器需求的可以嘗試。
 註冊好域名後需要新增域名解析，講道理的話配置CNAME為www和@、記錄值為XXX.github.io就可以的，但是實際操作上我在阿里雲域名解析這裡嘗試配置第二條的時候一直報錯，沒辦法，ping了下XXX.github.io拿到IP後加了一條記錄型別為A、記錄值為IP的記錄，如下圖所示：

域名解析
域名解析

 還需要做的一件事是在source目錄底下建立一個CNAME檔案，內容的話就填寫你的域名，然後push到遠端，重新部署。

儲存檔案

 為了保留本地檔案，參考前輩做法，在自己的這個repo上checkout一個新的分支derekzhou，將程式碼提交。以後每次更新文章時先push到derekzhou分支，然後執行hexo的命令去生成public檔案deploy到master。這樣就算本機壞了也沒影響，原始碼還是可以從git上clone下來。

# .gitignore
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
/.deploy_git
/public
# /_config.yml複製程式碼

 有任何疑問，歡迎git、weibo各種方式@我，部落格的評論功能這兩天會加上，因為好像現在梯子都被砍，第三方的一些評論服務也不好用了，有時間再看看吧。感謝各位看官老爺們~

相關文章