[{"content":"はじめに Hugo を使った静的サイト構築でよく使うコマンドをまとめました。\n本記事は初心者から中級者向けに、ビルド・サーバ起動・コンテンツ作成・テーマ管理 の操作を整理しています。\nサイトの新規作成 hugo new site \u0026lt;サイト名\u0026gt; 開発用サーバーの起動（ローカルプレビュー） hugo server # 下書き含むサーバ起動 hugo server -D # ポート指定例 hugo server -D -p 1313 新規コンテンツの作成 # 新しい記事作成 hugo new posts/\u0026lt;記事名\u0026gt;.md # ページ作成 hugo new about.md 作成時には draft: true が自動で付くため、公開時は draft: false に変更\n公開用ビルド # 公開用サイト生成（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 = \u0026#34;PaperMod\u0026#34; # テーマのアップデート git submodule update --remote --merge # テーマの削除 rm -rf themes/\u0026lt;テーマ名\u0026gt; テーマは themes/ ディレクトリに配置し、config.toml などで theme を指定します。 公式サイトで好みのテーマを探し、GitHubから追加できます。 アップデートや削除もコマンドで簡単に管理できます。\n設定ファイルの確認 config.toml や config.yaml を編集して設定を変更できます。\nこれらのコマンドを使うことで、Hugoでのサイト運営がより効率的になります。\n","permalink":"https://blog-ttt.netlify.app/posts/hugo%E3%81%A7%E3%82%88%E3%81%8F%E4%BD%BF%E3%81%86%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89/","summary":"\u003ch2 id=\"はじめに\"\u003eはじめに\u003c/h2\u003e\n\u003cp\u003eHugo を使った静的サイト構築でよく使うコマンドをまとめました。\u003cbr\u003e\n本記事は初心者から中級者向けに、\u003cstrong\u003eビルド・サーバ起動・コンテンツ作成・テーマ管理\u003c/strong\u003e の操作を整理しています。\u003c/p\u003e\n\u003ch2 id=\"サイトの新規作成\"\u003eサイトの新規作成\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-sh\" data-lang=\"sh\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ehugo new site \u0026lt;サイト名\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"開発用サーバーの起動ローカルプレビュー\"\u003e開発用サーバーの起動（ローカルプレビュー）\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-sh\" data-lang=\"sh\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ehugo server\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# 下書き含むサーバ起動\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ehugo server -D\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# ポート指定例\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ehugo server -D -p \u003cspan class=\"m\"\u003e1313\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"新規コンテンツの作成\"\u003e新規コンテンツの作成\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-sh\" data-lang=\"sh\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# 新しい記事作成\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ehugo new posts/\u0026lt;記事名\u0026gt;.md\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# ページ作成\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ehugo new about.md\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e作成時には draft: true が自動で付くため、公開時は draft: false に変更\u003c/p\u003e\n\u003ch2 id=\"公開用ビルド\"\u003e公開用ビルド\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-sh\" data-lang=\"sh\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# 公開用サイト生成（minify付き）\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ehugo --minify\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# 出力先指定\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ehugo --minify -d public\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"テーマ管理\"\u003eテーマ管理\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-sh\" data-lang=\"sh\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# テーマ一覧（公式）\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ehttps://themes.gohugo.io/\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# PaperModテーマ追加例\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003egit submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# テーマの設定（configファイルで指定）\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nv\"\u003etheme\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s2\"\u003e\u0026#34;PaperMod\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# テーマのアップデート\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003egit submodule update --remote --merge\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# テーマの削除\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003erm -rf themes/\u0026lt;テーマ名\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eテーマは \u003ccode\u003ethemes/\u003c/code\u003e ディレクトリに配置し、\u003ccode\u003econfig.toml\u003c/code\u003e などで \u003ccode\u003etheme\u003c/code\u003e を指定します。\n公式サイトで好みのテーマを探し、GitHubから追加できます。\nアップデートや削除もコマンドで簡単に管理できます。\u003c/p\u003e","title":"Hugoでよく使うコマンド"},{"content":"ことの発端 独自ドメインを取得してみようと調べてるとCloudflareが一番安そうなので登録してみたらCloudflare Pagesなる静的コンテンツのホスティングサービスがあるのを知ったことから始まった。\nちなみに今までGitHub PagesやNetlifyを触ったことがあったのでそれほど苦労はなかった。\nHugoも簡単にブログを扱えそうだったのでGoらしいがやってみる\n本当にただのノリ\n実際にHugoをCloudflare Pagesにデプロイするまでの流れ 1. Hugoのインストール(Mac) まずはHugoをインストールする。\n環境はMacで参考にしたのはこちら\nと言ってもHomebrewは既にインストールされているのでこれだけでそれ以外は特にしなかった\nbrew install hugo 2. Hugoでサイトを作成 チュートリアルを進めていく。\nサイト全体作成\nhugo new site quickstart cd quickstart git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke echo \u0026#34;theme = \u0026#39;ananke\u0026#39;\u0026#34; \u0026gt;\u0026gt; hugo.toml hugo server 記事を作成(contentなくてもいけた)\nhugo 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にしないと表示されないので注意。\nhugo server -D しとけば変更せずとも表示される。\n--- title: \u0026#34;My First Post\u0026#34; date: 2024-06-10T14:27:10Z draft: true --- 3. 最後にCloudflare Pagesにデプロイ Pages の新規作成 アカウント作成後、左メニューの「Workers \u0026amp; Pages」から「Pages」 タブを選択し、「Git に接続」 を選択。 Git リポジトリと連携 連携先は GitHub と GitLab が選べる、今回はGitHubを利用する 画面の手順にそって、GitHub 側でのリポジトリへの許可設定を行う。\nPages 側にて、対象の GitHub アカウントとリポジトリを選択し 「セットアップの開始」 を選択する。\nビルド＆デプロイのセットアップ プロジェクト名やプロジェクトブランチを設定する\nビルドコマンドは以下のようにした。 こうすることでいちいちconfig.ymlのbaseURLを変更しないで済むので。\nhugo -- -b $CF_PAGES_URL\n$CF_PAGES_URLは環境変数からセットできる。 おわり\n","permalink":"https://blog-ttt.netlify.app/posts/cloudflare-pages%E3%81%A7hugo%E3%82%92%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/","summary":"\u003ch2 id=\"ことの発端\"\u003eことの発端\u003c/h2\u003e\n\u003cp\u003e独自ドメインを取得してみようと調べてるとCloudflareが一番安そうなので登録してみたら\u003cstrong\u003eCloudflare Pages\u003c/strong\u003eなる静的コンテンツのホスティングサービスがあるのを知ったことから始まった。\u003c/p\u003e\n\u003cp\u003eちなみに今までGitHub PagesやNetlifyを触ったことがあったのでそれほど苦労はなかった。\u003c/p\u003e\n\u003cp\u003eHugoも簡単にブログを扱えそうだったのでGoらしいがやってみる\u003c/p\u003e\n\u003cp\u003e本当にただのノリ\u003c/p\u003e\n\u003ch2 id=\"実際にhugoをcloudflare-pagesにデプロイするまでの流れ\"\u003e実際にHugoをCloudflare Pagesにデプロイするまでの流れ\u003c/h2\u003e\n\u003ch3 id=\"1-hugoのインストールmac\"\u003e1. Hugoのインストール(Mac)\u003c/h3\u003e\n\u003cp\u003eまずはHugoをインストールする。\u003c/p\u003e\n\u003cp\u003e環境はMacで参考にしたのは\u003ca href=\"https://gohugo.io/installation/macos/\"\u003eこちら\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eと言ってもHomebrewは既にインストールされているのでこれだけでそれ以外は特にしなかった\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003ebrew install hugo\n\u003c/code\u003e\u003c/pre\u003e\u003ch3 id=\"2-hugoでサイトを作成\"\u003e2. Hugoでサイトを作成\u003c/h3\u003e\n\u003cp\u003e\u003ca href=\"https://gohugo.io/getting-started/quick-start/\"\u003eチュートリアル\u003c/a\u003eを進めていく。\u003c/p\u003e\n\u003cp\u003eサイト全体作成\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003ehugo new site quickstart\ncd quickstart\ngit init\ngit submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke\necho \u0026#34;theme = \u0026#39;ananke\u0026#39;\u0026#34; \u0026gt;\u0026gt; hugo.toml\nhugo server\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e記事を作成(contentなくてもいけた)\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003ehugo new content posts/my-first-post.md\nor\nhugo new posts/my-first-post.md\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e※作成されたファイル(content/posts/my-first-post.md)は以下のように\u003ccode\u003edraft: true\u003c/code\u003eになってるので\u003ccode\u003edraft: false\u003c/code\u003eにしないと表示されないので注意。\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003ehugo server -D \u003c/code\u003eしとけば変更せずとも表示される。\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e---\ntitle: \u0026#34;My First Post\u0026#34;\ndate: 2024-06-10T14:27:10Z\ndraft: true\n---\n\u003c/code\u003e\u003c/pre\u003e\u003ch3 id=\"3-最後にcloudflare-pagesにデプロイ\"\u003e3. 最後にCloudflare Pagesにデプロイ\u003c/h3\u003e\n\u003ch4 id=\"pages-の新規作成\"\u003ePages の新規作成\u003c/h4\u003e\n\u003cp\u003eアカウント作成後、左メニューの「Workers \u0026amp; Pages」から「Pages」 タブを選択し、「Git に接続」 を選択。\n\u003cimg alt=\"pagesのセットアップ画面\" loading=\"lazy\" src=\"/img/pages.png\"\u003e\u003c/p\u003e","title":"Cloudflare PagesでHugoをデプロイしてみた"}]