静的サイトジェネレーター

はじめに HUGOでWEBサイトを作成した場合に、各ページのURLは、config.tomlのbaseurlからの相対パスで設定される模様。 相対パスでWEBサイトを作成していたところ、config.tomlのbaseurlにhttps://example.com/blogという設定をすると、 NextやPrevのアンカーの参照先のURLが、本来であれば、 http://localhost:1313/blog/page/2/としたいのに、http://localhost:1313/blog/blog/page/2/のようになってしまう事象が発生した。 本記事では、HUGOでURLを相対パスから絶対パスに変更する手順を記載する。 実行環境 下記のテーマを利用。 https://github.com/dim0627/hugo_theme_robust URLの正規化オプションを設定 下記のようにconfig.tomlにcanonifyurls = trueを設定すると、 baseURLを起点とした相対パスから、絶対パスになる模様。 ※ canonifyは正規化という意味の英単語。 https://gohugo.io/content-management/urls/ baseurl = "https://example.com/blog" title = "SiteTitle" theme = "hugo_theme_robust" canonifyurls = true googleAnalytics = "UA-XXXXXXXX-XX" # Optional disqusShortname = "XYW" [params] description = "This is site description" dateformat = "Jan 2, 2006" # Optional # Fonts settings. googlefonts = "https://fonts.googleapis.com/css?family=Lobster|Lato:400,700" # Optional, Include google fonts. fontfamily = "Lato,YuGothic,'Hiragino Kaku Gothic Pro',Meiryo,sans-serif" # Optional, Override body font family.

はじめに 静的サイトとは 静的サイトとは、クライアントが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 作成されたフォルダの確認 先の手順で作成されたフォルダの配下に、下記のフォルダ、ファイルが作成される