cloud9-hexo-top

これからブログを作ろうを思っている人で、こんな人はいませんか?

  • とにかく完全無料で運営したい
  • デザインやレイアウトなど、自由自在にいじりたい
  • ソースコードは全部いじりたい
  • できるだけシンプル・ミニマムでブログを作りたい
  • 好きな広告を自由に貼りたい
  • バックアップを簡単にしたい…など

これらの条件をすべて満たしてくれるブログ作成術を、今回はご紹介しようと思います!

そこで登場するのが、JavaScriptで作られたブログ作成ツール「Hexo」と、Webコードエディタ「Cloud9」です。


「Hexo」とは?

cloud9-hexo1

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

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

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


「Cloud9」の準備をしよう!

cloud9-hexo2

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


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

cloud9-hexo3

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

cloud9-hexo4

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

cloud9-hexo5

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


「Hexo」のインストール!

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

npm install hexo-cli -g

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

cloud9-hexo6

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

hexo init blog

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

cloud9-hexo7

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

cd blog

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

npm install
cloud9-hexo8

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


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

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

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

hexo s -p 8080
cloud9-hexo9

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


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

cloud9-hexo10

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

cloud9-hexo11

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

cloud9-hexo12

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

cloud9-hexo13

記事を投稿してみよう!

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

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

cloud9-hexo14

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

hexo new sample-post

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

cloud9-hexo15

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


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

cloud9-hexo16

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

cloud9-hexo17

まとめ

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

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

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

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

後編へ続く…