用Hexo建立一個網誌

發表於 2014-05-22 分類於記錄文章字數： 4.4k

此為hexo2的時候寫的介紹，已過時

簡介

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語法

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 程式的高亮加註

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 需要修改成：

<!--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/

簡介