「Hexo」とは？

Hexoは「マークダウン」で簡単に記事を作成し、静的なHTMLファイルに書き出したあと、サーバーへのアップロードまで完結してくれるツールです。

わずかなコマンドを実行するだけなので、非常にお手軽なブログ運営を行えますが、Hexoを動かすための環境作りがちょっと面倒でもあります。

そこで、あらかじめ必要な環境を搭載したWebコードエディタ「Cloud9」を利用すると、誰でも今すぐブログ作成を楽しめるようになります！

「Cloud9」の準備をしよう！

まず、「Cloud9」にログインし、自分のマイページを表示しておきます。

そして、マイページから新規のプロジェクトを作成します。

適当なプロジェクト名を入力し、「HTML5」のテンプレートを選択しましょう。

すると、自動的に必要な環境がセットアップされて、ブラウザ上にコードエディタが起動します。

あとは、下段の「ターミナル画面」から、Hexoをインストールしていきましょう！

「Hexo」のインストール！

Hexo公式サイトに記載されているように、以下のコマンドをそのままターミナルへコピペして実行します。

npm install hexo-cli -g

すると、自動的にインストールが始まり、しばらくすると処理が完了して情報が表示されます。

さらに、続けてHexoのファイルをすべて配置するフォルダを作成するコマンドを実行！

hexo init blog

これで、「blog」というフォルダが、左側のツリー表示に生成されているのが分かるはず！

そして、今作ったフォルダ「blog」に移動します。

cd blog

最後に、以下のコマンドを実行してHexoを使えるように準備できたら完了です！

npm install

ズラズラっとたくさんの情報が表示されますが、これで問題ありません。

ブログを確認してみよう！

それでは、ブログが作れるようになったので、デフォルトで生成されている現状のブログを確認してみたいと思います。

再度、ターミナル画面から以下のコマンドを実行します。

hexo s -p 8080

Cloud9の場合、8080番ポートを利用することで、Hexoの簡易サーバーを起動してブラウザ上でブログの確認を行うことが出来ます。

ブログを見るには、上部メニューバーから「Preview」→「Preview Running Application」をクリックします。

すると、画面右側に現在のブログがプレビュー表示されます。

もし、これだと画面が小さい…と思う方は、右上のボタンをクリックすることで「別画面表示」も可能です。

これで、新規タブが開いて画面いっぱいにブログが表示されるようになります。

記事を投稿してみよう！

それでは、試しにサンプル記事を作って投稿してみたいと思います。

まずは、先ほど起動したHexoの簡易サーバーをストップしたいので、「Ctrlキー」と「Cキー」を同時に押します。

記事を作成するには「hexo new」コマンドを使用し、そのあとに記事のファイル名を入力します。例えば、「sample-post」という記事ファイルを作る場合は、以下のようになります。

hexo new sample-post

これを実行することで、画面左側の「source」→「_posts」フォルダ内に、今作った記事ファイルを見つけることが出来ると思います。

ちなみに、記事ファイル名はURLに使うことができるため、英語表記で書いた方が無難でしょう。

あとは、このファイルを開いて、マークダウン記法で記事を書いていけばOK！

そして、再度「hexo s -p 8080」を実行して簡易サーバーを起動すると、新しい記事が投稿されているのが分かります！

まとめ

おおまかな流れは確認できたでしょうか？

ちょっと記事ボリュームが大きいため、記事の詳細な書き方やGitHub Pagesを使った無料サーバーへの公開方法などの手順は、次回の後編で詳しくご紹介したいと思います。

また、独自のテーマをJavaScriptで作る手順なども今後紹介していきますので、ぜひこの機会に「Cloud9」と「Hexo」によるブログ作成を楽しんで頂ければと思います！

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

後編へ続く…