HUGOで作ったブログにテーマを導入してみよう!
はじめに
「自分だけのカッコいいブログサイトを作ってみたいー！！」と思ったことはありませんか？
今回は爆速でブログを作成できることで有名なGo言語のフレームワーク「HUGO」を使って、自分だけのオリジナルブログサイトを作ってみたいと思います。
使ったもの
| 使ったもの | バージョン |
|---|---|
| macOS | Ventura 13.3.1 |
| Visual Studio Code | 1.80.1 |
| hugo | v0.113.0+extended darwin/arm64 |
HUGOとは
HUGO(ヒューゴ)は、Go言語で作成されたWebサイトを作成するためのフレームワークです。
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サイト構築のスピードを売りにしています。本記事でも触れますが、実際どのくらい早く構築できるかはこちらの方々の記事を参考にしていただければと思います。
その気になれば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の中身を変更しましょう。ここではlanguageCodeとtitle(ブログの名前)を変更します。
baseURL = 'http://example.org/'
languageCode = 'ja'
title = 'だいらのテストブログ'
theme = 'ananke'
それでは記事を作成してみましょう。
え！もう記事作れるんかいな！と思ったあなた、もう出来てしまうのです。
以下のコマンドをターミナルに入力します。
hugo new content posts/{記事のタイトル}.md
そうするとcontent/posts配下に以下のような内容のmdファイルが作成されます。
記事のタイトルは「My First Post」です。
---
title: "My First Post"
date: 2023-10-08T16:35:27+09:00
draft: true
---
このファイルに記事を書いていくことになります。
---
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は公式サイト内で、様々なテーマ素材を提供しています。かなりの数のテーマが提供されているので、自分の感性に響くものが見つかるはずです。
筆者は以下の観点から今回テーマを選択することにしました。
・デザインがシンプルで見やすいこと
・ドキュメントが非常にシンプルでわかりやすく、既にあるhugo.toml内で設定を完結できること
・デフォルトでライトモード・ダークモードが実装されていること、なんかあるとかっこいいでしょ
最終的に選んだのはこちらのテーマです。
2. テーマを導入しよう
導入方法はテーマによって様々ですので、逐一テーマのドキュメントを調べる必要があります。
それでは早速公式documentに沿って導入してみましょう。
まずブログプロジェクトのディレクトリ内で以下コマンドを入力します。
git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper
それから、hugo.tomlファイル内のthemeの部分をpaperに変更します。
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).今回作成したブログをデプロイする流れの記事を書きました！ご興味があれば読んでください〜
参考資料まとめ
Discussion