用hexo建立一個部落格

此為hexo2的時候寫的介紹,目前版本為hexo3,有部分不同,目前使用raytaylorism主題

簡介

hexo是一個可以使用markdown語法產生靜態頁面的部落格工具。
可以配合github page快速建立一個部落格。

安裝環境:Ubuntu16.04

安裝nvm和hexo

1
2
sudo apt-get install nvm
sudo nvm install hexo -g

可能會遇到的問題:node或nvm版本過低

初始化hexo

hexo init [folder]

若不加[folder]則在當前目錄

cd [folder]
npm install

常用命令

1
2
hexo n
hexo new [layout] [title]
Layout 存放資料夾 格式 範例
post (預設) source/_posts 動態頁面 source/_posts/new-post.md
page source 靜態頁面 source/new-page/index.html
draft source/_drafts 草稿 source/_drafts/new-draft.md

靜態頁面用於不常更改,不希望受theme影響的頁面
.md格式代表使用markdown語法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
hexo g (= hexo generate)
# 用於建造網頁的時候,hexo會將markdown格式編譯成html格式
hexo g --watch
# 使用此命令後,重開hexo,可以使hexo偵測檔案變更,並自動generate
hexo s (= hexo server)
# 在本地預覽網站 - 預設在<http://localhost:4000/>
hexo s -d
# 在預覽的時候同時看到在草稿的文章
hexo d (hexo deploy)
# 發佈網站至設定的網址,網站會真正更新
hexo g -d
# 先generate再deploy
hexo publish [filename] (= hexo p [filename])
# 將檔案(從草稿)移至/post

設定檔更改

於初始化資料夾中的_config.yml
此為YAML格式,不可使用tab字元

僅列出重要的設定,全部設定內容

Site

title 部落格標題
subtitle 副標題
description 關於此部落格

URL

url 你的部落格網址
permalink 文章的子網址格式,預設為:year/:month/:day/:title/ 參考變數名

Writing

new_post_name 新建立的post名稱格式,個人使用:year:month:day:title.md
auto_spacing 在亞州文字和西方文字之間加上空白
highlight 程式的高亮加註

Archives

開啟/關閉 archive, category, tag 的換頁功能

Pagination

per_page 一頁幾篇文章(0 = 不分頁)

Markdown

hexo markdown parser 支援 github 語法(GitHub Flavored Markdown)
https://help.github.com/articles/github-flavored-markdown/

Extensions

theme 主題名稱

Deploy

type: 發佈的目標格式,目前使用github
repository: git@github.com: [github帳號]

主題

套用主題(pacman)

git clone git@github.com:A-limon/pacman.git themes/pacman

同時_config.yml也要更新: theme: pacman

註:pacman已停止更新,現在有jacman替代

更新主題

1
2
cd themes/pacman
git pull

可先備份設定檔_config.yml

修改主題

修改主題後, 要先清除現有生成的主題文件,才會正確顯示

1
2
hexo clean
hexo generate

擴充功能

為Hexo增加Google Analytics

在Analytics中添加自己的網站域名,獲得JS追蹤代碼。
把JS代碼Copy到Hexo的after_footer文件中,after_footer是Hexo主題頁腳的JS代碼文檔,具體位置在/themes/[themename]/layout/_partial
然後重新生成、發佈Hexo。數據統計不會立即生效,需要等待幾個小時,之後登錄Google Analytics就可以查看你的Blog的數據

瀏覽量

  • Google Analytics
  • 用leancloud計算瀏覽量
    在pacman的主題下,after_footer.ejs 需要修改成:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!--page counter part-->
<script>
function addCount (Counter) {
url=$('.mytitle').attr('href').trim();
title = $('.article-title').text().trim();
var query=new AV.Query(Counter);
//use url as unique idnetfication
query.equalTo("url",url);
query.find({
success: function(results){
if(results.length>0)
{
var counter=results[0];
counter.fetchWhenSave(true); //get recent result
counter.increment("time");
counter.save();
}
else
{
var newcounter=new Counter();
newcounter.set("title",title);
newcounter.set("url",url);
newcounter.set("time",1);
newcounter.save(null,{
success: function(newcounter){
//alert('New object created');
},
error: function(newcounter,error){
alert('Failed to create');
}
});
}
},
error: function(error){
//find null is not a error
alert('Error:'+error.code+" "+error.message);
}
});
}
$(function(){
var Counter=AV.Object.extend("Counter");
//only increse visit counting when intering a page
if ($('.article-title').length == 1)
addCount(Counter);
var query=new AV.Query(Counter);
query.descending("time");
// the sum of popular posts
query.limit(10);
query.find({
success: function(results){

for(var i=0;i<results.length;i++)
{
alert(results[i]);
var counter=results[i];
title=counter.get("title");
url=counter.get("url");
time=counter.get("time");
// add to the popularlist widget
showcontent=title+" ("+time+")";
//notice the "" in href
$('.popularlist').append('<li><a href="'+url+'">'+showcontent+'</a></li>');
}
},
error: function(error){
alert("Error:"+error.code+" "+error.message);
}
}
)
});
</script>
  • 將留言區改成disqus
  • 回到頂部功能

數學公式

使用mathjax(適用tex語法)
http://catx.me/2014/03/09/hexo-mathjax-plugin/

需要注意的是若有兩個底線_,會變斜體,這是原有的markdown語法之一…
解決方法:用
{ % math-block % } 和 { % endmath-block % }
包覆數學公式

hexo2是math-block, hexo3是math_block

小缺點是會使網頁載入速度變慢(公式的圖片是即時取得的)

圖床

  • 網頁端:在hexo的source資料夾建立img資料夾,使用時 [](/img/...)
  • imgur, google, dropbox…

Hexo Markdown 格式

  • 一句話結尾空白兩格,才會換行
  • 標題和符號之間要空白 ### Hexo ...
  • 其他和github markdown格式相同

Reference

  • 最詳細的hexo懶人包 http://ibruce.info/2013/11/22/hexo-your-blog/
  • 提供一些Bug的解決方案 http://johnnyfee.github.io/2014/03/22/hexo/
  • Markdown寫作淺談 http://jianshu.io/p/PpDNMG
  • Hexo 官網 https://hexo.io/

歡迎關注我的其它發布渠道