HexoでGitHubにブログをつくる

記事更新日 

記事公開日 

タグ：, ,

  1. Home
  2.  > TECHBLOG
  3.  > CMS
  4.  > Hexo

Hexo はNode.jsをつかったブログフレームワークです。ここではGitHub Pages、もしくはそのサブディレクトリに公開することにします。具体的には、http://yukiyamashina.github.io が自分のGitHub Pagesのアドレスだとすると、http://yukiyamashina.github.io/blog にブログに公開するようにします。

NVM (Node Version Manager)、Hexoのインストール

ターミナルを開いてで以下を実行してください。

$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh
$ nvm install 0.10.32
$ nvm alias default v0.10.32

インストールするNode.jsのバージョンは

$ source ~/.nvm/nvm.sh

の後で

$ nvm ls-remote

で確認できます。記事投稿時での最新の安定版は0.10.32です。

続けて.bash_profile、もしくは.profileに以下を追記してください。

if [[ -s ~/.nvm/nvm.sh ]];
    then source ~/.nvm/nvm.sh
fi

続いてHexoをインストールします。

npm install -g hexo

ブログの雛形をつくる

ターミナルからブログに必要なファイルを保存しておくディレクトリに移動した後、以下のコマンドを実行してください。

hexo init blog
cd blog
npm install
hexo server

これでhttp://localhost:4000/に飛ぶとひな形が表示されます。

GitHubにデプロイする

GitHubに”blog”というリポジトリを作成し、gh-pagesブランチをつくっておいてください。

ローカルに作成したblogディレクトリの中の_config.ymlファイルを編集します。

# URL
## urlとrootを編集してください。"yukiyamashina"のところにはGitHubのユーザ名を（すべて小文字で）入れてください。
url: http://yukiyamashina.github.io/blog
root: /blog/
 
# Deployment
## type, repository, branchを編集してください。"YukiYamashina"にはGitHubのユーザ名を入れてください。
deploy:
  type: github
  repository: https://github.com/YukiYamashina/blog.git
  branch: gh-pages

あとは記事を生成してデプロイします。

$ hexo deploy --generate

これでGitHub Pagesのサブディレクトリにブログが公開されます。

もしサブディレクトリではなくてGitHub Pagesそのものにブログを公開する場合は、_config.ymlファイルを

# URL
## urlとrootを編集してください。"yukiyamashina"のところにはGitHubのユーザ名を（すべて小文字で）入れてください。
url: http://yukiyamashina.github.io
root: /
 
# Deployment
## type, repository, branchを編集してください。"YukiYamashina"にはGitHubのユーザ名を入れてください。
deploy:
  type: github
  repository: https://github.com/YukiYamashina/YukiYamashina.github.io.git
  branch: master

というように編集してください。

記事を投稿する

ついでに記事の追加方法を。記事を追加するには

hexo new "new post"

で、source/_posts以下にMarkDownファイル（この場合だとnew-post.md）が生成されます。このnew-post.mdファイルを編集してデプロイすると記事を投稿することができます。

テーマの設定

GitHubのテーマページにテーマ一覧があります。基本的にはgit cloneして_config.ymlのthemeの部分を書き換えるだけです。

気に入ったのは二つ。

このブログではyiliaをカスタマイズして使用しています。

プラグインの導入

GitHubのプラグインページに一覧があります。

とりあえず以下のプラグインをインストールしてみました。

GitHubにデプロイするときにエラーが出る場合の対処法

hexo deployでGitHubにデプロイする段階で

Permission denied (publickey).
fatal: Could not read from remote repository.
 
Please make sure you have the correct access rights
and the repository exists.

というようなエラーが表示されることがあります。この場合はまずMacにインストールされているGitHubが最新のものかを疑ってください。GitHub for Macをインストールしている人はアプリを起動して「Check for Updates…」（アップデートの確認）をクリックしてください。アップデートがある場合には自動的にインストールされて次回起動時にアップデートされます。おそらくこれで解決できると思います。

meta name=keywordsの設定

デフォルトのテーマやcasper, yiliaなどではキーワードのmetaタグが設定されていないようです。なので各テーマのhead.ejsの適当な場所に以下のコードを書き加えてください。

<% if (page.keywords){ %>
  <meta name="keywords" content="<%= page.keywords %>">
<% } else if (page.tags){ %>
<%
  var thistags=[];
  page.tags.each(function(k){
    thistags.push(k.name);
  }) %>
  <meta name="keywords" content="<%= thistags %>">
<% } %>

投稿用のmdファイルに

keywords:
- github
- hexo

といったようにキーワードが書かれていると、それぞれのワードをmetaタグのkeywordsに指定します。もしkeywordsが設定されていない場合はtagsで指定したワードがmeta name=”keywords”ととして設定されます。

しかも数式も表示できる！（鉄仮面風）

さきほどリンクを張ったhexo-mathやMathJax Renderer Plugin for HexoといったプラグインをインストールするとLaTeXコマンドで数式を表示させることができます。

こんなコマンド

$$
\frac{\partial u}{\partial t} = h^2 \left( \frac{\partial^2 u}{\partial x^2} + \frac{\partial^2 u}{\partial y^2} + \frac{\partial^2 u}{\partial z^2}\right)
$$

をmdファイルに書いておくといい感じに表示してくれます。

関連記事