Macではてなブログテーマ制作その１【環境構築方法】
私が初めてはてなブログのデザインテンプレート（テーマ）を制作した時、ターミナルやGitHubについて何も知らず、かなり初めから手こずりました。
いろんなサイトを参考に四苦八苦しながら、なんの知識もない初心者の私がテンプレート制作するまでに至った経緯をまとめています。
一度うまくいった後、二度目にまたつまづいたので、当時のメモを見ながら記事にしています。
尚、開発環境はMacになりますので、Windowsのやり方はわかりません。ご了承ください。
環境構築の前にSSHKeyとGitHubに登録を済ませましょう
Node.jsのインストールも済ませましょう
Node.jsでうまくいかない時に参照する記事
こんな方におすすめ
- はてなブログのテーマ制作をしたいけどやり方がわからない
- はてなブログのデザインテーマ制作の手引きを見てもイマイチうまくいかない
- いろんなサイトで調べてみたけど結局つまづいた
- Sassを使ってテンプレートを作りたい
ちなみにこの記事で紹介しているのは、テーマをダウンロードして、デザインからCSSを追加していくカスタマイズの方法ではなく、一からテンプレート制作（テーマ制作）をしていく場合の方法になります。
デザインからCSSを追加していくカスタマイズについてはおいおい書いていこうと思いますので、しばしお待ちくださいませ。
この記事でわかること
- 初心者でもターミナルから「Boilerplate」テーマをダウンロードする方法
- ターミナルでnmpをインストールする方法
- SCSSでの開発環境を整える方法
- はじめに
- ターミナル起動
- Hatena-Blog-Theme-Boilerplateをインストール
- npmをインストール
- npm実行、Hatena-Blog-Theme-Boilerplateが動くか確認
- 一旦終了
はじめに
はてなブログのテーマを制作する際には、「Boilerplate」というはてなブログが出しているテンプレートを元に作っていくのが良いとされています。
上記のGitHubでサンプルのコードをダウンロードし、普通にCSSを書いていってもいいのですが、とっても時間がかかるし面倒なので私はSCSSで書いていきました。
ターミナル起動
何はともあれ、テーマの元となる「Boilerplate」をダウンロードしていきましょう！
今回はダウンロードにターミナルを利用します。
ターミナルはLaunchpadを開いてから、検索窓で「ターミナル」と検索すれば出てきます。
Hatena-Blog-Theme-Boilerplateをインストール
早速ターミナルでGitHub上で公開されているテーマ、「Boilerplate」を自分のパソコンに複製（コピー）していきましょう！
GitHubへの登録及び環境構築の事前準備がまだの方は、以下の記事を参照して登録と事前準備を済ましてからこの記事に戻ってください。
1.ターミナルで以下実行
git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git /Users/ユーザー名/github/blog/new-theme
- git clone = 既存の「リポジトリ」を複製
- ユーザー名には自分のパソコンのユーザー名を記入
- /Users/ユーザー名/〜以下は好きなフォルダ名でOK
ユーザー名は、Finderのホームアイコンの横に表示されている名前が値します。
フォルダ名はわかりやすいものがいいと思います。
私はgithub/blog/new-themeとしましたが、例えばhatenablog/themeとかでもいいと思います。
2.パスワード入力→フォルダにインストールされる
Enter passphrase for key '/Users/ユーザー名/.ssh/id_rsa':
と聞かれるので、事前準備で設定したパスワード を入力してEnterキーを押します。
remote: Enumerating objects: 53, done. remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53 Receiving objects: 100% (53/53), 19.45 KiB | 4.86 MiB/s, done. Resolving deltas: 100% (18/18), done.
となり、Finderでフォルダが作成されていることを確認できたらOK!
これでGitHubからはてなブログのテンプレートをコピーしてくることができました！
npmをインストール
同じフォルダにnpmをインストールしていきましょう！ SASSで書いたコードををCSSにコンパイルするのに必要な項目です。
1.ターミナルで現在地移動
cd /Users/ユーザー名/github/blog/new-theme
さっき作ったフォルダと同じところへ移動します。cd でフォルダの階層の中に入ります。
/Users/ユーザー名/以下は私の場合は上記のフォルダですが、違う名前にした場合はその名前を入力してください。
現在地がnew-themeになったところでnpmをインストールします。
2.インストール
以下入力
npm install
しばらく時間がかかります。気長に待ちましょう。
私は5分くらいかかりました。
npm WARNと出ても気にしなくてOK!
npm実行、Hatena-Blog-Theme-Boilerplateが動くか確認
以下入力
npm start
結果
Watching "scss/" ..
[Browsersync] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.1.8:3000
------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
------------------------------------
[Browsersync] Serving files from: build
[Browsersync] Watching files...
と最終的に出ればOK!
new-themeフォルダにbuildフォルダが作られ、その中にboilerplate.css boilerplate.css.mapが作成されます。
一旦終了
Ctrl + Cを押して、Hatena-Blog-Theme-Boilerplateを一旦終了します。
環境構築はここで終了です。
お疲れ様でした。
テーマ制作その２
