以前作っていた静的サイトの開発に関するメモ

以前、静的なツールでウェブサイトを作っていたのですが、その開発に関するメモです。完全にメモであることをご了承下さい。

方針

• 静的なサイトにする。
• シンプルな構成にする。
• シンプルなツールを使う。
  • node.jsを中心に使う。
  • Jekyllのような静的サイト生成ツールは使わない。
  • テンプレート言語として Pugを使う。
  • JavaScriptとCSS(SASS)のファイルを扱うために webpackを使う(シンプルなツールとは言いがたいが)。

使用しているツール

• node.js
  • npm
• webpack
• Pug
• Bootstrap
• Amazon S3

新たなページを作成する時の大まかな流れ

1. 新たなページ用に1つディレクトリを作成する。

• このディレクトリを作成するパスが、URLのパスにも反映される。

2. その中に、index.pug ファイルを作成する。

• このファイルを元にして、index.html が生成される。

3. 長くなりそうなページであれば、同ディレクトリ内に index.md ファイルを作成する。

• index.pug 内から、Pugの機能を使ってこのファイルをインクルードする。
• インクルードと同時に、Pugのフィルタ機能も使い Markdownを変換させるようにする。

4. index.pug や index.md にページの内容を書く。

• Pugで書きたければ index.pug に書けるし、Markdownで書きたければ index.md に書けばよい。

5. JavaScriptの処理が必要であれば、このページ用のJavaScriptファイルを作成する。

• エントリポイントとなる JavaScriptファイル内から、このファイルを読み込ませる。
• その際、このページが読み込まれた時だけこの処理を実行させるため、pageを使用する。
• テストが必要な処理を書いた場合は、なるべくnodeで実行できる形に処理を切り分けて実装し、
  テストも書く(mochaを使っている）。

6. CSSが必要な場合は、scssファイルを作成する。

• このファイル内用に一意なCSSクラス名をつけ、その中にスタイルを定義する。
• エントリポイントとなる scssファイルからこのファイルをインポートする。

7. Pugの変換処理を独自に記述した runPug.jsファイルを実行して、pugファイルを元にHTMLファイルを生成する。

• package.json の scriptsプロパティにこのコマンドを登録し、npm run コマンドで実行する。
• 開発時用と本番用の2種類のコマンドを登録する。（本番用だけ内容を圧縮して出力する）
• 公開用ディレクトリにファイルを生成する。
• index.pug から index.html が生成される。なので、アクセスするURLにファイル名を指定する必要はなくなる。

8. webpackコマンドを実行し、JavaScriptファイルとCSSファイルを生成する。

• webpackは、CSSファイルの内容をJavaScriptコードに変換してまとめて1つのファイルにする機能も持っているが、
  それだとCSSのレンダリングが遅くなるので使っていない。CSSファイルを別途作成するようにしてある。
• package.json の scriptsプロパティに、このコマンドを登録し、npm run コマンドで実行する。
• 開発時用と本番用の2種類のコマンドを登録する。（本番用だけ内容を圧縮して出力する）
• 公開用ディレクトリにファイルを生成する。

9. 本番用のファイルを生成する。

• 開発時は、手順6と7で開発時用のコマンドを実行するのだが、本番用のファイルを生成する場合は、
  本番用のコマンドを実行する。
• package.jsonには、手順6と7のコマンド(本番用)をまとめて行うコマンドも登録しておいて、それを使う。

10. 公開用ファイルをサイトにアップロードする

• Amazon S3 にファイルをアップロードしている。
• 今のところ手動で行っている。

使用しているコマンド

実際には、package.json の scripts プロパティに以下のコマンドを登録して名前をつけ、npm run 名前 というコマンドを実行している。
また、Windowsの場合は、MSYS2を使っている。

1. Webサーバーを起動する

   > php -S localhost:8080 -t public
   

2. Pug(旧Jade)で *.pugファイルを HTMLファイルに変換する。

   開発用

   > node runPug.js -P
   

   本番用

   > node runPug.js
   

   • Pugモジュールを使ってファイルを変換するJavaScriptコードを独自に作って使っている。
     (この部分については、こちらに例として書いた)
3. webpackでJavaScriptファイルとCSSファイルを生成する

   開発用

   > webpack -d
   

   本番用

   > webpack -p