🔖

HUGOで作ったブログにテーマを導入してみよう!

2023/10/13に公開

はじめに

「自分だけのカッコいいブログサイトを作ってみたいー!!」と思ったことはありませんか?
今回は爆速でブログを作成できることで有名なGo言語のフレームワーク「HUGO」を使って、自分だけのオリジナルブログサイトを作ってみたいと思います。

使ったもの

使ったもの バージョン
macOS Ventura 13.3.1
Visual Studio Code 1.80.1
hugo v0.113.0+extended darwin/arm64

HUGOとは

HUGO(ヒューゴ)は、Go言語で作成されたWebサイトを作成するためのフレームワークです。
https://gohugo.io/

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
(Hugo は、最も人気のあるオープンソースの静的サイト ジェネレーターの 1 つです。Hugo の驚くべきスピードと柔軟性により、Web サイトの構築が再び楽しくなります。)

なんて公式サイトのトップページに書いてある通り、Webサイト構築のスピードを売りにしています。本記事でも触れますが、実際どのくらい早く構築できるかはこちらの方々の記事を参考にしていただければと思います。
https://zenn.dev/harachan/articles/a043e9a756cae4
https://zenn.dev/rivine/articles/2023-06-12-create-hugo-blog

その気になれば5分でサイト作れるなんて、とんでもないフレームワークです。

前提条件

・HUGOをインストールしていること。

もしインストールできていない場合は、下記のHUGOドキュメントを参考に...
macOS: https://gohugo.io/installation/macos/
Windows: https://gohugo.io/installation/windows/

サンプルブログ作成

ではでは早速ブログを作ってみましょう。
以下コマンドをターミナルで入力し、雛形を作成します。

hugo new site testblog
cd testblog
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

そうするとtestblog配下が、以下のようなディレクトリになるはずです。

testblog/
├── archetypes
├── assets
├── content/posts
├── data
├── layouts
├── resource/_gen
├── static
├── themes/ananke
├── .gitmodules
├── .hugo_build.lock
├── hugo.toml

雛形ができたら、一旦HUGOの設定ファイルであるhugo.tomlの中身を変更しましょう。ここではlanguageCodetitle(ブログの名前)を変更します。

hugo.toml
baseURL = 'http://example.org/'
languageCode = 'ja'
title = 'だいらのテストブログ'
theme = 'ananke'

それでは記事を作成してみましょう。
え!もう記事作れるんかいな!と思ったあなた、もう出来てしまうのです。
以下のコマンドをターミナルに入力します。

hugo new content posts/{記事のタイトル}.md

そうするとcontent/posts配下に以下のような内容のmdファイルが作成されます。
記事のタイトルは「My First Post」です。

my-first-post.md
---
title: "My First Post"
date: 2023-10-08T16:35:27+09:00
draft: true
---

このファイルに記事を書いていくことになります。

my-first-post.md
---
title: "My First Post"
date: 2023-10-08T16:35:27+09:00
draft: true
---
初めまして!
ブログ始めました!!

記事が書き終わったら、今度は以下のコマンドをターミナルに打ち込みます。

hugo server --buildDrafts
Start building sites … 
hugo v0.113.0+extended darwin/arm64 BuildDate=unknown

                   | EN  
-------------------+-----
  Pages            | 10  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  0  
  Aliases          |  1  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 72 ms
<省略>
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

実際にhttp://localhost:1313/にブラウザからアクセスしてみると、、、

なんということでしょう。もうブログが完成してしまいました。あまりにも早すぎる。

カスタマイズしよう

あとはサーバーにデプロイすれば公開できちゃいます。が、いかんせんデフォルトのままだとオリジナリティがなくてつまらない、、。ここで、ブログにテーマを導入し、カスタマイズを行なっていこうと思います。

テーマ変更

1. テーマを選ぼう

テーマの変更を行なっていきます。
HUGOは公式サイト内で、様々なテーマ素材を提供しています。かなりの数のテーマが提供されているので、自分の感性に響くものが見つかるはずです。
https://themes.gohugo.io/

筆者は以下の観点から今回テーマを選択することにしました。

・デザインがシンプルで見やすいこと
・ドキュメントが非常にシンプルでわかりやすく、既にあるhugo.toml内で設定を完結できること
・デフォルトでライトモード・ダークモードが実装されていること、なんかあるとかっこいいでしょ

最終的に選んだのはこちらのテーマです。
https://themes.gohugo.io/themes/hugo-paper/


2. テーマを導入しよう

導入方法はテーマによって様々ですので、逐一テーマのドキュメントを調べる必要があります。
それでは早速公式documentに沿って導入してみましょう。
https://github.com/nanxiaobei/hugo-paper

まずブログプロジェクトのディレクトリ内で以下コマンドを入力します。

git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper

それから、hugo.tomlファイル内のthemeの部分をpaperに変更します。

hugo.toml
baseURL = 'http://example.org/'
languageCode = 'ja'
title = 'だいらのテストブログ'
# 変更箇所
theme = 'paper'

そしてもう一度ビルドして、http://localhost:1313/にブラウザからアクセスしてみます。すると.....

ご覧の通り、テーマが変わってます!


3. テーマをカスタマイズしよう

まだちょっと味気ないので、導入したテーマをドキュメントに沿ってカスタマイズします。

baseURL = 'http://example.org/'
languageCode = 'ja'
title = 'だいらのテストブログ'
theme = 'paper'

[params]
  # color style
  color = 'linen'                           # linen, wheat, gray, light

  # header social icons
  twitter = 'https://twitter.com/'               # twitter.com/YOUR_TWITTER_ID
  github = 'https://github.com/'                 # github.com/YOUR_GITHUB_ID
  instagram = 'https://www.instagram.com/'           # instagram.com/YOUR_INSTAGRAM_ID

  # home page profile
  avatar = 'https://1.bp.blogspot.com/-8kVWOTWYLj8/X1CLTTpI_aI/AAAAAAABa6g/qAFw1VsTiqk0-nj7y7vQsx3fgvLtfmnWQCNcBGAsYHQ/s1600/character_takoyaki.png'                 # gravatar email or image url
  name = 'だいら'
  bio = 'だいらです'

  # misc
  disableHLJS = true                        # disable highlight.js
  disablePostNavigation = true              # disable post navigation
  monoDarkIcon = false                       # show monochrome dark mode icon
  math = true                               # enable KaTeX math typesetting globally

  comments = true

テーマによってはカスタマイズが難しいものもありますが、今回私が選んだテーマ、「hugo-paper」は既にあるhugo.toml内で設定を完結させることができます。
そしてもう一度ビルドしてhttp://localhost:1313/にアクセスします。

設定がちゃんと反映されています!(ちゃっかり記事も増やしてます!)

ダークモードも特に面倒な設定をせずに実装できて、中々いい感じです。

おわりに

HUGOで思った以上にサイトが高速で作れてしまい、非常に驚きました。超簡単に個人ブログを始めたいのであれば、HUGOは選択肢の一つに上がりそうです。次回は今回作ったサイトを実際にデプロイ&Github Actionsなどを用いて自動デプロイができるようにしてみようと思います!

追記(2023/11/2).今回作成したブログをデプロイする流れの記事を書きました!ご興味があれば読んでください〜
https://zenn.dev/emp_tech_blog/articles/f3b79c181aae4c

参考資料まとめ

https://gohugo.io/
https://themes.gohugo.io/
https://github.com/nanxiaobei/hugo-paper

GitHubで編集を提案

Discussion