Hexoで生成したブログをGitHub Pagesで公開するまで

どうも、太鼓の達人(実機)をしばらくプレイしないうちに腕がなまってしまった太古の達人(?)わっさんです。さて、今回はこのブログを生成してGitHubを使って公開するまでの流れを書き残しておきたいと思います。

要約(というか超雑な流れ)

長文になるので、今回の説明の大まかな流れを示します。

  1. Node.jsをインストール
  2. Hexoをnpmでインストール
  3. GitHubリポジトリを用意し、Git周りの設定を完了する
  4. デプロイ&確認

環境

  • Windows 7 Enterprise
  • Node.js(v0.12.7)
  • npm(v2.11.3)

Node.jsをインストール

Node.jsはサーバーサイドで使用できるJavaScriptの事で、従来フロントエンドで使用してきたJavaScriptをサーバーサイドで使おう、というものです。こちらのインストールはWindows環境ということで、インストーラを使って行いました(Node.js 公式サイト)。インストールが終わったら、コマンドプロンプトで

1
2
node -v   //v0.12.7
npm -v   //2.11.3

として確認を行いました。npmは、「Node Package Manager」の略称らしいです。その名の通り、Node.js関連のモジュールインストールなどで活躍してくれるに違いありません。今回も何回か使います。

Hexoをインストール

次に、ブログの生成ツールをインストールします。今回は、静的サイトジェネレーターのHexoを使ってブログ本体を生成します。こちらは、先ほど確認を行ったnpmを使ってインストールします。

1
npm install -g hexo-cli

Hexoを使ってみる

Hexoでは、コマンドを打ち込むことでブログのひな形を生成したり、記事を作成したりしていきます。まずはひな形を作っていきます。作業用フォルダを生成する場所を決めたらコマンドプロンプトでその場所まで移動して、

1
hexo init FOLDER

というコマンドを実行します。「FOLDER」の部分は、好きな名前にして実行してください(作業用フォルダ名になるだけです)。
次に、

1
2
cd FOLDER
npm install

として、モジュールをインストールします。これだけでひな形の作成は完了です。

1
hexo s

としてローカルサーバーを起動し、http://localhost:4000/にアクセスしてみましょう。宇宙感あふれるページが表示されているかと思います。

生成したブログの編集

ひな形を作れたのは良いですが、このままでは面白くありませんね。ここで生成したフォルダを見てみましょう。「_config.yml」というファイルがあると思いますが、この中身を編集することでブログの全般的な設定をすることが出来ます。こちら(Hexo公式ページ)を参考にしながら、ブログのタイトル等を編集していきます。それぞれhtmlに変換した際にmetaタグなどに反映されていきます。

そのほかにもいろいろとフォルダやらファイルがありますが、例えば「themes」というフォルダの中にブログのデザインに関するスタイラスのファイルなどが入っていますので、その辺を変更することで見た目を変えることが出来ます。

デフォルトの宇宙感あふれるテーマは「landscape」という名前ですが、ネット上にテーマが多く存在するので、好きに変更することもできます。僕はこのデフォルトのテーマを少しいじったものを使っています。

GitHubをセットアップ

まずGitHubリポジトリを作成します。GitHub Pagesにブログを置くことももちろんできますが、今回僕はサブディレクトリに配置したかったので「blog」というリポジトリを作成しました。「gh-pages」ブランチを作成したら、お手元のGit Bash等を使ってsshキーをジェネレートしてGitHub側に登録しておきます。これでGitHubとマシンのひも付けができるので、GitHub側の準備は完了です。

(ちなみに僕はこの作業を忘れていたためにデプロイで躓きました…(´・ω・`))

HexoからGitHubへデプロイ

ここまで来たらいよいよデプロイです。先ほど編集した「_config.yml」を開き、

1
2
url: 'http://USER_ID.github.io/REPO_NAME/'
root: /REPO_NAME/

というように先ほど作成したリポジトリ名を指定します。
しかし、このままだと「themes」内の「_config.yml」の内容が悪さをしてアーカイブなどのリンクがうまく生成されないので、ファイルの下の方に

1
2
3
4
theme_config:
  menu:
    Home: /REPO_NAME
    Archives: /REPO_NAME/archives

と記述しておきます。その後、

1
2
3
4
deploy:
  type: git
  repo: 'git@github.com:USER_ID/REPO_NAME.git'
  branch: gh-pages

といった形でデプロイ用の設定を記述します。では、デプロイしましょう！

1
hexo d -g

「hexo d」コマンドでデプロイできますが、「-g」オプションを付加するとデプロイ前にhtmlなどを生成してくれます(生成の結果、作業用フォルダ内に「public」というフォルダが作られます)。

エラーが出なければ成功です！指定したURLにアクセスして、確認しましょう。

まとめと今後の展望

今回は、Hexoを利用して生成したブログをGitHub Pagesに公開することを目的として作業を行いました。作業にあたって、いろんなサイトを参考にさせてもらいましたが、Windows環境でやって記事にしている方が少なかったので、少し苦労しました(Gitについてよく知らないことが一番の原因だとは思いますが)。

また、この記事はMarkdown形式で書いていますが、まだ書き方がよくわからないのでわかりにくいところや間違ってるところ等あればコメントで教えていただけると幸いです。ブログのテーマについてはファイルをいじることで簡単に変更でき、良さげなので、これからしばらく運営していこうと思います。

参考にさせていただいたサイト