🐈

Hugoを利用して速攻で静的サイト立ててみる#1

2023/12/14に公開

はじめに

最近、私用でサイトを立てなければならなくなり簡単にサクッと作れるものはないかと探していたところ"Hugo"という静的サイトジェネレーターを見つけました。Go製で以前にGoをたくさん触っていたので自分でカスタマイズできそうだったのでこれを使ってみようということになりました。

Hugoとは

https://gohugo.io/

簡単に言うとGo製エンジニア向けワードプレスになります。
理由としては大量にテーマが用意されっていて自分の好きなように且つGoプログラマーなら簡単にカスタムできると言う点です。(テーマのクオリティが高い。。。)

使ってみる

私はMacで建ててみました。

今回は"hugo-bootstrap-theme"というテーマを使ってみます。
https://github.com/filipecarneiro/hugo-bootstrap-theme

//初期プロジェクト作成
hugo new site hugo_sample1214
//記事の作成(中に適当に文字を入れてね)
hugo new post/good-to-great.md
//テーマをダウンロード
cd themes
git clone https://github.com/filipecarneiro/hugo-bootstrap-theme.git
//Rootに戻る
cd ../
//ローカルでサーバーを実行
hugo serve -t hugo-bootstrap-theme --buildDrafts

ディレクトリ構成

実行して以下のリンクにアクセスすると表示されます!!
http://localhost:1313/

レイアウトなど何もいじっていないのでただの記事とタイトルだけになっています。

レイアウトに関しては指定のテーマのレポジトリにあるExampleを確認またはコピーしてすると入り込みやすそうです!!
https://github.com/filipecarneiro/hugo-bootstrap-theme/tree/main/exampleSite

うまく行けば10分もかからずに作成できます。

残すはサーバーを借りてデプロイをすることになりますね。こちらに関しては次の記事になります!

参考にした記事

https://qiita.com/tamanugi/items/049dfa5149f5c03bf48d

MidraLab(ミドラボ)

Discussion