以前、静的なツールでウェブサイトを作っていたのですが、その開発に関するメモです。完全にメモであることをご了承下さい。
目次
- 方針
- 使用しているツール
- 新たなページを作成する時の大まかな流れ
- 1. 新たなページ用に1つディレクトリを作成する。
- 2. その中に、index.pug ファイルを作成する。
- 3. 長くなりそうなページであれば、同ディレクトリ内に index.md ファイルを作成する。
- 4. index.pug や index.md にページの内容を書く。
- 5. JavaScriptの処理が必要であれば、このページ用のJavaScriptファイルを作成する。
- 6. CSSが必要な場合は、scssファイルを作成する。
- 7. Pugの変換処理を独自に記述した runPug.jsファイルを実行して、pugファイルを元にHTMLファイルを生成する。
- 8. webpackコマンドを実行し、JavaScriptファイルとCSSファイルを生成する。
- 9. 本番用のファイルを生成する。
- 10. 公開用ファイルをサイトにアップロードする
- 使用しているコマンド
方針
- 静的なサイトにする。
- シンプルな構成にする。
- シンプルなツールを使う。
使用しているツール
新たなページを作成する時の大まかな流れ
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を使っている。
- Webサーバーを起動する
> php -S localhost:8080 -t public
- Pug(旧Jade)で *.pugファイルを HTMLファイルに変換する。
開発用
> node runPug.js -P
本番用
> node runPug.js
- Pugモジュールを使ってファイルを変換するJavaScriptコードを独自に作って使っている。
(この部分については、こちらに例として書いた)
- Pugモジュールを使ってファイルを変換するJavaScriptコードを独自に作って使っている。
- webpackでJavaScriptファイルとCSSファイルを生成する
開発用
> webpack -d
本番用
> webpack -p