静的サイトジェネレータ「HUGO」でのWEBサイト作成入門
- POST
はじめに 静的サイトとは 静的サイトとは、クライアントがWEBサーバにアクセスした際に、 HTMLとCSS・JavaScriptからなる予め用意されたコンテンツを表示するWEBサイト。
対して、動的サイトは、クライアントからアクセスがある度に、 WEBサーバでコンテンツを生成して、動的に生成されたコンテンツを表示するWEBサイト。
WordPressではPHPプログラムを使用して、WEBページを動的に生成するため、WordPressを使用して作成したサイトは動的サイトに該当する。
静的サイトジェネレーターとは 静的サイトジェネレーターは、Markdownや、AsciiDocなどの所定の形式のファイルから、HTML/CSS/JSを生成することができるソフトウェア。
※ AsciiDocを使用する場合は、htmlへ変換するためのAsciidoctorかAsciiDocのパスを通しておく必要がある。
代表的なものとして、以下のソフトウェアがある。
HUGO Jekyll GatsbyJS Hexo React Static Googleトレンドで比較したところ、HUGOの検索頻度が高いため、本記事では、 HUGOについて記載する。
HUGOとは GO言語で実装されたOSSの静的サイトジェネレーター。
公式サイト HUGOでWEBサイト作成手順 HUGOをインストール 以下のWEBサイトから、それぞれのプラットフォームに合わせたファイルをDLする。 https://github.com/gohugoio/hugo/releases
以下は、Windowsの場合の手順。
Windows用のファイルをDL DLしたファイルをC:\hugoに解凍する C:\hugoにパスを通すため、環境変数を設定する WEBサイトの雛形を作成 コマンドプロンプトを起動して、以下のコマンドを実行。
# 任意のWEBサイトを作成するフォルダに移動 $ cd c:\work # WEBサイトの雛形を作成 # ※ site_nameに作成するWEBサイトの名称を指定する # ※ 実行するとsite_nameというフォルダが表示される $ hugo new site site_name # 作成されたフォルダに移動 $ cd site_name # WEBサイトを作成 $ hugo 作成されたフォルダの確認 先の手順で作成されたフォルダの配下に、下記のフォルダ、ファイルが作成される