2017年8月7日Dreamweaverのメリットは、静的HTMLファイルのinclude、つまりテンプレート機能やライブラリ機能が使えることです。これによりヘッダーやフッター、ナビゲーションなどの共通パーツを分離して管理することが出来ます。Code等のリッチテキストエディタが流行していますが、これらは静的HTMLのインクルード機能などは持ち合わせておらず、共通ヘッダー等の分離が行なえません。そのようなプラグインやアドオンも提供されていません。上記のようなエディタで共通パーツを管理しながらコーディングするにはどうすれば良いのでしょうか。その答えは、静的サイトジェネレータです。ところで静的サイトジェネレーターとは?まず静的とは、動的の対義語で、主にサーバーサイド処理を含まないという意味合いで用いられます。Wordpressはサーバーサイド言語であるPHPで動作し、リクエストの都度、サーバの設定情報やデータを参照して結果HTMLをサーバーで生成してブラウザにレスポンスしますので、完全に動的です。Dreamweaverで作ったサイトはHTML、CSS、Javascriptも加えて画像などのメディアファイルがあるだけです。これらは全てブラウザ(クライアント側)で動作するものですので、サーバの情報やデータの有無によってHTMLレスポンスが変化しません。DreamweaverはIDEであると同時に、簡易的な静的サイトジェネレーターでもあるのです。簡易的なので、Wordpressのようなサイトを作ることは出来ません。それに対し静的サイトジェネレーターは、Wordpressやそのプラグインがしてくれているような、ヘッダー・フッターのinclude記事の生成それらへのリンク繰り返し処理ショートコードの埋め込みカテゴリーやタグの生成と一覧ページの生成ページごとのSEOOGPタグやTwitterカードの生成など、サイトに必要な仕事や調整を自動で行った結果をHTMLとして出力してくれます。イメージとしては、Wordpressが出力してくれる複雑な結果を、完全なHTMLサイトとして完璧に出力してくれるソフトウェア、といった感じです。その静的サイトジェネレータにはどういった物があるのでしょうか。紹介すると、Octpress・・・一時期流行したローカルブログ。Jekyll・・・Ruby製。Hexo・・・Node.js製。HUGO・・・シンプルかつ超高速。中でも今回は超高速ビルドで生産性が高いHUGOを使ってみたいと思います。静的サイトジェネレータ「Hugo」のインストールhttps://github.com/gohugoio/hugo/releasesにアクセスして、Windows-64bit.zipをダウンロードします。C:\Hugo\binフォルダを作成し、hugo.exeを格納します。コントロールパネルから、システム>システムのプロパティ>詳細設定>環境変数を開き、ユーザー環境変数PATHにC:\Hugo\bin\を追加します。versionと打ち、エンターします。Hugoのバージョン情報が返ってきたらインストールの成功です。実際にHUGOでサイトを作ってみるまずHugoはコマンドラインインターフェースソフトウェアです。Hugoで行う作業は全てコマンドプロンプトなどのコマンドラインツールで行ってください。コマンドプロンプトを立ち上げ、任意の作業フォルダに移動します。デスクトップとかでもいいです。work新規サイトを立ち上げるコマンドを打ちます。test上記ではtestというサイトを作りました。testというディレクトリが作成され、中に色々なディレクトリがあります。これらのディレクトリに適切なファイルを配置していくとサイトが出来上がります。トップページを配置してみます。以下の内容でindex.htmlを作成してください。</body></html>これを、layoutsフォルダに配置してください。-wと入力しエンターしてください。ブラウザからhttp://localhost:1313/にアクセスしてください。先程のindex.htmlが表示されると思います。index.htmlを編集すると、即座にブラウザがリロードします。HUGOはライブリロード機能も備えており、HTMLコーディングではこの上なく便利なのです。Customizr.。