hexo是以node.js開發的輕量級架blog工具
more: hexo offial site
github pages是github提供的static網站空間
每個user都可以建立一個無限流量的static web site(這個適合拿來當blog)
每個repository底下也都可以建立一個static網站(這個適合拿來當各repository的說明文件)
more: github pages offial site

本文介紹以hexo + github pages快速架設個人blog

內容包含：hexo安裝，常用指令，初次建立blog設定，新增文章，deploy to github pages

Table of Contents

  1. 安裝
  2. 常用指令
  3. 初次建立blog
    1. 基本設定
  4. 新增文章
  5. deploy to github pages
  6. 將blog加入google search console(optional 視需求)
    1. 驗證
    2. 製作sitemap
  7. 主題
  8. 加入org-mode支援
  9. 其他

安裝

需先安裝Node.js
Node.js安裝可參考nvm指令筆記，或直接用homebrew裝一個全域的(brew install node)

1
npm install -g hexo

常用指令

1
2
3
4
5
6
7
hexo init hexo_blog
hexo server
hexo new <title>
hexo generate
hexo deploy
 #刪除tag或category後要執行clean才會真的清掉
hexo clean

初次建立blog

1
2
3
4
hexo init <project folder>
cd <project folder>
npm install
npm install hexo-deployer-git --save

以下是將hexo_blog加入git的指令，視需求可以不做

1
2
3
4
5
6
vim README.md
git init
git remote add origin <remote git repository>
git add .
git commit -m "first commit"
git push -u origin master

基本設定

scaffolds底下放的是文章的template
source/_post是放文章的地方
_config.yml是網站全域設定

_config.yml
1
2
3
4
5
6
7
8
9
10
title: hexo-blog  #網站標題
author: cwza #你的名字
language:  zh-hant
timezone: Asia/Taipei
url: http://cwza.github.io #網址，搜索时會在搜索引擎中顯示
new_post_name: :year-:month-:day-:title.md # 新文章的文件名稱
deploy:
  type: git
  repo: https://github.com/cwza/cwza.github.io.git
  branch: master

post.md
1
2
3
4
5
title: {{ title }}
date: {{ date }}
categories:
tags:
---

新增文章

1
hexo new <title>

tags, category 用Array形式填寫

hexo筆記.md
1
2
3
4
5
6
7
8
title: hexo筆記 deploy to github pages
date: 2015-12-01 18:29:11
categories: [computer science, node.js]
tags: [hexo, github, blog, node.js]
---
以上摘要
<!-- more -->
以下剩餘文章

deploy to github pages

要先設定好_config.yml中的deploy，還有裝好git plugin(npm install hexo-deployer-git –save)

1
2
3
4
# generate static file to public folder
hexo generate
# deploy public to github pages
hexo deploy

將blog加入google search console(optional 視需求)

提升被google搜尋到的機率

驗證

  • 到google search console加入自己網站
  • hexo generate
  • 下載指定的驗證html擋放到project folder/public
  • hexo deploy
  • 到google search console作驗證

製作sitemap

_config.yml
1
2
3
# Sitemap
sitemap:
    path: sitemap.xml
1
2
3
npm install hexo-generator-sitemap
hexo generate
hexo deploy

到google search console中加入sitemap位置，ex: http://cwza.github.io/sitemap

主題

有不少人替hexo寫了一些theme可以套用：參考這裡
目前我是選用這個：tranquilpeak
theme的安裝設定方式就看各個theme的文件吧

加入org-mode支援

hexo預設只支援markdown，但有插件可以支援org-mode的render
https://github.com/CodeFalling/hexo-renderer-org
作者是中國人，用法也都寫的頗清楚，這邊就不多述了

要用org-mode寫文章的話就別用hexo new來建立文章了，直接在_post底下新增org file即可

org-mode 文章範例：

1
2
3
4
5
6
7
8
9
10
11
#+TITLE: hexo筆記 deploy to github pages
#+DATE: <2015-12-03 Thu 19:36>   
#+TAGS: nodejs, github, hexo, blog, orgmode
#+LAYOUT: post
#+CATEGORIES: blog
#+OPTIONS: toc:t \n:t
內容包含：hexo安裝，常用指令，初次建立blog設定，新增文章，deploy to github pages，其他
#+BEGIN_HTML
<!--more-->
#+END_HTML

其他

其他還使用了swiftype(搜尋)，disqus(回覆)，gravatar(頭像)，google analytics
有興趣的可以自己試試