プログラミング

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

投稿日: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

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

関連記事

React Redux

React と Redux を使ったウェブページのサンプルその1

React と Redux を使ってウェブページのサンプルを作ってみました。以下のURLからアクセスすることがでます。 デモページ 🔗 React + Redux のサンプル002 こ …

WordPress

WordPress のテーマ、プラグイン開発のためのデバッグ設定

WordPress のテーマ、プラグイン開発のためのデバッグ設定や Tips について、ここにまとめていこうと思います。 目次1. wp-config.php の設定WP_DEBUGWP_DEBUG_ …

WordPress

WordPress で処理を追加したい場合、どこにコードを書けばよいのか?

自分で導入した WordPress でブログを運営していたとします。 ある日、WordPress の動作を変更したくなって 調べてみると、ほんの少し PHPのコードを書けば済むことが分かりました(アク …

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

JavaScript でスロットマシーンを作ってみました。 前回 とは違い、今回は Canvas を使っています。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情 …

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

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