yy16ki’s diary


スポンサードリンク

トップ > Hugo > HugoとNetlifyでブログの環境構築

HugoとNetlifyでブログの環境構築

Hugo Netlify

いまのところ，はてなブログにてブログを作成していますが，静的サイトジェネレーターであるHugoというサービスを使えば，下記のような利点があることから，将来の移行を見据えつつ，環境構築をした際のメモになります．ホスティングサービスには，Netlifyを使用しました．

よさそうな点
・提供される様々なテーマから好みのものを選択可能
・markdownで記事を作成可能
・ソースはGitHubで管理可能
・変更内容をプッシュすれば，自動でサイトも更新される

作成したブログはこちらです．

https://www.data-blog.site/

前提条件

下記の環境で実施しています．

Ubuntu 20.04 on Windows
hugo_extended_0.101.0_Linux-64bit

Hugoのインストール

下記の通りインストールし，解凍します．

wget https://github.com/gohugoio/hugo/releases/download/v0.101.0/hugo_extended_0.101.0_Linux-64bit.tar.gz
tar -zxvf hugo_extended_0.101.0_Linux-64bit.tar.gz

PATHを通し，確認します．

hugo version

hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66+extended linux/amd64 BuildDate=2022-06-16T07:09:16Z VendorInfo=gohugoio

マニュアルに従って，簡単なサイトを作ってみます．

gohugo.io

#新規サイトを作成
hugo new site quickstart
tree

上記のコマンドを実行すると，quickstartというディレクトリが作成されます．はじめは下記のような構成となっていました．

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── public
├── static
└── themes

サイトディレクトリに移動し，リポジトリを作成します．

cd quickstart
git init

テーマのインストール

サイトのテーマをインストールします．
ここでは，「tranquilpeak」というテーマを使用しています．

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

tranquilpeak.kakawait.com

「tranquilpeak」テーマのディレクトリ配下は，下記のような構成となっていました．

cd themes/tranquilpeak
tree -L 1

.
├── CHANGELOG.md
├── Gruntfile.js
├── LICENSE
├── README.md
├── archetypes
├── docs
├── exampleSite
├── i18n
├── images
├── layouts
├── package-lock.json
├── package.json
├── release.sh
├── showcase.png
├── src
├── static
├── tasks
└── theme.toml

下記のように，他にも多くのテーマが存在するので，好みのものを選択できます．

jamstackthemes.dev

サイトのルートディレクトリに移動します．
サイトのデザインを変更するには，主にconfig.tomlに変更を加えていくことになるかと思います． まずは，使用するテーマに関する記述を加えます．

cd ../..
echo theme = \"tranquilpeak\" >> config.toml

これで，使用テーマの最低限の設定ができたことになります．

記事の作成

次に，下記のコマンドでサンプル記事を作成します．

hugo new posts/my-first-post.md

contentsディレクトリ配下にmy-first-post.mdが作成されます． 雛形の内容は下記の通りです．

---
title: "My First Post"
date: 2022-07-29T23:01:51+09:00
draft: true
---

このマークダウンファイルに記事の内容を書くだけでよいのはすごく便利です．drafttrueとなっているのは，このままでは本番環境で公開されないことを意味します．
下記のコマンドを実行すると，ローカルホスト上で，サイトを確認することができます．-Dオプションは--buildDraftsの略で，draft=trueの記事も確認することができます．

hugo server -D

記事を追加します．基本的には同様のコマンドで雛形を作成し，内容を記載していくのみです．

hugo new posts/my-second-post.md

---
title: "My Second Post"
date: 2022-07-29T23:11:40+09:00
draft: true
---

# Contents
Hello hugo

ローカルでサイトをチェックし、問題がなければ，draftをfalseに変更します．hugoコマンドを実行するとpublicフォルダ配下に，静的なHTMLファイルが出力されます．

Github側の準備

GitHubで，ブログ用のリモートリポジトリを作成しておきます．これまでに作成したサイトディレクトリから，GitHub上に作成したリモートリポジトリにソースをプッシュします．

git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/y-yasutomo/XXXXXXX.git
git push -u origin main

Netlify側の準備

Netlifyでは，アカウント登録・Gitと連携後，Import an existing project from a Git repositoryより，対象のリポジトリを選択するのみで，サイトURLが表示され，そこから内容を確認することができます．

Netlify

ソースプッシュによる自動更新

作業ディレクトリにて，下記のコマンドを実行し新しい投稿を作成してみます．

hugo new posts/my-third-post.md

draftをfalseに変更し，変更内容をリモートリポジトリにpushすると，NetlifyのURLで表示されるサイトでも，変更内容が反映されます．自動更新がうまくいかなかった場合でも，Netlify上でデプロイログを確認できるので，ここから原因を調査することが可能です．

変更内容の反映

カスタマイズ

サイトを少しカスタマイズしてみます． config.tomlを下記のように編集しました．ドキュメントをみながら手元で変更内容を確認しながら編集した形になるので，また別記事でこの内容はまとめたいと思います．

baseURL = '/'
title = 'My New Hugo Site'
languageCode = 'ja'
defaultContentLanguage = "ja"
theme = 'tranquilpeak'

[author]
  name = "ystomo"
  job = "SE"
  location = "Japan"
  # Your Gravatar email. Overwrite `author.picture` everywhere in the blog
  gravatarEmail = "XXXXX@XXXXX"

[params]
  sidebarBehavior = 2
  # post閲覧時にサイドバーをひっこめるオプション
  clearReading = true
  thumbnailImage = true
  dateFormat = "2006-01-02"
  thumbnailImagePosition = "left"
  autoThumbnailImage = true
  coverImage = "images/cover-marine.jpg"
  imageGallery = true
  hierarchicalCategories = true
  syntaxHighlighter = 'highlight.js'
  # Your Gravatar email. Overwrite `author.picture` everywhere in the blog
  gravatarEmail = "XXXXX@XXXXX"
  
[[menu.main]]
  weight = 1
  identifier = "home"
  name = "Home"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-home\" aria-hidden=\"true\"></i>"
  url = "/"

[[menu.main]]
  weight = 2
  identifier = "categories"
  name = "Categories"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-bookmark\" aria-hidden=\"true\"></i>"
  url = "/categories"
  
[[menu.main]]
  weight = 3
  identifier = "tags"
  name = "Tags"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-tags\" aria-hidden=\"true\"></i>"
  url = "/tags"

[[menu.main]]
  weight = 5
  identifier = "about"
  name = "About"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-question\" aria-hidden=\"true\"></i>"
  url = "/#about"

[[menu.main]]
  weight = 6
  identifier = "policy"
  name = "プライバシーポリシー"
  pre = "<i class=\"sidebar-button-icon fas fa-info-circle\" aria-hidden=\"true\"></i>"
  url = "/policy/privacy"

[[menu.links]]
  weight = 0
  identifier = "github"
  name = "GitHub"
  pre = "<i class=\"sidebar-button-icon fab fa-lg fa-github\" aria-hidden=\"true\"></i>"
  url = ""

[[menu.links]]
  weight = 0
  identifier = "LinkedIn"
  name = "LinkedIn"
  pre = "<i class=\"sidebar-button-icon fab fa-lg fa-linkedin\" aria-hidden=\"true\"></i>"
  url = ""

[[menu.links]]
  weight = 0
  identifier = "twitter"
  name = "twitter"
  pre = "<i class=\"sidebar-button-icon fab fa-lg fa-twitter\" aria-hidden=\"true\"></i>"
  url = ""

Netlify上でレンダリングがうまくいかない場合

カスタマイズしたブログの表示が，ローカルでテスト時は問題なくても，Netlifyでホストする際はうまくレンダリングされない場合があります．私の環境では，下記2点を対応することで，解決できました．

config.toml で設定されたbaseURLのパスが原因でアセットを探せない

上記のbaseURLに，/を指定している点です．調べたところ同じような症状の記事があったのでそちらを参考に修正したものです．

stackoverflow.com

ローカルとNetlify上でのHugo version

作業端末のHugo versionとNetlify上のHugo versionが異なる場合もうまくレンダリングされないことがあるようです．特に指定しない場合，Netlifyはデフォルトで，サイトの初期ビルドイメージにはじめからインストールされているHugoのバージョンを使用するようです．

By default we’ll use the Hugo version that is preinstalled in your site’s initial build image. Because the preinstalled version may not match your local version

docs.netlify.com

バージョンを明示的に変更するため，作業のルートディレクトリに，netlify.tomlを作成します．私の環境では，下記の通り設定しました．HUGO_VERSION = "0.101.0"の箇所が，ローカルのHugo versionと一致していれば概ね問題ないはずです．

[build]
publish = "public"
command = "hugo --theme=tranquilpeak --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.101.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

参考： docs.netlify.com

ファイル追加後，リモートリポジトリにプッシュし，Netlify上のログを確認すると，指定したコマンドが実行され，意図したHugoのバージョンが使用されていることがわかります．

ビルド時のログ

サイトを確認し，指定した形式で表示されていればOKです．

おわりに

Hugoや使用するテーマの設定方法をよく調べる必要がありますが，ソースをGit管理しつつマークダウンで記事を執筆できるのはよいな，という環境構築前の印象の通りでした．
記事にカテゴリやタグ付けすることで，はてなブログでは有料オプションになる，カテゴリごとの記事一覧ページ等の表示ができるのは個人的にはメリットです．
実際に記事を書いてみるとより細かな調節で苦戦する場面はありそうですが，まずは今後も使っていこうと思えるサービスでした． 　

参考

config.toml については，下記の記事も参考としました． tomtomtom.ga


スポンサードリンク