更換博客系統——從jekyll到hexo

時間 2019-12-05

標籤更換博客系統 jekyll hexo 简体版

原文原文鏈接

以前用jekyll搭建博客，費了九牛二虎之力（本身沒有學過前端的東西，徹底就是改別人的樣式，不知道的地方再問google老師）才作了一個不是那麼醜的博客界面。過程當中遇到了各樣問題，包括如何讓站點支持RSS訂閱，如何添加評論系統等。html

後面使用起來大體也不算麻煩，在_posts裏面建立指定格式的文件，而後寫文章，而後在本地運行jekyll server看下效果，沒問題的話就用git提交到github。前端

雖然好屢次看到本身那笨拙的博客界面都有想給她化妝的慾望，不過仍是壓抑了本身的衝動，畢竟對於不懂前端的我來講，只能越描越黑了。因而，看着別人那漂亮的界面，只有羨慕的份兒。java

而後，不當心就碰見了hexo。開始只是對她的主題感興趣，隨便看了幾個主題，發現比我那弱爆了的界面好太多。接下來又大體看了她的文檔，感受使用起來很簡單，只用幾條命令就行。jquery

hexo init <folder>
hexo new "name"
hexo generate
hexo server
hexo deploy

因而就準備試試看。git

github

Hexo簡單部署

hexo出自臺灣大學生SkyArrow之手，是一個基於Node.js的靜態博客框架，編譯上百篇文字只須要幾秒。在已經有 Octopress 和 jekyll的狀況下，SkyArrow爲何要本身造輪子呢，能夠他的這篇文章：Hexo颯爽登場！web

官網強調了hexo的四大特色：npm

極速生成靜態頁面json
支持Markdown
一鍵部署博客
豐富的插件支持

下面就開始部署hexo，看看她到底有多牛吧。hexo依賴Node.js和Git，因此這兩個必須已經安裝，而後用下面命令安裝hexo：

npm install hexo -g

Mac用戶安裝hexo時還要確保安裝了command line tools。而後用hexo init命令初始化博客目錄，初始化完成以後，目錄結構以下：

~  tree -L 1 demo
demo
├── _config.yml
├── package.json
├── scaffolds
├── source
└── themes

3 directories, 2 files

hexo的配置文件是_config.yml，可配置內容至關多，能夠在官方文檔Configuration裏查看詳細解釋。

我將新建文章的名字格式改成和jekyll的相似，便於按照時間排序：

new_post_name: :year-:month-:day-:title.md

Disqus的名字必需要正確，否則是沒法拿到你的評論的，能夠登陸disqus查看你的名稱。

修改主題

hexo默認主題不是特別好看，不過Themes裏面列出了至關多不錯的主題，這裏我選擇了alberta，而後對其進行了進一步的簡化。

主題的安裝、使用簡單的不能再簡單了，這裏再也不囉嗦，主要寫一下我對主題的刪減、修改部分吧：

刪去開始部分的圖片（加載起來浪費時間）
刪掉頁面底部的版權說明（這玩意兒沒人看吧）
刪掉很炫的fancybox（這麼炫，我不敢用）
去掉分享文章的連接（又不是雞湯文，沒人會分享的）
部署國內CND（jquery和google字體...喪心病狂！）
修改了blockquote，code，table的樣式。

修改後的效果如圖：

你能夠在這裏fork哦。前面說過我不是很會前端的Css、JavaScript，可是仍然能對Theme進行刪減，說明Theme這塊可讀性是多麼的好，因此你能夠放心去定製本身的Theme吧。

順便提一下，360的CDN不錯，算是作了一件好事啊！

強大的插件

以前用jekyll博客系統時，爲了實現訂閱功能，用google找到一段「神奇」的代碼，能夠生成feed.xml頁面。可是要添加訂閱，必須輸入blog.com/feed.xml，只輸入主頁地址blog.com是不行的。而後困擾了許久，才找到RSS Auto-discovery這篇文章，成功解決問題。

我只是想實現訂閱功能而已，jekyll卻逼着我瞭解了許多RSS協議的內容，好吧，誰讓本身不是全棧工程師呢。而hexo對我這種新手都很友好，我要實現訂閱，只須要使用hexo-generator-feed插件便可，我才懶得去了解你怎麼實現訂閱呢。

插件的安裝卸載一條命令就能搞定，詳細的插件列表能夠看Plugins。

不過在這裏被坑了一次，文檔中並無說EJS, Stylus和Markdown renderer被移出核心模塊，因此按照文檔方法安裝hexo後，根本不可以生成靜態文件，後來看到Issue 620才知道怎麼回事。

因此提醒一下，你須要手動安裝EJS, Stylus和Markdown renderer：

$ npm install hexo-renderer-ejs --save
$ npm install hexo-renderer-stylus --save
$ npm install hexo-renderer-marked --save

對了，還有Tag Plugins，能夠容許你在博客裏面引用其餘站點的內容。好比要引用jsFiddle中的代碼片斷，只須要{% jsfiddle shorttag [tabs] [skin] [width] [height] %}，或者是用{% gist gist_id [filename] %}引入gist中的內容。

開始優雅地寫博客吧

能夠用hexo new "blog_name"來新建一篇文章，文章藏在source/_posts裏面。咱們能夠在scaffolds裏面設置生成新博客的模板，好比文章(layout: post)的模板post.md能夠改成以下內容：

title: {{ title }}
date: {{ date }}
tags:
category:
\---

這裏文章有兩種layout，以下：

Layout	Destination
post(Default)	source/_posts
page	source

post用來放文章，page能夠用來放一些好比「關於我」，「友情連接」，「404頁面」之類的頁面。GitHub Pages 自定義404頁面很是容易，直接在根目錄下建立本身的404.html就能夠。可是自定義404頁面僅對綁定頂級域名的項目才起做用，GitHub默認分配的二級域名是不起做用的，使用hexo server在本機調試也是不起做用的。

目前有以下幾個公益404接入地址，我選擇了騰訊的。404頁面，每一個人能夠作的更多。

只須要在source目錄添加404.html文件便可，文件內容爲：

layout: false
---
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>寶貝，公益404帶大家回家</title>
</head>
<body>
    <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>
</body>
</html>

必定要設置layout:false(還有三個短橫線)，否則會被hexo解析。

寫完以後，能夠用hexo generate生成靜態文件，而後用hexo server運行本地服務器，查看效果。若是發現有問題，在md文件改了以後，刷新頁面就能夠看到更改的效果了（是否是比jekyll強大啊）。

更多用hexo寫文章的內容能夠看官方文檔：Create a New Post。

本身以前寫了十幾篇文章，只須要將開頭部分稍做改動便可直接遷移到hexo中，文章數目比較少，因此就手動更改文章頭了。

hexo中還提供了其餘的命令，能夠看Commands。

遷移Disqus評論

hexo生成的的文章url中時間格式爲/2013/11/22/，而以前博客的url中時間爲2013-11-22，致使以前文章的評論就消失了。

好在Disqus容許咱們遷移博客評論，具體方法能夠看Help: Migration Tools。原理其實很簡單，Disqus評論默認將文章url做爲標識符，每一個url對應該文章的評論，遷移時咱們只須要創建起新舊文章地址的對應關係便可。

綁定域名

改了博客界面以後，順便註冊了一個域名，綁定github博客中。你能夠在free domains域名免費註冊裏選擇本身喜歡的域名，而後申請（免費）。申請成功以後，添加兩條域名解析A記錄，以下圖：

而後能夠用dig命令(固然也能夠用nslookup)驗證域名記錄是否生效：

$ dig zhaofei.tk +nostats +nocomments +nocmd

; <<>> DiG 9.8.3-P1 <<>> zhaofei.tk +nostats +nocomments +nocmd
;; global options: +cmd
;zhaofei.tk.            IN    A
zhaofei.tk.        14439    IN    A    192.30.252.153
zhaofei.tk.        14439    IN    A    192.30.252.154

而後在本身的博客倉庫根目錄新建名爲CANME的文件，裏面內容爲你的域名地址。

若是沒有綁定成功，能夠看github的幫助文檔：My custom domain isn't working。

還有添加到搜索引擎，站點數據統計等，準備折騰完再記錄一下。

參考
hexo你的博客
 Tips for configuring an A record with your DNS provider
HEXO 指定404頁面