みっちぇのWebデザイン研究所

はてなブログのカスタマイズを中心に、ウェブデザインについて研究するブログ

Macではてなブログテーマ制作その1【環境構築方法】

私が初めてはてなブログのデザインテンプレート(テーマ)を制作した時、ターミナルやGitHubについて何も知らず、かなり初めから手こずりました。

いろんなサイトを参考に四苦八苦しながら、なんの知識もない初心者の私テンプレート制作するまでに至った経緯をまとめています。

一度うまくいった後、二度目にまたつまづいたので、当時のメモを見ながら記事にしています。

尚、開発環境はMacになりますので、Windowsのやり方はわかりません。ご了承ください。

環境構築の前にSSHKeyとGitHubに登録を済ませましょう micchelabo.hatenablog.com

Node.jsのインストールも済ませましょう

[Node.js]ターミナルを使ったインストール方法

Node.jsでうまくいかない時に参照する記事 micchelabo.hatenablog.com micchelabo.hatenablog.com

こんな方におすすめ

ちなみにこの記事で紹介しているのは、テーマをダウンロードして、デザインからCSSを追加していくカスタマイズの方法ではなく、一からテンプレート制作(テーマ制作)をしていく場合の方法になります。

デザインからCSSを追加していくカスタマイズについてはおいおい書いていこうと思いますので、しばしお待ちくださいませ。

この記事でわかること
  • 初心者でもターミナルから「Boilerplate」テーマをダウンロードする方法
  • ターミナルでnmpをインストールする方法
  • SCSSでの開発環境を整える方法

はじめに

はてなブログのテーマを制作する際には、「Boilerplate」というはてなブログが出しているテンプレートを元に作っていくのが良いとされています。

github.com

上記のGitHubでサンプルのコードをダウンロードし、普通にCSSを書いていってもいいのですが、とっても時間がかかるし面倒なので私はSCSSで書いていきました。

SCSSについて詳しく説明されているサイト様一覧

すぐに使えるSCSS入門

【入門編】Sassの意味は?SASS・SCSSとは?読み方から使い方まで解説

とほほのSass入門

入力したSassをリアルタイムでCSSコンパイルしてくれる便利ツール

SassMeister

ターミナル起動

何はともあれ、テーマの元となる「Boilerplate」をダウンロードしていきましょう!

今回はダウンロードにターミナルを利用します。

ターミナルのスクショ
ターミナル

ターミナルはLaunchpadを開いてから、検索窓で「ターミナル」と検索すれば出てきます。

f:id:micche_labo:20210413153154p:plain:w80

f:id:micche_labo:20210413153236p:plain:w170

Hatena-Blog-Theme-Boilerplateをインストール

早速ターミナルでGitHub上で公開されているテーマ、「Boilerplate」を自分のパソコンに複製(コピー)していきましょう!

GitHubへの登録及び環境構築の事前準備がまだの方は、以下の記事を参照して登録と事前準備を済ましてからこの記事に戻ってください。

micchelabo.hatenablog.com

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!

npmがないと表示されたら…

micchelabo.hatenablog.com

new-themeフォルダにbuildフォルダが作られ、その中にboilerplate.css boilerplate.css.mapが作成されます。

一旦終了

Ctrl + Cを押して、Hatena-Blog-Theme-Boilerplateを一旦終了します。

環境構築はここで終了です。
お疲れ様でした。

テーマ制作その2 micchelabo.hatenablog.com