開発ツールを用意しよう

blackJAMを使ってブログをカスタマイズする上で必要となる３つのツールをインストールしましょう。

VSCodeをインストールしよう

VSCodeは、コードの編集とターミナルの操作を一つの画面でできる非常に便利なエディタです。こちらのサイトからインストールできます。

インストールが完了したら、開いてみてください。メニューの「View」から「Terminal」をクリックすると、コードエディタ下部にターミナルが現れます。

Mac: Homebrew, node.js, Xcodeをインストールしよう

Macユーザーの方は、さっそくターミナルを使います。Homebrewという、ソフトウェアのパッケージ管理ツールをインストールします。次のコードを実行してください。なお、コード先頭の「$」マークは、ターミナル上で実行すべきコードであることを示すマークですので、実際には入力しません。

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールが完了したら、続いて、開発モードの起動や静的ファイルの生成に必要なnode.jsとnpmというツールをインストールします。$ brew install nodeを実行してください（nodeをインストールするとnpmも付いてきます）。完了後、

$ node --version

$ npm --version

を実行して、node.jsとnpmがきちんとインストールされていることを確認しましょう。

続いて、テンプレートフォルダをgithubというオンラインのファイル管理サービスに保存する際に必要なgitというツールをインストールします。まず、ターミナルにて$ git --versionを実行し、PCにgitが入っているかを確認してみてください。バージョン情報が表示された場合、そのまま次に進んでください。gitが入っていない場合には、ポップアップでXcodeを入手するかどうかを尋ねられるはずなので、「Xcodeを入手」を選んでください。すると、gitのインストールが始まります。

Windows: node.js, gitをインストールしよう

Windowsユーザーの方は、こちらのページなどを参考に、node.js（npmも付属しています）をインストールしてください。

インストール完了後、ターミナルにて

$ node --version

$ npm --version

を実行して、node.jsとnpmがきちんとインストールされていることを確認しましょう（正常にインストールされている場合、バージョン情報が表示されます）。

続いて、gitをインストールします。こちらのページから、最新のgitをインストールしてください。完了後、$ git --versionで正常にインストールされたかを確認できます。

テンプレートフォルダをダウンロードしよう

ターミナルにて次のコマンドを実行して、テンプレートフォルダをダウンロードしてください。

$ git clone https://github.com/KyoYasuhisa/blackjam-starter.git

続けて、

$ cd Desktop/blackjam-starter

を実行してテンプレートフォルダ直下に移動し、

$ npm install

を実行してください。これによって、blackJAMを動かす上で必要な道具をコンピュータが勝手に揃えてくれます。

開発モードを起動しよう

npm installの処理が終わった後、続いて$ npm run devを実行してください。これは、blackJAMを開発環境下で起動するためのコードです。

処理が終わり次第、ブラウザで'localhost:3000'にアクセスしてください。上手くいっていれば、blackJAMのデフォルトのトップページが表示されるはずです。

ブログのカスタマイズを行う場合には、この開発モードでファイルに変更を加えていきます。開発モード下では、ファイルの変更が保存されるたびに、自動的にページが更新されるので、逐一結果を確認しつつデザインの修正などを行うことができます。

以上で、開発環境の準備が完了しました。次のステップでは、Netlifyという無料のホスティングサービスを使って、サイトを公開します。