Hugo + GitHub Pagesでのサイト構築例２（個人用サイト）

＊＊＊　備忘録です。間違い等があればご指摘ください。　＊＊＊

概要

• Hugoを用いて個人用サイトを構築し、GitHub Pagesで公開する。（研究室用サイトの例はこちら。）
• HugoのテーマはTranquilpeakを用いる。（その他のテーマはこちら。)
• URLはhttps://ユーザー名.github.ioとする。（https://ユーザー名.github.io/リポジトリ名ではなく。詳細はこちらを参照。）
• Hugoのプロジェクトと公開用サイトは別々のリポジトリで管理する。リポジトリ名は、前者をユーザー名Site（例えば、ユーザー名がxxxxxならxxxxxSite）、後者をユーザー名.github.ioとする。後者を前者のsubmoduleとする。
• アイコン等はFont Awesome 4.7を用いる。

前提

• GitHubのSign up（ユーザー登録）は終了している。
• SSH公開鍵の作成とGitHubへの登録は終了している。

GitHubにリモートリポジトリを作成する

リモートリポジトリユーザー名Siteを作成する。

1. https://github.com/にSign inする。
2. 右上の「+」から「New repository」を選択する。
3. 「Repository name」にユーザー名Siteを入力する。
4. リポジトリを公開する場合は「Public」、公開しない場合は「Private」をチェックする。　有償版のGitHubを使用している場合は「Public」（リポジトリを公開する）あるいは「Private」（リポジトリを公開しない）をチェックする。無償版を使用している場合は「Public」を選択する。
5. 「Initialize this repository with a README」をチェックする。
6. 「Add .gitignore: None」および「Add a license: None」を選択する（デフォルト）。
7. 「Create repository」をクリックする。

同様に、リモートリポジトリユーザー名.github.ioを作成する。

ローカル環境にサイトを準備する（Hugoのプロジェクトを作成する）

Hugoをインストールする。

$ brew install hugo

Hugoのプロジェクトを作成する。

$ hugo new site ~/GitHub/ユーザー名Site/

ローカルリポジトリユーザー名Siteを作成する。

$ cd ~/GitHub/ユーザー名Site/
$ git init
$ git remote add origin https://github.com/ユーザー名/ユーザー名Site.git
$ git pull origin master

リモートリポジトリユーザー名.github.ioをsubmoduleとして登録する。

$ git submodule add https://github.com/ユーザー名/ユーザー名.github.io.git public

Hugoのテーマをsubmoduleとしてダウンロードする。

$ cd themes/
$ git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git

デフォルトのディレクトリexampleSiteをテーマのものに変更する。

$ cd ..
$ cp -a themes/hugo-tranquilpeak-theme/exampleSite/ .
overwrite ./config.toml? (y/n [n]) y  <-- 「y」を入力

ローカル環境でサイトを確認する。ターミナルで別のウインドウを開き、

$ cd ~/GitHub/ユーザー名Site/
$ hugo server -w

元のウインドウに戻り、

$ open http://localhost:1313/

ブラウザが開くので、テーマのデモとほぼ同様であるかを確認する。
以降、Hugoでファイルの変更等を行うと、このブラウザがリアルタイムで更新されるので確認する。

サイト全体の設定ファイルconfig.tomlを修正する

テーマのデフォルトのconfig.tomlを以下に示すが、各サイトに合わせて修正する。

# Tranquilpeak
# Version : 0.4.6-BETA
# Author : Thibaud Leprêtre

# I STRONGLY recommend you to use a CDN to speed up loading of pages.
# There is many free CDN like Cloudinary or you can also use indirectly
# by using services like Google Photos.

# If you want to store images yourself, please read this guidelines:
# For users, if you only use this theme, put your images directly in `source/assets/images` folder
# But if you want to add local images, you can put your images directly in `source/assets/images` folder
# For developpers, if you modify this theme, put your images in `source/images` folder and
# use grunt task `build` to synchronize assets

baseURL = "https://example.org/"  <-- 公開するURLに変更
languageCode = "en-us"  <-- 日本語サイトであればjaに変更
defaultContentLanguage = "en-us"  <-- 多言語サイトを構築するのであれば変更
title = "Hugo tranquilpeak theme"  <-- 公開するサイト名に変更
theme = "hugo-tranquilpeak-theme"
disqusShortname = "hugo-tranquilpeak-theme"  <-- Disqusを使用していなければコメントアウト
# googleAnalytics = "UA-123-45"  <-- Google Analyticsを使用していなければコメントアウト
paginate = 7  <-- １ページに表示させるpost数
canonifyurls = true  <-- 絶対パスで良ければこのまま

[permalinks]
  post = "/:year/:month/:slug/"

[taxonomies]
  tag = "tags"
  category = "categories"
  archive = "archives"

[author]
  name = "Firstname Lastname"  <-- サイトの作成者に変更
  bio = "Super bio with markdown support **COOL**"  <-- サイトの作成者の略歴等に変更
  job = "Your job title"  <-- サイトの作成者の職業等に変更
  location = "France"  <-- サイトの作成者の住所等に変更
  # Your Gravatar email. Overwrite `author.picture` everywhere in the blog
  gravatarEmail = "[e-mail]"  <-- Gravatarを使用していなければコメントアウト
  # Your profile picture
  # Overwritten by your gravatar image if `author.gravatarEmail` is filled
  picture = "https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png"  <-- 作成者の画像ファイル、ただし、Gravatarが優先される
  # Your Twitter username without the @. E.g : thibaudlepretre
  # twitter = "thibaudlepretre"  <-- どのように使われるのか不明
  # Your google plus profile id. E.g : +ThibaudLepretre or 114625208755123718311
  # googlePlus = "+ThibaudLepretre"  <-- Google+のサービスは終了したのでコメントアウトのまま

# Menu Configuration
[[menu.main]]  <-- 左メニューに表示する項目、必要に応じて変更あるいは削除
  weight = 1  <-- 表示する順序
  identifier = "home"
  name = "Home"  <-- 表示する名称
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-home\"></i>"  <-- アイコン
  url = "/"
[[menu.main]]
  weight = 2
  identifier = "categories"
  name = "Categories"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-bookmark\"></i>"
  url = "/categories"
[[menu.main]]
  weight = 3
  identifier = "tags"
  name = "Tags"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-tags\"></i>"
  url = "/tags"
[[menu.main]]
  weight = 4
  identifier = "archives"
  name = "Archives"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-archive\"></i>"
  url = "/archives"
[[menu.main]]
  weight = 5
  identifier = "about"
  name = "About"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-question\"></i>"
  url = "/#about"

[[menu.links]]
  weight = 1
  identifier = "github"
  name = "GitHub"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-github\"></i>"
  url = "https://github.com/kakawait"
[[menu.links]]
  weight = 2
  identifier = "stackoverflow"
  name = "Stack Overflow"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-stack-overflow\"></i>"
  url = "https://stackoverflow.com/users/636472/kakawait"

[[menu.misc]]
  weight = 1
  identifier = "rss"
  name = "RSS"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-rss\"></i>"
  url = "/index.xml"

[params]
  # Customize date format use to render blog post date, categories and other
  # You must use date format used by Go Time package https://golang.org/pkg/time/
  # Months (not work with short month like "jan", "feb", etc) are translated if translation exists on i18n folders
  # Default format is: January 2, 2006
  # dateFormat = "2 January 2006"  <-- 日付の表示方法、必要であれば変更

  # Global keywords configuration. Following keywords will be add to every pages
  # keywords = ["development", "next-gen"]  <-- 検索エンジン用キーワード、必要であれば変更

  # Syntax highlighter, possible choice between: "highlight.js" (recommanded) and "prism.js" (experimental)
  # You can comment it to disable syntax highlighting
  syntaxHighlighter = "highlight.js"

  # Hide sidebar on all article page to let article take full width to improve reading, and enjoy wide images and cover images. (true: enable, false: disable)
  clearReading = true  <-- postを表示している時に左メニューを消す場合はtrue、消さない場合はfalse

  # Define categories will create hierarchy between parents: `categories = ["foo", "bar"]` will consider "bar" a sub-category of "foo".
  # If false it will flat categories.
  hierarchicalCategories = true  <-- カテゴリーを階層化する場合はtrue、しない場合はfalse

  description = "Hugo tranquilpeak theme demo"  <-- どのように使われるのか不明

  # Customization
  # Define the behavior of the sidebar
  # 1: Display extra large sidebar on extra large screen, large sidebar on large screen,
  #    medium sidebar on medium screen and header bar on small screen and
  # extra large sidebar is swiped on extra large screen and large sidebar on all lower screen (default)
  # 2: Display large sidebar on large screen, medium sidebar on medium screen and
  #    header bar on small screen and large sidebar is swiped
  # 3: Display medium sidebar on large and medium screen and header bar on small screen and
  #    medium sidebar is swiped
  # 4: Display header bar on all screens, extra large sidebar is swiped on extra large screen and
  #    large sidebar is swiped on all lower screens
  # 5: Display header bar on all screens and large sidebar is swiped on large screen
  # 6: Display header bar on all screens and medium sidebar is swiped
  sidebarBehavior = 1  <-- 左メニューの表示の仕方を上の1〜6から選択

  # Your blog cover picture. I STRONGLY recommend you to use a CDN to speed up loading of pages.
  # There is many free CDN like Cloudinary or you can also use indirectly
  # by using services like Google Photos.
  # Current image is on AWS S3 and delivered by AWS CloudFront.
  # Otherwise put your image, for example `cover.jpg` in folder `static/images/`,
  # and use relative url : `images/cover.jpg`
  coverImage = "images/cover.jpg"  <-- 左メニューの背景画像

  # Display an image gallery at the end of a post which have photos variables (false: disabled, true: enabled)
  imageGallery = true  <-- 画像ギャラリーをpostの最後に表示する場合はtrue、しないならfalse（画像ギャラリーが何なのか不明）

  # Display thumbnail image of each post on index pages (false: disabled, true: enabled)
  thumbnailImage = true  <-- 記事のリストにサムネイル画像を表示する場合はtrue、表示しない場合はfalse
  # Display thumbnail image at the right of title in index pages (`right`, `left` or `bottom`)
  # Set this value to `right` if you have old posts to keep the old style on them
  # and define `thumbnailImagePosition` on a post to overwrite this setting
  thumbnailImagePosition = "bottom"  <-- サムネイル画像を表示する位置
  # Automatically select the cover image or the first photo from the gallery of a post if there is no thumbnail image as the thumbnail image
  # Set this value to `true` if you have old posts that use the cover image or the first photo as the thumbnail image
  # and set `autoThumbnailImage` to `false` on a post to overwrite this setting
  autoThumbnailImage = true  <-- サムネイル画像を指定しない時はpostのcover画像あるいは始めの画像をサムネイル画像として使う場合はtrue、使わない場合はfalse（試してみたがサムネイルが表示されなかった、原因は不明）

  # Your favicon path, default is "/favicon.png"
  # favicon = "/favicon.png"  <-- ファビコン用画像ファイル

  # Header configuration
  # The link at the right of the header is customizable
  # You can add a link (as an icon) at the right of the header instead of the author's gravatar image or author's picture.
  # By default, author's gravatar or author's picture is displayed.
  #     url: /#search  <-- ヘッダー右側のリンクを変更（デフォルトは作成者の画像）
  #     icon: search
  #     class: st-search-show-outputs

  # Display `Next` on left side of the pagination, and `Prev` on right side one.
  # If you set this value to `true`, these positions swap.
  # swapPaginator = true  <-- post下部の「PREVIOUS」と「NEXT」の位置を反転

  # Custom CSS. Put here your custom CSS files. They are loaded after the theme CSS;
  # they have to be referred from static root. Example
  # [[params.customCSS]]
  #   href = "css/mystyle.css"  <-- カスタムCSSファイル

  # Custom JS. Put here your custom JS files. They are loaded after the theme JS;
  # they have to be referred from static root. Example
  # [[params.customJS]]
  #   src = "js/myscript.js"  <-- カスタムJSファイル

  # Sharing options
  # Comment and uncomment to enable or disable sharing options
  # If you wanna add a sharing option, read user documentation :
  # Tranquilpeak configuration > Theme configuration > sharing-options
  [[params.sharingOptions]]  <-- SNSでのシェア、必要に応じて変更あるいは削除
    name = "Facebook"
    icon = "fa-facebook-official"
    url = "https://www.facebook.com/sharer/sharer.php?u=%s"

  [[params.sharingOptions]]
    name = "Twitter"
    icon = "fa-twitter"
    url = "https://twitter.com/intent/tweet?text=%s"

  [[params.sharingOptions]]
    name = "Google+"
    icon = "fa-google-plus"
    url = "https://plus.google.com/share?url=%s"

  [params.header.rightLink]  <-- ヘッダー右側の作成者の画像、、必要に応じて変更あるいは削除
    class = ""
    icon = ""
    url = "/#about"

  # Customize link of author avatar in sidebar
  # [params.sidebar.profile]
  #   url = "/#about"  <-- 左メニュー上部の作成者の画像のリンク先

  # Customize copyright value "© 2017 <CUSTOMIZATION>. All Rights Reserved"
  # [params.footer]
  #   copyright = "<a href=\"https://github.com/kakawait\">kakawait</a>"  <-- ページ下部のコピーライトのリンク先

修正されたconfig.tomlの例を以下に示す。

# Tranquilpeak
# Version : 0.4.6-BETA
# Author : Thibaud Leprêtre

# I STRONGLY recommend you to use a CDN to speed up loading of pages.
# There is many free CDN like Cloudinary or you can also use indirectly
# by using services like Google Photos.

# If you want to store images yourself, please read this guidelines:
# For users, if you only use this theme, put your images directly in `source/assets/images` folder
# But if you want to add local images, you can put your images directly in `source/assets/images` folder
# For developpers, if you modify this theme, put your images in `source/images` folder and
# use grunt task `build` to synchronize assets

baseURL = "https://xxxxx.github.io"
languageCode = "ja"
defaultContentLanguage = "en-us"
title = "桃太郎のページ"
theme = "hugo-tranquilpeak-theme"
# disqusShortname = "hugo-tranquilpeak-theme"
googleAnalytics = "UA-123-45"
paginate = 10
canonifyurls = true

[permalinks]
  post = "/:year/:month/:slug/"

[taxonomies]
  tag = "tags"
  category = "categories"
  archive = "archives"

[author]
  name = "桃太郎"
  bio = "桃から生まれました。"
  job = "鬼退治"
  location = "岡山"
  # Your Gravatar email. Overwrite `author.picture` everywhere in the blog
  # gravatarEmail = "[e-mail]"
  # Your profile picture
  # Overwritten by your gravatar image if `author.gravatarEmail` is filled
  picture = "https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png"
  # Your Twitter username without the @. E.g : thibaudlepretre
  # twitter = "thibaudlepretre"
  # Your google plus profile id. E.g : +ThibaudLepretre or 114625208755123718311
  # googlePlus = "+ThibaudLepretre"

# Menu Configuration
[[menu.main]]
  weight = 1
  identifier = "home"
  name = "Home"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-home\"></i>"
  url = "/"
[[menu.main]]
  weight = 2
  identifier = "categories"
  name = "Categories"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-bookmark\"></i>"
  url = "/categories"
[[menu.main]]
  weight = 3
  identifier = "tags"
  name = "Tags"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-tags\"></i>"
  url = "/tags"
[[menu.main]]
  weight = 4
  identifier = "archives"
  name = "Archives"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-archive\"></i>"
  url = "/archives"
# [[menu.main]]
#   weight = 5
#   identifier = "about"
#   name = "About"
#   pre = "<i class=\"sidebar-button-icon fa fa-lg fa-question\"></i>"
#   url = "/#about"

[[menu.links]]
  weight = 1
  identifier = "github"
  name = "GitHub"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-github\"></i>"
  url = "https://github.com/xxxxx"
[[menu.links]]
  weight = 2
  identifier = "twitter"
  name = "Twitter"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-twitter-square\"></i>"
  url = "https://twitter.com/xxxxx"
# [[menu.links]]
#   weight = 2
#   identifier = "stackoverflow"
#   name = "Stack Overflow"
#   pre = "<i class=\"sidebar-button-icon fa fa-lg fa-stack-overflow\"></i>"
#   url = "https://stackoverflow.com/users/636472/kakawait"

# [[menu.misc]]
#   weight = 1
#   identifier = "rss"
#   name = "RSS"
#   pre = "<i class=\"sidebar-button-icon fa fa-lg fa-rss\"></i>"
#   url = "/index.xml"

[params]
  # Customize date format use to render blog post date, categories and other
  # You must use date format used by Go Time package https://golang.org/pkg/time/
  # Months (not work with short month like "jan", "feb", etc) are translated if translation exists on i18n folders
  # Default format is: January 2, 2006
  # dateFormat = "2 January 2006"

  # Global keywords configuration. Following keywords will be add to every pages
  # keywords = ["development", "next-gen"]

  # Syntax highlighter, possible choice between: "highlight.js" (recommanded) and "prism.js" (experimental)
  # You can comment it to disable syntax highlighting
  syntaxHighlighter = "highlight.js"

  # Hide sidebar on all article page to let article take full width to improve reading, and enjoy wide images and cover images. (true: enable, false: disable)
  clearReading = false

  # Define categories will create hierarchy between parents: `categories = ["foo", "bar"]` will consider "bar" a sub-category of "foo".
  # If false it will flat categories.
  hierarchicalCategories = true

  description = "桃から生まれた桃太郎のページです。"

  # Customization
  # Define the behavior of the sidebar
  # 1: Display extra large sidebar on extra large screen, large sidebar on large screen,
  #    medium sidebar on medium screen and header bar on small screen and
  # extra large sidebar is swiped on extra large screen and large sidebar on all lower screen (default)
  # 2: Display large sidebar on large screen, medium sidebar on medium screen and
  #    header bar on small screen and large sidebar is swiped
  # 3: Display medium sidebar on large and medium screen and header bar on small screen and
  #    medium sidebar is swiped
  # 4: Display header bar on all screens, extra large sidebar is swiped on extra large screen and
  #    large sidebar is swiped on all lower screens
  # 5: Display header bar on all screens and large sidebar is swiped on large screen
  # 6: Display header bar on all screens and medium sidebar is swiped
  sidebarBehavior = 2

  # Your blog cover picture. I STRONGLY recommend you to use a CDN to speed up loading of pages.
  # There is many free CDN like Cloudinary or you can also use indirectly
  # by using services like Google Photos.
  # Current image is on AWS S3 and delivered by AWS CloudFront.
  # Otherwise put your image, for example `cover.jpg` in folder `static/images/`,
  # and use relative url : `images/cover.jpg`
  coverImage = "images/cover-v1.2.0.jpg"

  # Display an image gallery at the end of a post which have photos variables (false: disabled, true: enabled)
  imageGallery = true

  # Display thumbnail image of each post on index pages (false: disabled, true: enabled)
  thumbnailImage = true
  # Display thumbnail image at the right of title in index pages (`right`, `left` or `bottom`)
  # Set this value to `right` if you have old posts to keep the old style on them
  # and define `thumbnailImagePosition` on a post to overwrite this setting
  thumbnailImagePosition = "left"
  # Automatically select the cover image or the first photo from the gallery of a post if there is no thumbnail image as the thumbnail image
  # Set this value to `true` if you have old posts that use the cover image or the first photo as the thumbnail image
  # and set `autoThumbnailImage` to `false` on a post to overwrite this setting
  autoThumbnailImage = true

  # Your favicon path, default is "/favicon.png"
  # favicon = "/favicon.png"

  # Header configuration
  # The link at the right of the header is customizable
  # You can add a link (as an icon) at the right of the header instead of the author's gravatar image or author's picture.
  # By default, author's gravatar or author's picture is displayed.
  #     url: /#search
  #     icon: search
  #     class: st-search-show-outputs

  # Display `Next` on left side of the pagination, and `Prev` on right side one.
  # If you set this value to `true`, these positions swap.
  swapPaginator = true

  # Custom CSS. Put here your custom CSS files. They are loaded after the theme CSS;
  # they have to be referred from static root. Example
  # [[params.customCSS]]
  #   href = "css/mystyle.css"

  # Custom JS. Put here your custom JS files. They are loaded after the theme JS;
  # they have to be referred from static root. Example
  # [[params.customJS]]
  #   src = "js/myscript.js"

  # Sharing options
  # Comment and uncomment to enable or disable sharing options
  # If you wanna add a sharing option, read user documentation :
  # Tranquilpeak configuration > Theme configuration > sharing-options
  [[params.sharingOptions]]
    name = "Facebook"
    icon = "fa-facebook-official"
    url = "https://www.facebook.com/sharer/sharer.php?u=%s"

  [[params.sharingOptions]]
    name = "Twitter"
    icon = "fa-twitter"
    url = "https://twitter.com/intent/tweet?text=%s"

  # [[params.sharingOptions]]
  #   name = "Google+"
  #   icon = "fa-google-plus"
  #   url = "https://plus.google.com/share?url=%s"

  # [params.header.rightLink]
  #   class = ""
  #   icon = ""
  #   url = "/#about"

  # Customize link of author avatar in sidebar
  # [params.sidebar.profile]
  #   url = "/#about"

  # Customize copyright value "© 2017 <CUSTOMIZATION>. All Rights Reserved"
  [params.footer]
    copyright = "<a href=\"https://github.com/xxxxx\">桃太郎</a>"

記事（post）を作成する

テスト用にテーマから複製した記事を削除する。

$ rm -rf content/post/*

テーマの記事を参考にして、記事を作成する。なお、テーマの記事はthemes/hugo-tranquilpeak-theme/exampleSite/content/post/にある。

$ cd ../..
$ hugo new post/post名.md
$ vi content/post/post名.md
---
title: "post名"  <-- 公開する記事のタイトルに変更
date: 2019-07-23T01:08:46+09:00  <-- 必要に応じて変更
categories:
- category  <-- 必要に応じて変更
- subcategory  <-- 必要に応じて変更
tags:
- tag1  <-- 必要に応じて変更
- tag2  <-- 必要に応じて変更
keywords:
- tech  <-- 必要に応じて変更
#thumbnailImage: //example.com/image.jpg  <-- 必要に応じて変更
---  <-- これより下にマークダウンで記事の内容を入力

<!--more-->  <-- これより上の部分は記事のリストに表示

公開用サイトを作成し、アップロードする

公開用サイトを作成する。

$ hugo

リモートリポジトリユーザー名.github.ioを更新する。

$ cd public/
$ git add -A
$ git commit -m "Make site by Hugo"
# git push

GitHub Pagesを確認する。

$ open https://ユーザー名.github.io

Hugoのプロジェクトをリモートリポジトリユーザー名Siteへ登録する

$ cd ..
$ git add -A
$ git commit -m "Make Hugo project"
$ git push -u origin master

サイトを更新する

以降、サイトの設定、固定ページや記事の作成・修正・削除等を行った場合は、サイトを確認し、リモートリポジトリを更新する。

$ cd ~/GitHub/ユーザー名Site/
$ hugo server -w  <-- ターミナルの別のウィンドウで
$ open http://localhost:1313/  <-- ローカル環境でサイトを確認
$ hugo  <-- 公開用サイトを作成
$ cd public/
$ git add -A
$ git commit -m "コメント"
# git push  <-- リモートリポジトリ ユーザー名.github.ioに登録されている公開用サイトを更新
$ open https://ユーザー名.github.io  <-- GitHub Pagesを確認
$ cd ..
$ git add -A
$ git commit -m "コメント"
$ git push  <-- リモートリポジトリ ユーザー名Siteに登録されているHugoのプロジェクトを更新

備考

• 記事ファイルの「---」で囲まれている部分はFront Matterと言い、ページ単位の設定を記述する領域である。
• 記事の表示順序を変えるときはFront Matter「weight = 数字」を記述する。数字が小さいほど上位に表示される。また、weightが設定されている記事は設定されていない記事より上位に表示される。
• date変数は日付のみでも良い（例えば，"2019-07-10"）。
  しかし、タイムゾーンはUTCとなるため、日本では午前9時までは未来の投稿となりhugoコマンドではbuildされない。
  その場合は、未来のpostもbuildするオプション-Fを使用する。
  ただし、他に未来のpostがあると、それらも一緒にbuildされることに注意が必要。

$ hugo -F