Hexoでブログ作ってGithub Pagesへ公開するまでの手順！

公開日：2014/11/12

top

ブログを始めるにあたり、以下の要望を満たしてくれる環境をいろいろ試行錯誤してました。

ウザい広告が出現しない
ソースコードをすべていじれる
無料で使える
それなりのアクセスにも耐えられるサーバー
自分の好きなアドセンスを配置できる
独自ドメインが使える
バックアップが簡単にできる
…etc

という…ワガママな要望だったわけですが、これをすべて解決してくれたのが【Github Pages】でした。

以前より、多少のプログラミングやGitをかじっていたこともあり、導入は問題なく完了したので、忘れないうちにまとめておきます。

また、より快適なブログ環境を整えるために、【Hexo】というJavaScriptでブログ構築が行えるツールを使ってみたので、合わせて記載しました。

最初に必要なモノ

まず、Github PagesとHexoを組み合わせてブログを作成するにあたり、必要なツールは以下の3点になります。

Git
Node.js
Hexo

※あとは当然ですが、任意のテキストエディタとブラウザが必要です。

Gitの準備

導入には2つの方法があります。

まず1つ目は、GUIによる「インストーラー」を使った方法。

【Gitインストーラー】

こちらは、グラフィカルなUIでインストール出来るので、初心者の方に向いています。

2つ目は、ターミナルのコマンドラインからインストールする方法。

$ sudo port install git-core +svn +doc +bash_completion +gitweb

私は、この方法でサクッとインストールしておきました。

参考【Git資料】

Node.jsの準備

Hexoを使ってブログを構築するために「Node.js」を導入します。

Node.jsのバージョン管理ツール「nvm」を導入することで、簡単にインストール出来るうえ、バージョン管理もラクになります。

以下、コマンドラインで実行…。

$ git clone git://github.com/creationix/nvm.git ~/.nvm$ source ~/.nvm/nvm.sh

　
そして、早速nvmを使って、現在のNode.jsのバージョンを確認してみます。

$ nvm ls-remote

V0.10.30
V0.10.31
V0.10.32
V0.10.33
V0.11.0
V0.11.1
V0.11.2
V0.11.3
V0.11.4
V0.11.5
以下省略…

　
このバージョンの見方ですが、【偶数＝安定版、奇数＝開発版】となっているのが特徴です。

（参考例）
V0.10は安定版、V0.11は開発版

　
そして、なるべく「最新・安定版」のNode.jsをインストールしておきます。

$ nvm install 0.10.32
$ node -v
V0.10.32

　
このままでも良いのですが、一般的にターミナルを起動したら自動でnvmが使えるようにしたいので、以下の設定を実行します。

$ nvm alias default V0.10.32

$ vim ~/.bash_profile
以下、.bash_profileに入力して保存

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

これでOKです！

（Tips）
もし「.bash_profile」が無ければ、作成してください。

Hexoをインストール

Node.jsとGitの準備が完了した時点で、以下のコマンドを実行します。

$ npm install -g hexo

　
Hexoはこれで完了！

超簡単ですね。

Hexoでブログを作る！

とりあえず、サクッとブログを作ってみます。

まず、新しいブログ「myBlog」を作成！

$ hexo init myBlog

　
新規作成直後のみ、myBlogを初期化する必要があります。

$ cd myBlog
$ npm install

npmをインストールすることで、Node関連のファイルが生成されます。

　
hexoのサーバーを起動します。

$ hexo s

ブラウザで「http://localhost:4000 」にアクセスすると、デフォルトのHexoブログが表示されていることが確認できます。

（Tips）
【Ctrl】+【C】で、Hexoサーバーを終了

Github Pagesで公開！

このままGithub Pagesへ公開します。

すでに生成されているファイル内に「config.yml」というファイルがあるので、その中にGithubの設定を入力します。

$ vim _config.yml
ファイル内の「Deployment」部分に、以下の設定を入力する

deploy:
    type: github
    repo: 【自分のgithubのレポジトリ】
    branch: master

（Tips）
事前に、Githubのアカウントを取得し、【自分のアカウント名.github.io】というレポジトリを作成したうえで、上記の「repo:」へ入力します。
※参考記事【Github Pages用のレポジトリ作成｜LIG INC.】

あとは、以下のコマンド1発で、Github Pagesにブログを公開することが出来ます。

$ hexo d -g

（Tips）
[d]は、デプロイコマンド
[-g]は、ページ生成コマンド

　
最後に、自分で決めた【自分のアカウント名.github.io】のURLへアクセスすれば、ブログが世界中に公開されているのを確認することが出来ます！

うえぶまなぶ