Hugoでブログを作ってみましょう
ブログを作り直した
上にあるようにブログを作り直した。もともとはWordPress+ystandardを使っていたがカスタマイズが面倒くさくなったので最初からおしゃれなテーマを使ってやった。
そんなのはどうでもいいのです。hugoでブログを作って公開するまでをやっていきます。
準備
hugoのインストールだけ
Windows
winget install Hugo.Hugo.Extended
mac
brew install hugo
Linux
sudo snap install hugo
サイトの作成
ローカルにサイトを作っていきます。
hugo new site <サイト名>
コレを実行するとサイト名のディレクトリが作成されます。
こんな感じです。
テーマの選定
テーマを選定していきます。
上のサイトから良さげなものを選んで
今回はBlowfishというテーマを選択しました。
んで大体のテーマはsubmoduleでインストールすることが出来るので
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
テーマの設定
ここはテーマ依存なので自分でちゃんとドキュメントや公式のリポジトリを読んでください!!
ここではBlowfishの場合です。
まずルートにあるhugo.tomlを削除します。
削除したらconfig/_defaultというディレクトリを作成してその中にhugo.tomlを作成します。
# サイトのベースURLを指定。ルートパスを使用
baseURL = "/"
# サイトの言語コードを日本語に設定
languageCode = "ja"
# コンテンツのデフォルト言語を日本語に設定
defaultContentLanguage = "ja"
# 使用するHugoのテーマを指定（Blowfishテーマ）
theme = "blowfish"
[frontmatter]
# ページの最終更新日時を取得する方法を指定
# :git - Gitの最終コミット日時
# :fileModTime - ファイルの最終更新日時
# :default - デフォルトの最終更新日時
lastmod = [":git", ":fileModTime", ":default"]
[outputs]
# ホームページの出力形式を指定
# HTMLページ、RSSフィード、JSONを出力
home = ["HTML", "RSS", "JSON"]
続いて言語ごとのファイルを作っていきます。複数言語対応はしないのでjaだけでOK。
config/_default内にlanguages.ja.tomlを作成します。
# サイトのタイトルを指定
title = "いぐざんぷる"
# 言語コードを日本語に設定
languageCode = "ja"
# 言語名を日本語で指定
languageName = "日本語"
[params.author]
# 著者情報を設定
# 著者の名前
name = "さめのこ"
# 著者のアイコン画像のパス
image = "img/icon.png"
# 著者の一言紹介
headline = "ららら"
# 著者の詳細な紹介文
bio = "基本的に家の中にずっといる。"
# 著者のリンク集（GitHubとTwitterのURLを指定）
links = [
{ github = "https://github.com/username" },
{ twitter = "https://x.com/username" }
]
[params]
# サイトに表示される言語名を指定
displayName = "JA"
# ISO形式の言語コードを指定
isoCode = "ja"
# 日付フォーマットを設定
# 例: 2006年1月2日 15時04分
dateFormat = "2006/01/02 15:04"
dateFormatってなんでこんなわかりにくいんでしょうってキレながら設定した(Goの仕様)
またimgフォルダはassets内に作成してください(ルートには作成しない)
# サイト全体の配色スキームを指定（Blowfishテーマの設定を使用）
colorScheme = "blowfish"
# 検索機能を有効化
enableSearch = true
# デフォルトの背景画像を指定
defaultBackgroundImage = "img/kari.png"
# デフォルトの注目（フィーチャー）画像を指定
defaultFeaturedImage = "img/kari.png"
# コードブロックの「コピー」ボタンを有効化
enableCodeCopy = true
# 画像の最適化を無効化しない（最適化は有効）
disableImageOptimization = false
# 画像ズーム機能を無効化
disableImageZoom = false
[header]
# ヘッダーのレイアウトを固定に設定
layout = "fixed"
[homepage]
# ホームページのレイアウトを背景画像スタイルに設定
layout = "background"
# ホームページの背景画像を指定
homepageImage = "img/back.jpg"
# ホームページに最近の投稿を表示
showRecent = true
# 「さらに見る」リンクを表示
showMoreLink = true
# ホームページをカードビューで表示
cardView = true
# ホームページの背景にブラー（ぼかし）効果を適用
layoutBackgroundBlur = true
[article]
# 記事ページに日付を表示
showDate = true
# ヒーロー画像を表示
showHero = true
# ヒーロー画像を背景として表示
heroStyle = "background"
# 更新日を表示しない
showDateUpdated = false
# 読了時間を表示
showReadingTime = true
# 記事ページに目次を表示
showTableOfContents = true
# 記事ページにタクソノミー（カテゴリやタグ）を表示
showTaxonomies = true
# 文字数を表示しない
showWordCount = false
# 記事ページに共有リンクを表示（Twitter、Bluesky、Telegram）
sharingLinks = ["twitter", "bluesky", "telegram"]
# 記事ページの背景にブラー（ぼかし）効果を適用
layoutBackgroundBlur = true
# 記事ページに著者情報を表示
showAuthor = true
[list]
# リストページにカードを表示
showCards = true
# リストページをカードビューで表示
cardView = true
画像などに関しては適宜パスを編集していただきたいです。(ないならimg/background.svgにしておく)
記事を作成する
ここはおそらく全テーマ共通であろう項目。
まずarchetypes/default.mdを編集します。
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
description: ""
---
これでいい感じに記事が作成されるようになる。
記事は次のコマンドで作成できます。
hugo new content posts/<記事のslug>/index.md
以下のようなものを書いた。
---
title: "First"
date: 2024-10-09T04:08:50+09:00
draft: false
description: ""
---
## これは初めての記事です!!
これはこのブログの始めての記事です!!
これを編集するか削除して新たにコンテンツを作りましょう!!
プレビューする
ここまで設定したサイトを動かしてみましょう!!
hugo serve -D
を実行したあとブラウザでlocalhost:1313を開きましょう。
はい！できましたね！
ちょっとブラッシュアップする
ここらへんはもう自分のしたいようにです。私も少しだけ手を加えました。
こんな感じになった!!
.gitignore
必要だと思うので乗っけておく。
# Hugo build output
/public/
/resources/_gen/
/assets/jsconfig.json
/assets/tsconfig.json
# Hugo file cache
.hugo_build.lock
# Log files
/logs/
/*.log
# Dependency directories
/node_modules/
/.bower_components/
# OS-generated files
.DS_Store
Thumbs.db
# Optional IDE configurations
.idea/
/.vscode/
/*.swp
# Hugo server settings
/.hugo_cache/
これで余計なファイルが乗らない。
Netlifyにデプロイ
githubでリポジトリを作ってそこにプッシュしておきましょう。
今回は↑を。
口頭で説明するの面倒くさくなった()
設定項目は
Build command -> hugo --gc --minify
Publish directory -> public
環境変数
HUGO_VERSION : 0.135.0
にです。
終わり
以上です。
Discussion