Hugoは、Go言語で記述された高速で強力な静的サイトジェネレーターであり、シンプルながらも柔軟性があり、ブログ、ドキュメント、ポートフォリオ、企業ウェブサイトなど、様々な種類のウェブサイトを簡単に作成することができます。

早速インストールして試してみますが、環境はWindows11のWSL上のUbuntuを利用します。

Hugoのインストール

Hugoにはstandardとextendedという二つのバージョンがあり、お勧めのextended版をパッケージマネジャーsnapを使ってインストールします。詳しい説明はここ

sudo snap install hugo

サイト作成

以下のコマンドを使って新しいサイトを作成します。--format yamlをつけることでHugo設定ファイルをYAML形式に指定します。デフォルトではTOMLになります。hugo.yamlがサイトの設定ファイルです。

hugo new site my-new-site --format yaml

テーマの選択

テーマに関しては、Hugoテーマサイトに様々なものがありますが、今回PaperModを使います。my-new-siteに移動してGithubにあるテーマをクローンします。将来テーマのアップデートはgit pullで行うことができます。

  • PaperModについてデモサイトに詳しい説明があります。
  • デモサイトのmarkdownのソースコードはGithubにあり、勉強になります。
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

設定ファイルhugo.yamlの編集

以下はサンプルの設定ファイルです。

baseURL: https://donsitnote.extendtech8.com/
title: Don's IT&Finance Notebook
theme: hugo-PaperMod
paginate: 5

enableInlineShortcodes: true
pygmentsUseClasses: true  # affect code display
enableEmoji: true
mainsections: ["posts", ]

languageCode: 'ja'

taxonomies:
  category: categories
  tag: tags
  series: series

menu:
  main:
    - name: Archive
      url: archives
      weight: 5
    - name: Search
      url: search/
      weight: 10
    - name: Tags
      url: tags/
      weight: 10

outputs:
  home:
    - HTML
    - RSS
    - JSON

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.

  defaultTheme: auto
  # disableThemeToggle: true
  ShowShareButtons: true
  ShowReadingTime: true
  disableSpecial1stPost: true # 
  displayFullLangName: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowRssButtonInSectionTermList: true
  ShowAllPagesInArchive: true
  ShowPageNums: true
  ShowToc: true

ブラウザでサイトを確認する

hugo server -D

Archiveページを有効にする

my-new-site/contentにarchives.mdファイルを作成し、以下の内容を記述すればブログの一覧が表示されます。

---
title: "Archive"
layout: "archives"
url: "/archives/"
summary: archives
---

検索（Search）を有効にする

hugo.yaml設定ファイルに以下のようにJSONの記述があることを確認し、なければ追加します。

1
2
3
4
5

outputs:
  home:
    - HTML
    - RSS
    - JSON # necessary for search

次に、my-new-site/contentにsearch.mdファイルを作成し、以下の内容を記述します。

1
2
3
4
5
6
7
8

---
title: "Search" # in any language you want
layout: "search" # necessary for search
# url: "/archive"
# description: "Description for Search"
summary: "search"
placeholder: "placeholder text in search input box"
---

検索の対象にしたくない記事にはその記事のfrontmatterに以下の記述を追加します。

searchHidden: true

サイトを公開する

まず以下のコマンドでサイトをpublishします。これによってmy-new-site/publicディレクトリに静的なサイトのすべてのファイルを作成されます。次にpublicディレクトリの内容をホスティングサーバに移せばサイトが公開されます。

hugo

Conoha WINGにサイトを公開します。

rsync -auv -e "ssh -p 8022" ./public/ cxxxxxxx@wwwyyy.conoha.ne.jp:/home/cxxxxxxx/public_html/abc.domainname.com/

記事を作成する

以下のコマンドを実行するとcontent/posts/create-filament-app.mdというファイルが作成されます。このファイルに新しい記事を書いていきます。

hugo new content content/posts/create-filament-app.md
# or
hugo new posts/create-filament-app.md