MiLKySHADe

最近のコメント

    Dreamweaverのテンプレート機能を卒業し、静的サイトジェネレータに移行する

    by · 公開済み · 更新済み

    Dreamweaverのメリットは、静的HTMLファイルのinclude、つまりテンプレート機能やライブラリ機能が使えることです。

    これによりヘッダーやフッター、ナビゲーションなどの共通パーツを分離して管理することが出来ます。

    ちまたではSublimeTextやAtom、VisualStudio Code等のリッチテキストエディタが流行していますが、これらは静的HTMLのインクルード機能などは持ち合わせておらず、共通ヘッダー等の分離が行なえません。また、そのようなプラグインやアドオンも提供されていません。

    では上記のようなエディタで共通パーツを管理しながらコーディングするにはどうすれば良いのでしょうか。

    その答えは、静的サイトジェネレータです。

    ところで静的サイトジェネレーターとは？

    まず静的とは、動的の対義語で、主にサーバーサイド処理を含まないという意味合いで用いられます。

    例えばWordpressはサーバーサイド言語であるPHPで動作し、リクエストの都度、サーバの設定情報やデータを参照して結果HTMLをサーバーで生成してブラウザにレスポンスしますので、完全に動的です。

    Dreamweaverで作ったサイトはHTML、CSS、Javascriptも加えて画像などのメディアファイルがあるだけです。これらは全てブラウザ（クライアント側）で動作するものですので、サーバの情報やデータの有無によってHTMLレスポンスが変化しません。完全に静的です。

    つまり、DreamweaverはIDEであると同時に、簡易的な静的サイトジェネレーターでもあるのです。

    ですが、あくまで簡易的なので、Wordpressのようなサイトを作ることは出来ません。

    それに対し静的サイトジェネレーターは、Wordpressやそのプラグインがしてくれているような、

    • ヘッダー・フッターのinclude
    • 記事の生成
    • それらへのリンク
    • 繰り返し処理
    • ショートコードの埋め込み
    • カテゴリーやタグの生成と一覧ページの生成
    • ページごとのSEO
    • OGPタグやTwitterカードの生成

    など、サイトに必要な仕事や調整を自動で行った結果をHTMLとして出力してくれます。

    イメージとしては、Wordpressが出力してくれる複雑な結果を、完全なHTMLサイトとして完璧に出力してくれるソフトウェア、といった感じです。

    ではその静的サイトジェネレータにはどういった物があるのでしょうか。

    ざっと紹介すると、

    • Octpress・・・一時期流行したローカルブログ。
    • Jekyll・・・Ruby製。少し古い。
    • Hexo・・・Node.js製。ブログ生成に特化。
    • HUGO・・・シンプルかつ超高速。Go言語。

    中でも今回は超高速ビルドで生産性が高いHUGOを使ってみたいと思います。

    静的サイトジェネレータ「Hugo」のインストール

    https://github.com/gohugoio/hugo/releasesにアクセスして、Windows-64bit.zipをダウンロードします。

    C:\Hugo\binフォルダを作成し、hugo.exeを格納します。

    コントロールパネルから、システム＞システムのプロパティ＞詳細設定＞環境変数を開き、ユーザー環境変数PATHにC:\Hugo\bin\を追加します。

    コマンドプロンプトを立ち上げ、hugo versionと打ち、エンターします。

    Hugoのバージョン情報が返ってきたらインストールの成功です。

    実際にHUGOでサイトを作ってみる

    まずHugoはコマンドラインインターフェースソフトウェアです。Hugoで行う作業は全てコマンドプロンプトなどのコマンドラインツールで行ってください。

    コマンドプロンプトを立ち上げ、任意の作業フォルダに移動します。デスクトップとかでもいいです。

    cd work

    新規サイトを立ち上げるコマンドを打ちます。

    hugo new site test

    上記ではtestというサイトを作りました。
    testというディレクトリが作成され、中に色々なディレクトリがあります。これらのディレクトリに適切なファイルを配置していくとサイトが出来上がります。

    まずはトップページを配置してみます。

    以下の内容でindex.htmlを作成してください。

    <html>
    <head>
        <title>Hugoのテストサイト</title>
    </head>
    <body>
        <h1>Hugoのテストサイト</h1>
    </body>
</html>

    これを、layoutsフォルダに配置してください。

    コマンドプロンプトで、

    hugo server -w

    と入力しエンターしてください。

    ブラウザからhttp://localhost:1313/にアクセスしてください。

    先程のindex.htmlが表示されると思います。

    さらに、index.htmlを編集すると、即座にブラウザがリロードします。

    HUGOはライブリロード機能も備えており、HTMLコーディングではこの上なく便利なのです。

    ～執筆中～

    おすすめ

    コメントを残す