プログラミング

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

投稿日:2016年6月3日 更新日:

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

方針

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

使用しているツール

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

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

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

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

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

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

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

4. index.pugindex.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.jsonscripts プロパティに以下のコマンドを登録して名前をつけ、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
    

📂-プログラミング
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScript でスロットマシーンを作ってみました

JavaScript でスロットマシーンを作ってみました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

Web Components

Web Components: カスタム属性の利用方法

Web Components を使ってカスタム要素を作成し、そのタグを記述する際に、独自の属性を利用する方法について説明します。

web development

Layout Instability API を使ってレイアウト・シフトを検出する

目次1. Layout Instability API について2. サンプルコード3. インターフェイス情報PerformanceObserver interfaceLayoutShift inte …

Canvas と WebGL を使ったサンプルページを作りました

Canvas と WebGL を使ったサンプルページを作りました 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット …

web development

Web Development for Beginners を読む:レッスン3

目次1. はじめに2. Lesson 3: Creating Accessible WebpagesTools to useScreen readersContrast checkersLightho …