おやつのじかん。

nukosuke's tech blog

ブログ作成ログ#1: Hugo + Netlify

2019年09月10日 · 1 min read
はてなブログから引越してきました
旧ブログはこちら

はじめに

はてなブログを4年ほどフリープランで使用してきましたが無料で独自ドメイン運用できるという点に魅かれて静的サイトのホスティングサービスNetlifyに乗りかえてみました。ブログホスティングではないため手づくりが必要で、まだまだ微妙なところが多々ありますが、これからカスタマイズしていきます。

まずは本ブログの構築&改善ログをここに残していく予定です。

構成

以下が今回使用する技術スタックです。

ツール・サービス名説明公式サイト
Hugo静的サイトジェネレータ。Go言語製のOSS。https://gohugo.io/
Netlify静的サイトのホスティングサービス。CDNで配信されるため高速にページがダウンロードされる。https://www.netlify.com/

Hugoプロジェクトの雛形生成

$ hugo new blog.nukosuke.com

テーマを使用する

テーマを自作して /themes に配置しました。CSSライブラリのBulmaをベースにし、Librarianと命名しました。テーマディレクトリを配置したら、 config.toml で指定します。

baseURL = "https://blog.nukosuke.com/"
relativeURLs = true
languageCode = "ja"
title = "おやつのじかん。"
theme = "librarian" # <- ここ!
googleAnalytics = "UA-12345678-9"

[Params]
  author = "nukosuke"
  subtitle = "nukosuke's tech blog"

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

[module]
  [[module.mounts]]
    source = "assets/stylesheets"
    target = "assets/stylesheets"
  [[module.mounts]]
    source = "node_modules/bulma"
    target = "assets/stylesheets/bulma"

テーマ側にTurbolinksを導入したことで、ページ遷移による再描画を効率的にするようになりました。

404ページ

/layouts/404.html に404ページのテンプレートを配置し、Netlifyの `_redirects_** 機能を使用することで、存在しないページにアクセスしたときの表示を制御することができます。これらのファイルを配置しない場合はNetlifyデフォルトの404ページが表示されます。

/layouts/404.html

{{ define "main"}}
    <main id="main">
      <div>
       <h1 id="title">404 お探しのページがみつかりません</h1>
       <a href="{{ "/" | relURL }}">トップページにもどる</a>
      </div>
    </main>
{{ end }}

content/_redirects

/* /404.html 404

今回はブログプロジェクト側にこれらのファイルを配置しましたが、汎用な設定は本来はテーマ側に置くべきでした。

さいごに

NetlifyといえばSPAをデプロイするのにも便利なサービスですが、今回はブログなのでSEOを考えるとSSRする必要がありました。 個人的にはGatsbyは自由度が高い反面設定が複雑すぎ、NextやNuxtはブログのような高頻度の更新を前提としたフレームワークでありませんのでHugoを採用しました。

今後はStimulusを使ってブログパーツに動きもつけていきたいです。