Hugo

はじめに Hugo を使った静的サイト構築でよく使うコマンドをまとめました。 本記事は初心者から中級者向けに、ビルド・サーバ起動・コンテンツ作成・テーマ管理 の操作を整理しています。 サイトの新規作成 hugo new site <サイト名> 開発用サーバーの起動（ローカルプレビュー） hugo server # 下書き含むサーバ起動 hugo server -D # ポート指定例 hugo server -D -p 1313 新規コンテンツの作成 # 新しい記事作成 hugo new posts/<記事名>.md # ページ作成 hugo new about.md 作成時には draft: true が自動で付くため、公開時は draft: false に変更 公開用ビルド # 公開用サイト生成（minify付き） hugo --minify # 出力先指定 hugo --minify -d public テーマ管理 # テーマ一覧（公式） https://themes.gohugo.io/ # PaperModテーマ追加例 git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod # テーマの設定（configファイルで指定） theme = "PaperMod" # テーマのアップデート git submodule update --remote --merge # テーマの削除 rm -rf themes/<テーマ名> テーマは themes/ ディレクトリに配置し、config.toml などで theme を指定します。 公式サイトで好みのテーマを探し、GitHubから追加できます。 アップデートや削除もコマンドで簡単に管理できます。 ...

ことの発端 独自ドメインを取得してみようと調べてるとCloudflareが一番安そうなので登録してみたらCloudflare Pagesなる静的コンテンツのホスティングサービスがあるのを知ったことから始まった。 ちなみに今までGitHub PagesやNetlifyを触ったことがあったのでそれほど苦労はなかった。 Hugoも簡単にブログを扱えそうだったのでGoらしいがやってみる 本当にただのノリ 実際にHugoをCloudflare Pagesにデプロイするまでの流れ 1. Hugoのインストール(Mac) まずはHugoをインストールする。 環境はMacで参考にしたのはこちら と言ってもHomebrewは既にインストールされているのでこれだけでそれ以外は特にしなかった brew install hugo 2. Hugoでサイトを作成 チュートリアルを進めていく。 サイト全体作成 hugo new site quickstart cd quickstart git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke echo "theme = 'ananke'" >> hugo.toml hugo server 記事を作成(contentなくてもいけた) hugo new content posts/my-first-post.md or hugo new posts/my-first-post.md ※作成されたファイル(content/posts/my-first-post.md)は以下のようにdraft: trueになってるのでdraft: falseにしないと表示されないので注意。 hugo server -D しとけば変更せずとも表示される。 --- title: "My First Post" date: 2024-06-10T14:27:10Z draft: true --- 3. 最後にCloudflare Pagesにデプロイ Pages の新規作成 アカウント作成後、左メニューの「Workers & Pages」から「Pages」 タブを選択し、「Git に接続」 を選択。 ...