HexoとGitHubでブログを構築する

ブログを立ち上げるのに2日かかりましたが、ようやく完成しました。その間、多くの問題に直面しましたが、偉大なGoogleのおかげで一つ一つ解決できました。私と同じように助けが必要な人のために、その過程をここに書き留めます。

フレームワークの選択#

ブログを立ち上げようと思ったとき、まず最初に考えるべきは、どのような種類のウェブサイトを構築するかです。動的サイトか、それとも静的サイトか。自分の考えを記録できる場所が欲しかっただけなので、静的サイトを選びました。静的サイトにも多くのフレームワークがあり、GitHubが推奨するJekyll、Jekyllをベースに開発されたOctopress、そしてNode.jsで書かれたHexoなどがあります。

Jekyll#

Jekyllは、シンプルなブログ形式の静的サイト生成ツールです。テンプレートディレクトリには、Markdown（またはTextileおよびLiquid）形式の生テキストドキュメントが含まれており、これらを変換して完全に公開可能な静的サイトを作成できます。このサイトは、お好みのサーバーに公開できます。JekyllはGitHub Pagesでも動作するため、GitHubのサービスを利用してプロジェクトページ、ブログ、またはウェブサイトを完全に無料で構築できます。

Jekyllを使おうとしましたが、設定中にいくつかの問題が発生しました。WindowsでのJekyllのインストールが何度も失敗し、解決策が見つからず、最終的に断念しました。

Octopress#

Octopressは、Jekyllブログエンジンを利用して開発されたブログシステムで、生成される静的ページはGitHub Pagesでうまく表示されます。ハッカー専用のブログシステムと謳われています (A blogging framework for hackers.)

Hexo#

Hexoは、Node.jsを搭載した高速でシンプルかつ強力なブログフレームワークです。Jekyllと比較して、より高速で軽量です。台湾の大学生tommy351氏によって開発され、数百の記事を数秒でコンパイルできます。Hexoで生成された静的ウェブページは、GitHub Pages、BAE、SAEなどのプラットフォームに直接デプロイできます。

そのコンパクトさ、軽量さ、設定の容易さ、そして強力な機能性から、最終的にHexoを選びました。

環境準備#

Node.js、Git、そしてエディタをインストールする必要があります。これらはそれぞれの公式サイトから直接ダウンロードし、指示に従ってインストールするだけで大丈夫です。

Hexoのインストール#

上記のソフトウェアをインストールしたら、以下のコードを直接実行します。

npm install -g hexo

初期化#

initコマンドを実行して、Hexoを指定したディレクトリに初期化します。例えば、私はDドライブのblogフォルダに初期化しました（以下、このパスがデフォルトとなります）。

D:\blog>hexo init

これでインストールプロセスは完了です。とても簡単だと思いませんか？

ページの生成#

D:\blog>hexo generate

ローカルでの起動#

D:\blog>hexo server

ブラウザでhttp://localhost<4000>にアクセスすると、自分のブログを見ることができます。

ブログの執筆#

newコマンドを実行します。

D:\blog>hexo new [layout] "postName"#layoutはテンプレートタイプで、デフォルトはpostです。"postName"は記事名です

次に、hexo\source\_posts\内に対応するファイルが見つかるので、記事を書き始めることができます。

デプロイ#

GitHub Pagesを選択できます。300MBの無料スペースがあり、トラフィック制限もありません。方法は非常に簡単で、GitHubでusername.github.ioという名前のリポジトリを新しく作成し、Hexoディレクトリ内の_config.ymlという設定ファイルに以下を記述します。

deploy:
deploy:
  type: github
  repository: https://github.com/kisnows/kisnows.github.io.git
  branch: master
  #kisnowsをあなたのGitHubアカウント名に置き換えてください

これで全てOKです。

よく使うコマンド#

hexo new "postName" #新しい記事を作成
hexo new page "pageName" #新しいページを作成
hexo generate #publicディレクトリに静的ページを生成 短縮形：hexo g
hexo server #プレビューアクセスポートを開く（デフォルトポート4000、'ctrl + c'でサーバーを閉じる） 短縮形：hexo s
hexo deploy # .deployディレクトリをGitHubにデプロイ 短縮形：hexo d
hexo d -g #複合コマンド、まずページを生成し、その後GitHubにデプロイ