ブログ公開の準備！

前回の「前編」では、簡単な記事の投稿とブログの確認まで行いました。

まだ中身はほとんど無い状態だと思いますが、公開サーバーへアップロードするための準備作業をしておきましょう！

サーバーは、「AWS」や「レンタルサーバー」など何でもいいのですが、無料で利用できる「GitHub Pages」を使うと便利です。

まずは、GitHubのアカウントを取得し、マイページを表示させましょう。

そこで、自分のユーザー名を確認しつつ、メニューから「New repository」をクリックします。

これで新しくリポジトリ(ブログのファイル保存スペースのようなもの)が作られることになります。

あと、リポジトリ名（ブログのURL）を指定する必要があるのですが、以下のように決められています。

ユーザー名.github.io

「ユーザー名」は、先ほど確認した名称をそのまま入れます。例えば、ユーザー名が「webhacck」であれば、「webhacck.github.io」となります。(あとから独自ドメインにすることも可能)

設定が完了すると、URLが表示されるのでメモしておきましょう。

あとは、Hexoで生成されたブログ記事ファイルを、今作ったリポジトリにアップロードすればいいのですが、「Cloud9」と「GitHub」を連携させる必要があります。

本来なら面倒な「SSH Key」設定が必要なのですが、Cloud9であれば簡単に連携できます。

Cloud9のマイページ左側メニューから、「Repositories」をクリックしGitHubと連携するボタンをクリックします。

認証画面が表示されるので、承認しておきます。

すると、先ほど作成した「webhacck.github.io」が表示されているので、「Clone to edit」ボタンをクリックしましょう！

これで、GitHubと連動した状態のエディタが新規に表示されるわけです。

最後に、ちょっと手間ですが、もう一度「前編」と同じ手順でHexoをインストールして、記事ファイルがあればこちらのエディタにアップロードしておけば良いでしょう。

「GitHub Pages」での公開！

それでは、実際にGitHubサーバーへ公開してみましょう。

まず、「_config.yml」ファイルを開き、Deploymentの項目を以下の様な設定に変更します。

deploy:
  type: git
  repo: https://github.com/webhacck/webhacck.github.io.git
  branch: master

※「repo」のURLは、自分が取得したURLに置き換えてください。

そして、gitアップロード用のプラグインをインストールします。

npm install hexo-deployer-git --save

これで、準備が完了したので、ブログ公開用のコマンドを実行します！

hexo d -g

「d」はデプロイ（公開）コマンドで、「-g」はファイル生成コマンドになっており、上記コマンドで同時実行が可能です。

実行後、途中でGitHubのログインが必要な場合があるので、その時はユーザー名とパスワードを入力してください。

特にエラーが無く完了すれば成功です。

GitHubのレポジトリを確認すると、すでにファイルがアップロードされているのが分かります。

先ほど指定したリポジトリ名「ユーザー名.github.io」を、ブラウザに入力すると見事にブログが公開されていますね！

ここまで来れば、あとは記事をひたすら書くだけです！

「記事の作り方」について

さて、ようやくブログも公開できるようになったので、詳しい記事の書き方についてもご紹介しておきます。

ブログの場合、記事の構成などがある程度決まっていることが多いと思いますが、「定型文」を利用して記事を作成すると非常に便利です！

定型文の登録は、「scaffolds」フォルダにある「post.md」ファイルを編集することで、すぐに利用できるようになっています。

例えば、以下のような定型文はいかがでしょうか。。

title: ここに記事タイトルを記載
date: {{ date }}
category:
- programming
- design
- internet
- mobile
tags:
- JavaScript
- iPhone
- Android
- tips
- mac
- 学習
- 面白

---

こんにちは！　○○です。



### 小見出し１


### 小見出し２


### 小見出し３

「---」より上は、記事の設定箇所みたいなものです。

日付部分に「{{ date }}」とすることで、作成した記事の日付がそのまま出力されるようになっています。また、タイトル部分は普通に日本語で記事タイトル名を入力すればOK！

カテゴリやタグは、あらかじめ複数記載しておくことで、各記事で使いたいものだけを選択して使わないキーワードは削除するようにすれば便利でしょう。

「---」より下は、記事の骨組みとなる構成を記載しておくことで、毎回同じようなことを書かなくても済みます。

また、いきなり記事を公開するのではなく、「下書き」として作成したい場合もあると思います。

この場合は、下書き用のコマンドを実行して記事を作成するのですが、例えば「test-post」という記事を作る場合は以下の通り！

hexo new draft test-post

すると、「source」→「_drafts」フォルダの中に、記事ファイルが生成されているのが分かります。（直接ファイルを「_drafts」へ移動しても同様のことが可能）

ちなみに、下書き用にも定型文を作ることが出来るようになっており、この場合は「scaffold」→「draft.md」ファイルを編集すればOKです！

あと、意外にハマりやすいのが、作成した記事を削除する方法だったりします。

最初は、何か「削除用コマンド」が存在するのかと調べていたのですが、そのようなコマンドは存在しません。では、どうやって削除するのかと言うと、普通にファイルをそのまま削除するというシンプルな手段となっています。

まとめ

今回ご紹介した設定は、ほとんど初回のみ発生することなので、一度やってしまえばあとは記事を更新する作業に専念できます。

そのため、通常実行するコマンドは以下の通りでしょう。

hexo new ****（記事の作成）

hexo s -p 8080（記事の確認）

hexo d -g（記事の公開）

たったこれだけなので、簡単です。

Hexoには、優れたテーマが多数揃っていたり、プラグインをインストールすることでパワーアップさせることも可能になっています。

このあたりも、近いうちに記事としてまとめたいと思います。

・「Hexo」公式サイト
・「Cloud9」公式サイト