[{"data":1,"prerenderedAt":1235},["ShallowReactive",2],{"/blog/hugo-blog/":3,"related-map":846,"/blog/hugo-blog-surround":1230},{"id":4,"title":5,"body":6,"category":828,"coverImage":829,"date":830,"description":16,"draft":831,"extension":832,"meta":833,"navigation":834,"path":835,"rawbody":836,"seo":837,"stem":838,"tags":839,"__hash__":845},"blog/blog/hugo-blog/index.md","Hugo + Stackテーマで楽に作る個人ブログ",{"type":7,"value":8,"toc":794},"minimark",[9,13,17,20,31,38,43,46,53,56,72,75,81,87,91,100,103,106,110,119,126,132,139,144,152,155,164,171,175,182,189,194,197,200,206,211,215,223,230,235,242,249,260,265,276,279,285,291,295,298,301,307,310,313,319,322,325,335,339,342,348,359,362,371,377,380,383,397,406,419,421,426,432,443,449,458,461,464,470,479,482,488,494,500,503,509,520,531,534,537,540,546,553,557,560,600,603,606,620,626,630,635,638,645,649,657,664,670,674,680,689,697,700,705,708,714,720,726,731,734,747,752,763,766,773,776,779,782,791],[10,11,12],"h2",{"id":12},"はじめに",[14,15,16],"p",{},"この記事では弊ブログサイトを作るにあたって参考にした記事や公式ドキュメントを紹介する。誰でもわかりやすいような解説を目指すが、あくまでも備忘録であるため個別の質問等には応じられない可能性がある。",[14,18,19],{},"jimmy氏作のStack themeを使用してブログページを作り、windows11のVisual Studio Codeからgithubのレポジトリにcommit&push、そしてcloudflare pagesでビルドとデプロイをすること目標としているものと想定して解説をする。",[14,21,22,23,30],{},"また、完成形はStack themeの",[24,25,29],"a",{"href":26,"rel":27},"https://demo.stack.jimmycai.com/",[28],"nofollow","デモページ","を目指すものとする。",[14,32,33],{},[34,35],"img",{"alt":36,"src":37},"こんな感じ","https://images.bokukoha.dev/blog/hugo-blog/kansei.jpg",[39,40,42],"h3",{"id":41},"追記-ブログのカスタムとか","追記 : ブログのカスタムとか",[14,44,45],{},"この記事の手順自体には問題はないのですが、完成形としている「こは雑記帳」は一部カスタムしています（シェアボタンの追加、いいねボタンの追加など）。カスタムの簡単な解説は別ページで解説しているので、よければそちらも読んでみてください。",[14,47,48],{},[24,49,52],{"href":50,"rel":51},"https://blog.bokukoha.dev/p/hugo--stack%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AB%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%9C%E3%82%BF%E3%83%B3%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F/",[28],"Hugo + Stackのブログにシェアボタン実装した",[10,54,55],{"id":55},"筆者の環境",[14,57,58,59,62,63,65,66,68,69,71],{},"・Cloudflareでドメイン取得済み ",[60,61],"br",{},"\n・メインPCのOSはWindows11 ",[60,64],{},"\n・Cloudflareの各種サービスはある程度の利用経験あり ",[60,67],{},"\n・Linux及びWindowsの最低限のコマンド知識はあり（ディレクトリ移動やnano、touchなど）",[60,70],{},"\n・Gitの最低限の使用方法がわかる",[10,73,74],{"id":74},"開発環境",[14,76,77],{},[78,79,80],"strong",{},"結論 : Windows使ってるならWindowsで作ろう",[14,82,83,84,86],{},"当初は自鯖でホスティングしようと思っていたため、Proxmox上にLXCを建てて開発環境を作った。しかし、結局Cloudflare Pagesを利用したため、開発環境はWindows11（x64）で作るものとする。 ",[60,85],{},"\nCloudflare Pagesを使わずにgithubのwebhookを使ってビルドとデプロイを自動化するスクリプト書こうと思えるなら話は違うけど、楽に作るならcloudflare pagesがオススメ。",[10,88,90],{"id":89},"hugoのインストール","Hugoのインストール",[14,92,93,94,99],{},"基本的にHugoの",[24,95,98],{"href":96,"rel":97},"https://gohugo.io/installation/windows/",[28],"Windows用公式Doc","に沿って書くだけなので、これが読めてわかる人は読み飛ばしてもらっても問題ないかも。",[39,101,102],{"id":102},"前提条件",[14,104,105],{},"Hugoをインストールする前に、いくつか必要になるものがあるためそれらをインストールする。",[107,108,109],"h4",{"id":109},"gitのインストール",[14,111,112,113,118],{},"①まずgitの",[24,114,117],{"href":115,"rel":116},"https://git-scm.com/downloads",[28],"ダウンロードページ","にアクセスする。",[14,120,121,122,125],{},"②",[78,123,124],{},"Windows","を選択する",[14,127,128],{},[34,129],{"alt":130,"src":131},"","https://images.bokukoha.dev/blog/hugo-blog/git-ins1.jpg",[14,133,134,135,138],{},"③",[78,136,137],{},"64-bit Git for Windows Setup","を選択する。",[14,140,141],{},[34,142],{"alt":130,"src":143},"https://images.bokukoha.dev/blog/hugo-blog/git-ins2.jpg",[14,145,146,147,151],{},"④ダウンロードされた",[148,149,150],"code",{},"Git-x.xx.x-64-bit.exe","を起動し、gitをインストールする。",[14,153,154],{},"⑤windowsのコンソールで",[156,157,162],"pre",{"className":158,"code":160,"language":161},[159],"language-text","git --version\n","text",[148,163,160],{"__ignoreMap":130},[14,165,166,167,170],{},"と入力し、",[148,168,169],{},"git version x.xx.x","の様な出力が得られればOK。",[107,172,174],{"id":173},"goのインストール","Goのインストール",[14,176,177,178,118],{},"①Goのインストーラー",[24,179,117],{"href":180,"rel":181},"https://go.dev/dl/",[28],[14,183,184,185,188],{},"②Stable versionsリスト内から",[148,186,187],{},"gox.xx.x.windows-amd64.msi","を探してダウンロードする。",[14,190,191],{},[34,192],{"alt":130,"src":193},"https://images.bokukoha.dev/blog/hugo-blog/go-ins1.jpg",[14,195,196],{},"③ダウンロードしたインストーラーを起動し、Goをインストールする。",[14,198,199],{},"④Gitと同様にWindowsのコンソールで",[156,201,204],{"className":202,"code":203,"language":161},[159],"go version\n",[148,205,203],{"__ignoreMap":130},[14,207,166,208,170],{},[148,209,210],{},"go version gox.xx.x windows/amd64",[107,212,214],{"id":213},"dart-sassのインストール","Dart Sassのインストール",[14,216,217,218,118],{},"①Dart Sassの",[24,219,222],{"href":220,"rel":221},"https://github.com/sass/dart-sass/releases",[28],"公式GitHubリリースページ",[14,224,225,226,229],{},"②最新バージョンのリリースからWindows用のzipファイル（例",[148,227,228],{},"dart-sass-1.85.0-windows-x64.zip","）を探してダウンロードする。",[14,231,232],{},[34,233],{"alt":130,"src":234},"https://images.bokukoha.dev/blog/hugo-blog/dartsass-ins1.jpg",[14,236,237,238,241],{},"③ダウンロードしたzipファイルを解凍し、中身の",[148,239,240],{},"dart-sass","フォルダをわかりやすい場所（例 Cドライブ直下等）に配置する。",[14,243,244,245,248],{},"③Windowsの検索メニューから",[78,246,247],{},"環境変数を編集","のウィンドウを開く。",[14,250,251,252,255,256,259],{},"④ウィンドウ内のユーザー環境変数 or システム環境変数から",[148,253,254],{},"Path","を選択し",[78,257,258],{},"編集","をクリックする。",[14,261,262],{},[34,263],{"alt":130,"src":264},"https://images.bokukoha.dev/blog/hugo-blog/dartsass-ins2.jpg",[14,266,267,268,271,272,275],{},"⑤",[78,269,270],{},"新規","をクリックし、入力を求められている部分に②で配置したdart-sassフォルダのパスを入力する。（例 Cドライブ直下に配置していた場合は、",[148,273,274],{},"C:\\dart-sass","）",[14,277,278],{},"⑥前述の2つと同様に、Windowsのコンソールで",[156,280,283],{"className":281,"code":282,"language":161},[159],"sass --version\n",[148,284,282],{"__ignoreMap":130},[14,286,287,288,170],{},"と入力しｍ",[148,289,290],{},"x.xx.x",[39,292,294],{"id":293},"hugo本体のインストール","Hugo本体のインストール",[14,296,297],{},"前述の前提条件が全て揃っていることが確認出来たら、いよいよHugo本体をインストールする。",[14,299,300],{},"とはいってもこれは簡単で、Windowsのコンソールで",[156,302,305],{"className":303,"code":304,"language":161},[159],"winget install Hugo.Hugo.Extended\n",[148,306,304],{"__ignoreMap":130},[14,308,309],{},"と入力するだけでOK。特に問題が無ければ無事インストールが完了するはず。",[14,311,312],{},"インストール終了後は、前提条件同様にコンソールで",[156,314,317],{"className":315,"code":316,"language":161},[159],"hugo version\n",[148,318,316],{"__ignoreMap":130},[14,320,321],{},"と入力し、出力が得られることを確認することを忘れずに。",[107,323,324],{"id":324},"注意事項",[14,326,327,328,331,332,334],{},"前項で得られたバージョン出力が",[148,329,330],{},"0.123.0","より大きい数字であることを必ず確認すること。",[148,333,330],{},"はこの後導入するStackテーマが動作する最低バージョンであるため、これが小さい数字になっているとテーマがうまく動作しなくなる。",[10,336,338],{"id":337},"hugoでプロジェクト作成","Hugoでプロジェクト作成",[14,340,341],{},"ブログを作りたいディレクトリ内（例 Cドライブ直下）でコンソールで",[156,343,346],{"className":344,"code":345,"language":161},[159],"hugo new site your_blog_name\n",[148,347,345],{"__ignoreMap":130},[14,349,350,351,354,355,358],{},"と入力する。すると",[148,352,353],{},"C\\:your_blog_name","というHugoのプロジェクトフォルダが作成される。",[148,356,357],{},"your_blog_name","は任意の名前に変えること。",[10,360,361],{"id":361},"テーマ追加",[14,363,364,365,370],{},"Hugoのプロジェクトフォルダが作られたら、今回使用する",[24,366,369],{"href":367,"rel":368},"https://github.com/CaiJimmy/hugo-theme-stack",[28],"Stackというtheme","を追加する。",[156,372,375],{"className":373,"code":374,"language":161},[159],"cd your_blog_name\ngit init\ngit submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack\n",[148,376,374],{"__ignoreMap":130},[14,378,379],{},"それぞれのコマンドを実行することでthemeのフォルダが追加できる。",[381,382],"hr",{},[14,384,385,386,388,389,392,393,396],{},"次に、デモサイトのコンフィグ情報をそのまま",[148,387,357],{},"に適用する。\nrootディレクトリの",[148,390,391],{},"hugo.toml","を削除し、新たに",[148,394,395],{},"config.yaml","を作成しVScodeなどで開く。　",[14,398,399,400,405],{},"その中身に",[24,401,404],{"href":402,"rel":403},"https://github.com/CaiJimmy/hugo-theme-stack/blob/master/exampleSite/hugo.yaml",[28],"デモサイトconfig","の中身を全部貼り付けるだけでOK。",[407,408,409,413],"details",{},[410,411,412],"summary",{},"弊blogで使っているconfig.yml | これをコピペしてもOK（SNSリンク欄、タイトル等の基本情報、footer情報、コメントセクションのオンオフを変更している）",[156,414,417],{"className":415,"code":416,"language":161},[159],"baseurl: https://your_blog_url/\nlanguageCode: ja\ntheme: hugo-theme-stack\ntitle: your_blog_name\ncopyright: your_name\n\n# Theme i18n support\n# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw\nDefaultContentLanguage: en\n\n# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]\n# This will make .Summary and .WordCount behave correctly for CJK languages.\nhasCJKLanguage: true\n\npagination:\n    pagerSize: 3\n\npermalinks:\n    post: /p/:slug/\n    page: /:slug/\n\nparams:\n    mainSections:\n        - post\n    featuredImageField: image\n    rssFullContent: true\n    favicon: # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)\n\n    footer:\n        since: 9999\n        customText:\n\n    dateFormat:\n        published: Jan 02, 2006\n        lastUpdated: Jan 02, 2006 15:04 MST\n\n    sidebar:\n        emoji:\n        subtitle: A Japanese student.\n        avatar:\n            enabled: true\n            local: true\n            src: img/avatar.png\n\n    article:\n        math: false\n        toc: true\n        readingTime: true\n        license:\n            enabled: true\n            default: Licensed under CC BY-NC-SA 4.0\n\n    comments:\n        enabled: false\n        provider: disqus\n\n        disqusjs:\n            shortname:\n            apiUrl:\n            apiKey:\n            admin:\n            adminLabel:\n\n        utterances:\n            repo:\n            issueTerm: pathname\n            label:\n\n        beaudar:\n            repo:\n            issueTerm: pathname\n            label:\n            theme:\n\n        remark42:\n            host:\n            site:\n            locale:\n\n        vssue:\n            platform:\n            owner:\n            repo:\n            clientId:\n            clientSecret:\n            autoCreateIssue: false\n\n        # Waline client configuration see: https://waline.js.org/en/reference/component.html\n        waline:\n            serverURL:\n            lang:\n            pageview:\n            emoji:\n                - https://unpkg.com/@waline/emojis@1.0.1/weibo\n            requiredMeta:\n                - name\n                - email\n                - url\n            locale:\n                admin: Admin\n                placeholder:\n\n        twikoo:\n            envId:\n            region:\n            path:\n            lang:\n\n        # See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options\n        cactus:\n            defaultHomeserverUrl: \"https://matrix.cactus.chat:8448\"\n            serverName: \"cactus.chat\"\n            siteName: \"\" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)\n\n        giscus:\n            repo:\n            repoID:\n            category:\n            categoryID:\n            mapping:\n            lightTheme:\n            darkTheme:\n            reactionsEnabled: 1\n            emitMetadata: 0\n\n        gitalk:\n            owner:\n            admin:\n            repo:\n            clientID:\n            clientSecret:\n            proxy:\n\n        cusdis:\n            host:\n            id:\n    widgets:\n        homepage:\n            - type: search\n            - type: archives\n              params:\n                  limit: 5\n            - type: categories\n              params:\n                  limit: 10\n            - type: tag-cloud\n              params:\n                  limit: 10\n        page:\n            - type: toc\n\n    opengraph:\n        twitter:\n            # Your Twitter username\n            site:\n\n            # Available values: summary, summary_large_image\n            card: summary_large_image\n\n    defaultImage:\n        opengraph:\n            enabled: false\n            local: false\n            src:\n\n    colorScheme:\n        # Display toggle\n        toggle: true\n\n        # Available values: auto, light, dark\n        default: auto\n\n    imageProcessing:\n        cover:\n            enabled: true\n        content:\n            enabled: true\n\n### Custom menu\n### See https://stack.jimmycai.com/config/menu\n### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter\nmenu:\n    main: []\n\n    social:\n        - identifier: github\n          name: GitHub\n          url: https://github.com/\n          params:\n              icon: brand-github\n\n        - identifier: twitter\n          name: Twitter\n          url: https://x.com/\n          params:\n              icon: brand-twitter\n        \n        - identifier: misskey\n          name: Misskey\n          url: https://misskey.io/\n          params:\n              icon: misskey\n\nrelated:\n    includeNewer: true\n    threshold: 60\n    toLower: false\n    indices:\n        - name: tags\n          weight: 100\n\n        - name: categories\n          weight: 200\n\nmarkup:\n    goldmark:\n        extensions:\n            passthrough:\n                enable: true\n                delimiters:\n                    block:\n                        - - \\[\n                          - \\]\n                        - - $$\n                          - $$\n                    inline:\n                        - - \\(\n                          - \\)\n        renderer:\n            ## Set to true if you have HTML content inside Markdown\n            unsafe: true\n    tableOfContents:\n        endLevel: 4\n        ordered: true\n        startLevel: 2\n    highlight:\n        noClasses: false\n        codeFences: true\n        guessSyntax: true\n        lineNoStart: 1\n        lineNos: true\n        lineNumbersInTable: true\n        tabWidth: 4\n",[148,418,416],{"__ignoreMap":130},[381,420],{},[14,422,423,425],{},[148,424,395],{},"を無事に作成出来たら、次はいよいよ開発用サーバーを起動する。",[156,427,430],{"className":428,"code":429,"language":161},[159],"hugo server -D\n",[148,431,429],{"__ignoreMap":130},[14,433,434,435,438,439,442],{},"上記のコマンドをプロジェクトのrootディレクトリで実行することで",[148,436,437],{},"localhost:1313","に開発サーバーを起動できる。\n",[148,440,441],{},"-D","は下書きのポストも一覧に表示するためのオプションである。",[14,444,445,446,448],{},"お使いのブラウザで",[148,447,437],{},"にアクセスし、テーマがきちんと適用されていることを確認しよう。",[14,450,451],{},[452,453,454,455,457],"small",{},"※筆者は",[148,456,441],{},"を起動オプションに入れずにサーバーを起動し、下書きポストが表示されず10分ほど無駄なトラブルシューティングをすることになったため、上記の通り実行することを推奨。",[10,459,460],{"id":460},"投稿作成",[14,462,463],{},"テスト用の投稿を以下コマンドで作成することができる。",[156,465,468],{"className":466,"code":467,"language":161},[159],"hugo new content post/Hello-World/index.md\n",[148,469,467],{"__ignoreMap":130},[14,471,472,474,475,478],{},[148,473,437],{},"で記事が作成されていることが確認できるはず。\n",[148,476,477],{},"index.md","を編集し保存することでリアルタイムで記事の編集とプレビューができるのでとっても便利。",[39,480,481],{"id":481},"投稿のテンプレート作成",[14,483,484,485,487],{},"毎回",[148,486,477],{},"内でタイトルとかタグとか書くのは面倒なので、テンプレートを作成する。",[14,489,490,493],{},[148,491,492],{},"./archetypes/default.md","を作成し、中身を以下の様な感じにする。",[156,495,498],{"className":496,"code":497,"language":161},[159],"---\ntitle: '{{ replace .File.ContentBaseName \"-\" \" \" | title }}'\ndate: {{ .Date }}\ndraft: true\nimage: 'main.jpg'\ncategories:\n  - カテゴリ\ntags:\n  - タグ\n---\n\n## 記事\n",[148,499,497],{"__ignoreMap":130},[14,501,502],{},"これで、以降新しいページを",[156,504,507],{"className":505,"code":506,"language":161},[159],"hugo new content post/post_name/index.md\n",[148,508,506],{"__ignoreMap":130},[14,510,511,512,515,516,519],{},"で作ったときに、タイトルは",[148,513,514],{},"post_name","、日時は作った時刻、ポストのメイン画像は",[148,517,518],{},"post_name/main.jpg","を参照してくれるようになる。",[14,521,522,523,526,527,530],{},"カテゴリやタグは変更すること。また、公開する時には",[148,524,525],{},"draft:true","を",[148,528,529],{},"false","に変えることを忘れずに。",[10,532,533],{"id":533},"デフォルトからのカスタマイズ",[14,535,536],{},"Demoサイトと同じものにするために少しカスタマイズをする。必要ないと思う機能がある場合は飛ばして問題ないものもある。",[39,538,539],{"id":539},"左のアバター画像の追加",[14,541,542],{},[34,543],{"alt":544,"src":545},"これ","https://images.bokukoha.dev/blog/hugo-blog/avatar.jpg",[14,547,548,549,552],{},"解像度が150x150の画像を用意したら",[148,550,551],{},"assets/img","にavatar.jpgという名前で突っ込んであげるだけでOK。最初はimgディレクトリはないので、自分で作って上げるとよい。",[39,554,556],{"id":555},"aboutarchivessearchの追加","About・Archives・Searchの追加",[14,558,559],{},"それぞれthemeに機能として備わっているので、ページだけ追加してあげればOK。",[407,561,562,565,572,578,583,589,594],{},[410,563,564],{},"丸パクリでOK",[566,567,568],"ul",{},[569,570,571],"li",{},"content/about/index.md",[156,573,576],{"className":574,"code":575,"language":161},[159],"---\ntitle: About\naliases:\n  - contact\nmenu:\n    main: \n        weight: -90\n        params:\n            icon: user\n---\n\n## 自己紹介\n\nここに自己紹介\n",[148,577,575],{"__ignoreMap":130},[566,579,580],{},[569,581,582],{},"content/archives/index.md",[156,584,587],{"className":585,"code":586,"language":161},[159],"---\ntitle: \"Archives\"\ndate: 2019-05-28\nlayout: \"archives\"\nslug: \"archives\"\nmenu:\n    main:\n        weight: -70\n        params: \n            icon: archives\n---\n",[148,588,586],{"__ignoreMap":130},[566,590,591],{},[569,592,593],{},"content/search/index.md",[156,595,598],{"className":596,"code":597,"language":161},[159],"---\ntitle: \"Search\"\nslug: \"search\"\nlayout: \"search\"\noutputs:\n    - html\n    - json\nmenu:\n    main:\n        weight: -60\n        params: \n            icon: search\n---\n",[148,599,597],{"__ignoreMap":130},[39,601,602],{"id":602},"日本語フォントに対応させる",[14,604,605],{},"どうやらデフォルトだと中華フォントらしいので日本語に変える。",[14,607,608,611,612,615,616,619],{},[148,609,610],{},"assets","内に",[148,613,614],{},"scss","ディレクトリを作り、その中に",[148,617,618],{},"custom.scss","を作って以下の内容をコピペする。フォントは各自好きなものを使っても大丈夫。",[156,621,624],{"className":622,"code":623,"language":161},[159],":root {\n  --sys-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Droid Sans\", \"Helvetica Neue\";\n  --ja-font-family: \"游ゴシック体\", \"Yu Gothic\", YuGothic, \"ヒラギノ角ゴ Pro\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", \"Meiryo\";\n  --base-font-family: \"Lato\", var(--sys-font-family), var(--ja-font-family), sans-serif;\n  --code-font-family: Menlo, Monaco, Consolas, \"Courier New\", var(--ja-font-family), monospace;\n}\n",[148,625,623],{"__ignoreMap":130},[39,627,629],{"id":628},"サイトのアイコンfaviconを変更","サイトのアイコン（favicon）を変更",[14,631,632],{},[34,633],{"alt":544,"src":634},"https://images.bokukoha.dev/blog/hugo-blog/tab.jpg",[14,636,637],{},"faviconの作成方法については「favicon 作成方法」とでもググればいくらでも解説が出てくるのでここでは割愛する。",[14,639,640,641,644],{},"favicon.icoを",[148,642,643],{},"static","ディレクトリ内に入れてあげれば適用される。",[39,646,648],{"id":647},"gitignoreの設定",".gitignoreの設定",[14,650,651,656],{},[24,652,655],{"href":653,"rel":654},"https://github.com/github/gitignore/blob/main/community/Golang/Hugo.gitignore",[28],"hugo用のgitignore設定","があるので、これをそのまま使う。",[14,658,659,660,663],{},"rootディレクトリに",[148,661,662],{},".gitignore","を作成し、中身を以下にすればOK。",[156,665,668],{"className":666,"code":667,"language":161},[159],"# Generated files by hugo\n/public/\n/resources/_gen/\n/assets/jsconfig.json\nhugo_stats.json\n\n# Executable may be added to repository\nhugo.exe\nhugo.darwin\nhugo.linux\n\n# Temporary lock file while building\n/.hugo_build.lock\n",[148,669,667],{"__ignoreMap":130},[10,671,673],{"id":672},"cloudflare-pagesでの設定","Cloudflare Pagesでの設定",[14,675,676,677,679],{},"Cloudflare Pagesのあれこれをする前に、",[148,678,357],{},"のgitリポジトリを作成し、commitやpushはしておくこと。",[14,681,682,683,688],{},"ググってもよくわからん人は",[24,684,687],{"href":685,"rel":686},"https://chatgpt.com/",[28],"chatGPT","に状況をそのまま投げたら大体教えてくれるはず。",[14,690,691,692,696],{},"①Cloudflareのダッシュボード(",[24,693,694],{"href":694,"rel":695},"https://dash.cloudflare.com/",[28],")にアクセスする。",[14,698,699],{},"②左側のタブから「コンピューティング」を探し、その中の「Workers&Pages」をクリックする。",[14,701,702],{},[34,703],{"alt":130,"src":704},"https://images.bokukoha.dev/blog/hugo-blog/pages1.jpg",[14,706,707],{},"③「作成」をクリックして「Pages」を選択する。",[14,709,710],{},[34,711],{"alt":712,"src":713},"こういう画面になるはず","https://images.bokukoha.dev/blog/hugo-blog/pages2.jpg",[14,715,716,717,719],{},"③自分のGithubに接続し、",[148,718,357],{},"のリポジトリを選択したら「セットアップの開始」を選択する。",[14,721,722,723,138],{},"④ビルドの設定では「フレームワークプリセット」で",[148,724,725],{},"Hugo",[14,727,728],{},[34,729],{"alt":130,"src":730},"https://images.bokukoha.dev/blog/hugo-blog/pages3.jpg",[14,732,733],{},"⑤下の方にある「環境変数（アドバンスド）」を展開し、「変数を追加する」をクリック。",[14,735,736,739,740,743,744,739],{},[148,737,738],{},"VARIABLE_NAME","は",[148,741,742],{},"HUGO_VERSION","・",[148,745,746],{},"値",[156,748,750],{"className":749,"code":316,"language":161},[159],[148,751,316],{"__ignoreMap":130},[14,753,754,755,758,759,762],{},"で得られた",[148,756,757],{},"hugo v0.144.1-a79d63a44659b6bc76dcdf223de1637e0bd70ff6+extended windows/amd64 BuildDate=2025-02-18T12:14:07Z VendorInfo=gohugoio","なら",[148,760,761],{},"0.144.1","にする。",[14,764,765],{},"⑥「保存してデプロイする」をクリックするとページのビルドが始まるはず。",[14,767,768,769,772],{},"⑦ビルドが無事成功したら、「カスタムドメイン」から自分のドメインと適当なサブドメイン（",[148,770,771],{},"blog.your.domain","とか）を決めて完成。",[14,774,775],{},"ドメインにアクセスして内容が表示されるまでに少し時間がかかる場合があるので、焦らず待つこと。",[14,777,778],{},"これでgitのリポジトリにpushすることでCloudflare pagesが自動でデプロイする環境が整った。",[10,780,781],{"id":781},"終わりに",[14,783,784,785,790],{},"日本語解説ないだろと思って頑張って公式Doc読んでブログ作ったんですが、後から調べてみたら普通に",[24,786,789],{"href":787,"rel":788},"https://zenn.dev/seita1996/articles/hugo-markdown-blog",[28],"あった","んですよね。",[14,792,793],{},"この記事は先駆者兄貴と環境が違っていたりCloudflare Pagesで自分が詰まったところを追加しただけの内容なので、わかりにくかったら先駆者兄貴のも併せて見てみてください。",{"title":130,"searchDepth":795,"depth":795,"links":796},4,[797,802,803,804,814,815,816,819,826,827],{"id":12,"depth":798,"text":12,"children":799},2,[800],{"id":41,"depth":801,"text":42},3,{"id":55,"depth":798,"text":55},{"id":74,"depth":798,"text":74},{"id":89,"depth":798,"text":90,"children":805},[806,811],{"id":102,"depth":801,"text":102,"children":807},[808,809,810],{"id":109,"depth":795,"text":109},{"id":173,"depth":795,"text":174},{"id":213,"depth":795,"text":214},{"id":293,"depth":801,"text":294,"children":812},[813],{"id":324,"depth":795,"text":324},{"id":337,"depth":798,"text":338},{"id":361,"depth":798,"text":361},{"id":460,"depth":798,"text":460,"children":817},[818],{"id":481,"depth":801,"text":481},{"id":533,"depth":798,"text":533,"children":820},[821,822,823,824,825],{"id":539,"depth":801,"text":539},{"id":555,"depth":801,"text":556},{"id":602,"depth":801,"text":602},{"id":628,"depth":801,"text":629},{"id":647,"depth":801,"text":648},{"id":672,"depth":798,"text":673},{"id":781,"depth":798,"text":781},"技術系","https://images.bokukoha.dev/blog/hugo-blog/main.jpg","2025-02-20",false,"md",{},true,"/blog/hugo-blog","---\ntitle: \"Hugo + Stackテーマで楽に作る個人ブログ\"\ndate: \"2025-02-20\"\ncategory: \"技術系\"\ntags:\n  - \"Hugo\"\n  - \"Stack Theme\"\n  - \"Cloudflare\"\n  - \"Go\"\n  - \"DartSass\"\n  - \"Git\"\ncoverImage: \"https://images.bokukoha.dev/blog/hugo-blog/main.jpg\"\ndraft: false\ndescription: \"この記事では弊ブログサイトを作るにあたって参考にした記事や公式ドキュメントを紹介する。誰でもわかりやすいような解説を目指すが、あくまでも備忘録であるため個別の質問等には応じられない可能性がある。\"\n---\n\n\n## はじめに\nこの記事では弊ブログサイトを作るにあたって参考にした記事や公式ドキュメントを紹介する。誰でもわかりやすいような解説を目指すが、あくまでも備忘録であるため個別の質問等には応じられない可能性がある。\n\njimmy氏作のStack themeを使用してブログページを作り、windows11のVisual Studio Codeからgithubのレポジトリにcommit&push、そしてcloudflare pagesでビルドとデプロイをすること目標としているものと想定して解説をする。\n\nまた、完成形はStack themeの[デモページ](https://demo.stack.jimmycai.com/)を目指すものとする。\n\n![こんな感じ](https://images.bokukoha.dev/blog/hugo-blog/kansei.jpg)\n\n### 追記 : ブログのカスタムとか\n\nこの記事の手順自体には問題はないのですが、完成形としている「こは雑記帳」は一部カスタムしています（シェアボタンの追加、いいねボタンの追加など）。カスタムの簡単な解説は別ページで解説しているので、よければそちらも読んでみてください。\n\n[Hugo + Stackのブログにシェアボタン実装した](https://blog.bokukoha.dev/p/hugo--stack%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AB%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%9C%E3%82%BF%E3%83%B3%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F/)\n\n## 筆者の環境\n・Cloudflareでドメイン取得済み \u003Cbr>\n・メインPCのOSはWindows11 \u003Cbr>\n・Cloudflareの各種サービスはある程度の利用経験あり \u003Cbr>\n・Linux及びWindowsの最低限のコマンド知識はあり（ディレクトリ移動やnano、touchなど）\u003Cbr>\n・Gitの最低限の使用方法がわかる\n\n## 開発環境\n\n**結論 : Windows使ってるならWindowsで作ろう**\n\n当初は自鯖でホスティングしようと思っていたため、Proxmox上にLXCを建てて開発環境を作った。しかし、結局Cloudflare Pagesを利用したため、開発環境はWindows11（x64）で作るものとする。 \u003Cbr>\nCloudflare Pagesを使わずにgithubのwebhookを使ってビルドとデプロイを自動化するスクリプト書こうと思えるなら話は違うけど、楽に作るならcloudflare pagesがオススメ。\n\n## Hugoのインストール\n基本的にHugoの[Windows用公式Doc](https://gohugo.io/installation/windows/)に沿って書くだけなので、これが読めてわかる人は読み飛ばしてもらっても問題ないかも。\n\n### 前提条件\n\nHugoをインストールする前に、いくつか必要になるものがあるためそれらをインストールする。\n\n#### gitのインストール\n①まずgitの[ダウンロードページ](https://git-scm.com/downloads)にアクセスする。\n\n②**Windows**を選択する\n\n![](https://images.bokukoha.dev/blog/hugo-blog/git-ins1.jpg)\n\n③**64-bit Git for Windows Setup**を選択する。\n\n![](https://images.bokukoha.dev/blog/hugo-blog/git-ins2.jpg)\n\n④ダウンロードされた`Git-x.xx.x-64-bit.exe`を起動し、gitをインストールする。\n\n⑤windowsのコンソールで\n```\ngit --version\n```\n\nと入力し、`git version x.xx.x`の様な出力が得られればOK。\n\n#### Goのインストール\n\n①Goのインストーラー[ダウンロードページ](https://go.dev/dl/)にアクセスする。\n\n②Stable versionsリスト内から`gox.xx.x.windows-amd64.msi`を探してダウンロードする。\n\n![](https://images.bokukoha.dev/blog/hugo-blog/go-ins1.jpg)\n\n③ダウンロードしたインストーラーを起動し、Goをインストールする。\n\n④Gitと同様にWindowsのコンソールで\n```\ngo version\n```\n\nと入力し、`go version gox.xx.x windows/amd64`の様な出力が得られればOK。\n\n#### Dart Sassのインストール\n\n①Dart Sassの[公式GitHubリリースページ](https://github.com/sass/dart-sass/releases)にアクセスする。\n\n②最新バージョンのリリースからWindows用のzipファイル（例`dart-sass-1.85.0-windows-x64.zip`）を探してダウンロードする。\n\n![](https://images.bokukoha.dev/blog/hugo-blog/dartsass-ins1.jpg)\n\n③ダウンロードしたzipファイルを解凍し、中身の`dart-sass`フォルダをわかりやすい場所（例 Cドライブ直下等）に配置する。\n\n③Windowsの検索メニューから**環境変数を編集**のウィンドウを開く。\n\n④ウィンドウ内のユーザー環境変数 or システム環境変数から`Path`を選択し**編集**をクリックする。\n\n![](https://images.bokukoha.dev/blog/hugo-blog/dartsass-ins2.jpg)\n\n⑤**新規**をクリックし、入力を求められている部分に②で配置したdart-sassフォルダのパスを入力する。（例 Cドライブ直下に配置していた場合は、`C:\\dart-sass`）\n\n⑥前述の2つと同様に、Windowsのコンソールで\n```\nsass --version\n```\n\nと入力しｍ`x.xx.x`の様な出力が得られればOK。\n\n### Hugo本体のインストール\n\n前述の前提条件が全て揃っていることが確認出来たら、いよいよHugo本体をインストールする。\n\nとはいってもこれは簡単で、Windowsのコンソールで\n```\nwinget install Hugo.Hugo.Extended\n```\nと入力するだけでOK。特に問題が無ければ無事インストールが完了するはず。\n\nインストール終了後は、前提条件同様にコンソールで\n\n```\nhugo version\n```\nと入力し、出力が得られることを確認することを忘れずに。\n\n#### 注意事項\n\n前項で得られたバージョン出力が`0.123.0`より大きい数字であることを必ず確認すること。`0.123.0`はこの後導入するStackテーマが動作する最低バージョンであるため、これが小さい数字になっているとテーマがうまく動作しなくなる。\n\n## Hugoでプロジェクト作成\nブログを作りたいディレクトリ内（例 Cドライブ直下）でコンソールで\n\n```\nhugo new site your_blog_name\n```\n\nと入力する。すると`C\\:your_blog_name`というHugoのプロジェクトフォルダが作成される。`your_blog_name`は任意の名前に変えること。\n\n## テーマ追加\n\nHugoのプロジェクトフォルダが作られたら、今回使用する[Stackというtheme](https://github.com/CaiJimmy/hugo-theme-stack)を追加する。\n\n```\ncd your_blog_name\ngit init\ngit submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack\n```\n\nそれぞれのコマンドを実行することでthemeのフォルダが追加できる。\n\n---\n\n次に、デモサイトのコンフィグ情報をそのまま`your_blog_name`に適用する。\nrootディレクトリの`hugo.toml`を削除し、新たに`config.yaml`を作成しVScodeなどで開く。　\n\nその中身に[デモサイトconfig](https://github.com/CaiJimmy/hugo-theme-stack/blob/master/exampleSite/hugo.yaml)の中身を全部貼り付けるだけでOK。\n\n\u003Cdetails>\n\u003Csummary>弊blogで使っているconfig.yml | これをコピペしてもOK（SNSリンク欄、タイトル等の基本情報、footer情報、コメントセクションのオンオフを変更している）\u003C/summary>\n\n```\nbaseurl: https://your_blog_url/\nlanguageCode: ja\ntheme: hugo-theme-stack\ntitle: your_blog_name\ncopyright: your_name\n\n# Theme i18n support\n# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw\nDefaultContentLanguage: en\n\n# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]\n# This will make .Summary and .WordCount behave correctly for CJK languages.\nhasCJKLanguage: true\n\npagination:\n    pagerSize: 3\n\npermalinks:\n    post: /p/:slug/\n    page: /:slug/\n\nparams:\n    mainSections:\n        - post\n    featuredImageField: image\n    rssFullContent: true\n    favicon: # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)\n\n    footer:\n        since: 9999\n        customText:\n\n    dateFormat:\n        published: Jan 02, 2006\n        lastUpdated: Jan 02, 2006 15:04 MST\n\n    sidebar:\n        emoji:\n        subtitle: A Japanese student.\n        avatar:\n            enabled: true\n            local: true\n            src: img/avatar.png\n\n    article:\n        math: false\n        toc: true\n        readingTime: true\n        license:\n            enabled: true\n            default: Licensed under CC BY-NC-SA 4.0\n\n    comments:\n        enabled: false\n        provider: disqus\n\n        disqusjs:\n            shortname:\n            apiUrl:\n            apiKey:\n            admin:\n            adminLabel:\n\n        utterances:\n            repo:\n            issueTerm: pathname\n            label:\n\n        beaudar:\n            repo:\n            issueTerm: pathname\n            label:\n            theme:\n\n        remark42:\n            host:\n            site:\n            locale:\n\n        vssue:\n            platform:\n            owner:\n            repo:\n            clientId:\n            clientSecret:\n            autoCreateIssue: false\n\n        # Waline client configuration see: https://waline.js.org/en/reference/component.html\n        waline:\n            serverURL:\n            lang:\n            pageview:\n            emoji:\n                - https://unpkg.com/@waline/emojis@1.0.1/weibo\n            requiredMeta:\n                - name\n                - email\n                - url\n            locale:\n                admin: Admin\n                placeholder:\n\n        twikoo:\n            envId:\n            region:\n            path:\n            lang:\n\n        # See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options\n        cactus:\n            defaultHomeserverUrl: \"https://matrix.cactus.chat:8448\"\n            serverName: \"cactus.chat\"\n            siteName: \"\" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)\n\n        giscus:\n            repo:\n            repoID:\n            category:\n            categoryID:\n            mapping:\n            lightTheme:\n            darkTheme:\n            reactionsEnabled: 1\n            emitMetadata: 0\n\n        gitalk:\n            owner:\n            admin:\n            repo:\n            clientID:\n            clientSecret:\n            proxy:\n\n        cusdis:\n            host:\n            id:\n    widgets:\n        homepage:\n            - type: search\n            - type: archives\n              params:\n                  limit: 5\n            - type: categories\n              params:\n                  limit: 10\n            - type: tag-cloud\n              params:\n                  limit: 10\n        page:\n            - type: toc\n\n    opengraph:\n        twitter:\n            # Your Twitter username\n            site:\n\n            # Available values: summary, summary_large_image\n            card: summary_large_image\n\n    defaultImage:\n        opengraph:\n            enabled: false\n            local: false\n            src:\n\n    colorScheme:\n        # Display toggle\n        toggle: true\n\n        # Available values: auto, light, dark\n        default: auto\n\n    imageProcessing:\n        cover:\n            enabled: true\n        content:\n            enabled: true\n\n### Custom menu\n### See https://stack.jimmycai.com/config/menu\n### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter\nmenu:\n    main: []\n\n    social:\n        - identifier: github\n          name: GitHub\n          url: https://github.com/\n          params:\n              icon: brand-github\n\n        - identifier: twitter\n          name: Twitter\n          url: https://x.com/\n          params:\n              icon: brand-twitter\n        \n        - identifier: misskey\n          name: Misskey\n          url: https://misskey.io/\n          params:\n              icon: misskey\n\nrelated:\n    includeNewer: true\n    threshold: 60\n    toLower: false\n    indices:\n        - name: tags\n          weight: 100\n\n        - name: categories\n          weight: 200\n\nmarkup:\n    goldmark:\n        extensions:\n            passthrough:\n                enable: true\n                delimiters:\n                    block:\n                        - - \\[\n                          - \\]\n                        - - $$\n                          - $$\n                    inline:\n                        - - \\(\n                          - \\)\n        renderer:\n            ## Set to true if you have HTML content inside Markdown\n            unsafe: true\n    tableOfContents:\n        endLevel: 4\n        ordered: true\n        startLevel: 2\n    highlight:\n        noClasses: false\n        codeFences: true\n        guessSyntax: true\n        lineNoStart: 1\n        lineNos: true\n        lineNumbersInTable: true\n        tabWidth: 4\n```\n\u003C/details>\n\n---\n\n`config.yaml`を無事に作成出来たら、次はいよいよ開発用サーバーを起動する。\n\n```\nhugo server -D\n```\n\n上記のコマンドをプロジェクトのrootディレクトリで実行することで`localhost:1313`に開発サーバーを起動できる。\n`-D`は下書きのポストも一覧に表示するためのオプションである。\n\nお使いのブラウザで`localhost:1313`にアクセスし、テーマがきちんと適用されていることを確認しよう。\n\n\u003Csmall>※筆者は`-D`を起動オプションに入れずにサーバーを起動し、下書きポストが表示されず10分ほど無駄なトラブルシューティングをすることになったため、上記の通り実行することを推奨。\u003C/small>\n\n## 投稿作成\nテスト用の投稿を以下コマンドで作成することができる。\n\n```\nhugo new content post/Hello-World/index.md\n```\n\n`localhost:1313`で記事が作成されていることが確認できるはず。\n`index.md`を編集し保存することでリアルタイムで記事の編集とプレビューができるのでとっても便利。\n\n### 投稿のテンプレート作成\n\n毎回`index.md`内でタイトルとかタグとか書くのは面倒なので、テンプレートを作成する。\n\n`./archetypes/default.md`を作成し、中身を以下の様な感じにする。\n\n```\n---\ntitle: '{{ replace .File.ContentBaseName \"-\" \" \" | title }}'\ndate: {{ .Date }}\ndraft: true\nimage: 'main.jpg'\ncategories:\n  - カテゴリ\ntags:\n  - タグ\n---\n\n## 記事\n```\n\nこれで、以降新しいページを\n\n```\nhugo new content post/post_name/index.md\n```\n\nで作ったときに、タイトルは`post_name`、日時は作った時刻、ポストのメイン画像は`post_name/main.jpg`を参照してくれるようになる。\n\nカテゴリやタグは変更すること。また、公開する時には`draft:true`を`false`に変えることを忘れずに。\n\n## デフォルトからのカスタマイズ\n\nDemoサイトと同じものにするために少しカスタマイズをする。必要ないと思う機能がある場合は飛ばして問題ないものもある。\n\n### 左のアバター画像の追加\n\n![これ](https://images.bokukoha.dev/blog/hugo-blog/avatar.jpg)\n\n解像度が150x150の画像を用意したら`assets/img`にavatar.jpgという名前で突っ込んであげるだけでOK。最初はimgディレクトリはないので、自分で作って上げるとよい。\n\n### About・Archives・Searchの追加\n\nそれぞれthemeに機能として備わっているので、ページだけ追加してあげればOK。\n\n\u003Cdetails>\n\u003Csummary>丸パクリでOK\u003C/summary>\n\n- content/about/index.md\n\n```\n---\ntitle: About\naliases:\n  - contact\nmenu:\n    main: \n        weight: -90\n        params:\n            icon: user\n---\n\n## 自己紹介\n\nここに自己紹介\n```\n\n- content/archives/index.md\n\n```\n---\ntitle: \"Archives\"\ndate: 2019-05-28\nlayout: \"archives\"\nslug: \"archives\"\nmenu:\n    main:\n        weight: -70\n        params: \n            icon: archives\n---\n```\n\n- content/search/index.md\n\n```\n---\ntitle: \"Search\"\nslug: \"search\"\nlayout: \"search\"\noutputs:\n    - html\n    - json\nmenu:\n    main:\n        weight: -60\n        params: \n            icon: search\n---\n```\n\n\u003C/details>\n\n### 日本語フォントに対応させる\n\nどうやらデフォルトだと中華フォントらしいので日本語に変える。\n\n`assets`内に`scss`ディレクトリを作り、その中に`custom.scss`を作って以下の内容をコピペする。フォントは各自好きなものを使っても大丈夫。\n\n```\n:root {\n  --sys-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Droid Sans\", \"Helvetica Neue\";\n  --ja-font-family: \"游ゴシック体\", \"Yu Gothic\", YuGothic, \"ヒラギノ角ゴ Pro\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", \"Meiryo\";\n  --base-font-family: \"Lato\", var(--sys-font-family), var(--ja-font-family), sans-serif;\n  --code-font-family: Menlo, Monaco, Consolas, \"Courier New\", var(--ja-font-family), monospace;\n}\n```\n\n### サイトのアイコン（favicon）を変更\n\n![これ](https://images.bokukoha.dev/blog/hugo-blog/tab.jpg)\n\nfaviconの作成方法については「favicon 作成方法」とでもググればいくらでも解説が出てくるのでここでは割愛する。\n\nfavicon.icoを`static`ディレクトリ内に入れてあげれば適用される。\n\n### .gitignoreの設定\n\n[hugo用のgitignore設定](https://github.com/github/gitignore/blob/main/community/Golang/Hugo.gitignore)があるので、これをそのまま使う。\n\nrootディレクトリに`.gitignore`を作成し、中身を以下にすればOK。\n\n```\n# Generated files by hugo\n/public/\n/resources/_gen/\n/assets/jsconfig.json\nhugo_stats.json\n\n# Executable may be added to repository\nhugo.exe\nhugo.darwin\nhugo.linux\n\n# Temporary lock file while building\n/.hugo_build.lock\n```\n\n## Cloudflare Pagesでの設定\nCloudflare Pagesのあれこれをする前に、`your_blog_name`のgitリポジトリを作成し、commitやpushはしておくこと。\n\nググってもよくわからん人は[chatGPT](https://chatgpt.com/)に状況をそのまま投げたら大体教えてくれるはず。\n\n①Cloudflareのダッシュボード(\u003Chttps://dash.cloudflare.com/>)にアクセスする。\n\n②左側のタブから「コンピューティング」を探し、その中の「Workers&Pages」をクリックする。\n\n![](https://images.bokukoha.dev/blog/hugo-blog/pages1.jpg)\n\n③「作成」をクリックして「Pages」を選択する。\n\n![こういう画面になるはず](https://images.bokukoha.dev/blog/hugo-blog/pages2.jpg)\n\n③自分のGithubに接続し、`your_blog_name`のリポジトリを選択したら「セットアップの開始」を選択する。\n\n④ビルドの設定では「フレームワークプリセット」で`Hugo`を選択する。\n\n![](https://images.bokukoha.dev/blog/hugo-blog/pages3.jpg)\n\n⑤下の方にある「環境変数（アドバンスド）」を展開し、「変数を追加する」をクリック。\n\n`VARIABLE_NAME`は`HUGO_VERSION`・`値`は\n\n```\nhugo version\n```\n\nで得られた`hugo v0.144.1-a79d63a44659b6bc76dcdf223de1637e0bd70ff6+extended windows/amd64 BuildDate=2025-02-18T12:14:07Z VendorInfo=gohugoio`なら`0.144.1`にする。\n\n⑥「保存してデプロイする」をクリックするとページのビルドが始まるはず。\n\n⑦ビルドが無事成功したら、「カスタムドメイン」から自分のドメインと適当なサブドメイン（`blog.your.domain`とか）を決めて完成。\n\nドメインにアクセスして内容が表示されるまでに少し時間がかかる場合があるので、焦らず待つこと。\n\nこれでgitのリポジトリにpushすることでCloudflare pagesが自動でデプロイする環境が整った。\n\n## 終わりに\n日本語解説ないだろと思って頑張って公式Doc読んでブログ作ったんですが、後から調べてみたら普通に[あった](https://zenn.dev/seita1996/articles/hugo-markdown-blog)んですよね。\n\nこの記事は先駆者兄貴と環境が違っていたりCloudflare Pagesで自分が詰まったところを追加しただけの内容なので、わかりにくかったら先駆者兄貴のも併せて見てみてください。\n",{"title":5,"description":16},"blog/hugo-blog/index",[725,840,841,842,843,844],"Stack Theme","Cloudflare","Go","DartSass","Git","iDJ5lVDM9TQlBX3UcsvomdbcV4lXHxj4uXYjr1GVtow",{"/blog/music-history":847,"/blog/chichibu":871,"/blog/comment-feat":897,"/blog/stop-drunk":923,"/blog/build-pc":932,"/blog/cms-dev":946,"/blog/kansai_day3to4":960,"/blog/kansai_ryokou":986,"/blog/hiroshima":996,"/blog/chokaguya":1002,"/blog/yamaokaya":1012,"/blog/tonalite":1018,"/blog/new_year_2026":1028,"/blog/year_2025":1034,"/blog/pixel10":1044,"/blog/gpt-to-gemini":1050,"/blog/za_log":1056,"/blog/misskey-setting":1062,"/blog/docker-on-lxc":1076,"/blog/md_components":1086,"/blog/nuxt_new_site":1096,"/blog/simokita_moon":1102,"/blog/mc_server":1112,"/blog/aws_like_button":1122,"/blog/sendai":1128,"/blog/taityo":1134,"/blog/add-share-button":1140,"/blog/aws_summit":1146,"/blog/drive_nikki":1152,"/blog/2025-06-12":1158,"/blog/cf_build":1164,"/blog/ota_sanpo":1174,"/blog/nuxt_content":1180,"/blog/sushi":1186,"/blog/misskey-docker":1192,"/blog/server-make":1198,"/blog/sanpo-log":1208,"/blog/hugo-blog":1218,"/blog/1":1224},[848,854,855,861,866],{"title":849,"path":850,"date":851,"category":852,"coverImage":853},"秩父にレズアニメの看板探しに行ったぞ！","/blog/chichibu","2026-05-30","おでかけログ","https://images.bokukoha.dev/blog/chichibu/PXL_20260529_044435415.webp",{"title":5,"path":835,"date":830,"category":828,"coverImage":829},{"title":856,"path":857,"date":858,"category":859,"coverImage":860},"超かぐや姫！を見たぞ！～オタクの感想編～","/blog/chokaguya","2026-02-26","雑記","https://images.bokukoha.dev/blog/chokaguya/main.png",{"title":862,"path":863,"date":864,"category":859,"coverImage":865},"2025年楽しかったことまとめ","/blog/year_2025","2025-12-30","https://images.bokukoha.dev/blog/year_2025/main.jpg",{"title":867,"path":868,"date":869,"category":828,"coverImage":870},"ブログにコメント機能つけたぞ！（いらない）","/blog/comment-feat","2026-05-17","https://images.bokukoha.dev/blog/test/2026051117085800_s.webp",[872,877,882,887,892],{"title":873,"path":874,"date":875,"category":852,"coverImage":876},"ムーンアートナイト下北沢に行った日記","/blog/simokita_moon","2025-10-03","https://images.bokukoha.dev/blog/simokita_moon/main.jpg",{"title":878,"path":879,"date":880,"category":828,"coverImage":881},"ClaudePro契約してCMS作ったぞ！！！","/blog/cms-dev","2026-04-09","https://images.bokukoha.dev/blog/cms-dev/PXL_20260327_034729621.jpg",{"title":883,"path":884,"date":885,"category":859,"coverImage":886},"超久しぶりにPC自作したぞ！！の雑ログ","/blog/build-pc","2026-04-10","https://images.bokukoha.dev/blog/build-pc/1716.jpg",{"title":888,"path":889,"date":890,"category":852,"coverImage":891},"スタレのスシローコラボ行ってきた","/blog/sushi","2025-04-27","https://images.bokukoha.dev/blog/sushi/main.jpg",{"title":893,"path":894,"date":895,"category":852,"coverImage":896},"海ほたるにドライブ行ってきた","/blog/drive_nikki","2025-06-16","https://images.bokukoha.dev/blog/drive_nikki/main.jpg",[898,903,908,913,918],{"title":899,"path":900,"date":901,"category":828,"coverImage":902},"Hugo + StackのブログにAWSでいいねボタン実装した","/blog/aws_like_button","2025-09-21","https://images.bokukoha.dev/blog/aws_like_button/main.jpg",{"title":904,"path":905,"date":906,"category":828,"coverImage":907},"Nuxt Content3のコンポーネント呼び出し機能で遊んでみよう","/blog/md_components","2025-11-17","https://images.bokukoha.dev/blog/md_components/6.jpg",{"title":909,"path":910,"date":911,"category":859,"coverImage":912},"ワイヤレスイヤホンを買い替えたぞ！（Final TONALITE）","/blog/tonalite","2026-02-12","https://images.bokukoha.dev/blog/tonalite/main.jpg",{"title":914,"path":915,"date":916,"category":859,"coverImage":917},"おい、1カ月禁酒したのに何も効果ない件","/blog/stop-drunk","2026-04-19","https://images.bokukoha.dev/blog/stop-drunk/PXL_20260222_113942551.MACRO_FOCUS.MP.jpg",{"title":919,"path":920,"date":921,"category":859,"coverImage":922},"ブログ作った","/blog/1","2025-02-19","https://images.bokukoha.dev/blog/1/main.jpg",[924,925,926,927,928],{"title":867,"path":868,"date":869,"category":828,"coverImage":870},{"title":899,"path":900,"date":901,"category":828,"coverImage":902},{"title":883,"path":884,"date":885,"category":859,"coverImage":886},{"title":849,"path":850,"date":851,"category":852,"coverImage":853},{"title":52,"path":929,"date":930,"category":828,"coverImage":931},"/blog/add-share-button","2025-06-30","https://images.bokukoha.dev/blog/add-share-button/main.jpg",[933,934,939,940,945],{"title":878,"path":879,"date":880,"category":828,"coverImage":881},{"title":935,"path":936,"date":937,"category":859,"coverImage":938},"ポケモンZAクリアしたぞ！の感想","/blog/za_log","2025-12-01","https://images.bokukoha.dev/blog/za_log/main.jpg",{"title":919,"path":920,"date":921,"category":859,"coverImage":922},{"title":941,"path":942,"date":943,"category":859,"coverImage":944},"滑り込み1月まとめ！！","/blog/new_year_2026","2026-01-30","https://images.bokukoha.dev/blog/new_year_2026/main.jpg",{"title":856,"path":857,"date":858,"category":859,"coverImage":860},[947,948,949,954,955],{"title":883,"path":884,"date":885,"category":859,"coverImage":886},{"title":919,"path":920,"date":921,"category":859,"coverImage":922},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},"個人サイトを0から作ったぞ！","/blog/nuxt_new_site","2025-11-13","https://images.bokukoha.dev/blog/nuxt_new_site/2.png",{"title":941,"path":942,"date":943,"category":859,"coverImage":944},{"title":956,"path":957,"date":958,"category":852,"coverImage":959},"突発で仙台旅行してきたぞ！日記","/blog/sendai","2025-09-17","https://images.bokukoha.dev/blog/sendai/main.jpg",[961,966,971,976,981],{"title":962,"path":963,"date":964,"category":852,"coverImage":965},"春休みラストの京都旅行してきたぞ！～関西1,2日目～","/blog/kansai_ryokou","2026-03-30","https://images.bokukoha.dev/blog/kansai_ryokou/main.jpg",{"title":967,"path":968,"date":969,"category":852,"coverImage":970},"ウルトラバカ散歩～山岡家を目指すぞ！編～","/blog/yamaokaya","2026-02-23","https://images.bokukoha.dev/blog/yamaokaya/main.jpg",{"title":972,"path":973,"date":974,"category":852,"coverImage":975},"初スカイメイト＆広島バカ散歩してきたぞ！","/blog/hiroshima","2026-03-15","https://images.bokukoha.dev/blog/hiroshima/main.jpg",{"title":977,"path":978,"date":979,"category":859,"coverImage":980},"オタクはバカ散歩をしろ！","/blog/ota_sanpo","2025-05-10","https://images.bokukoha.dev/blog/ota_sanpo/main.jpg",{"title":982,"path":983,"date":984,"category":852,"coverImage":985},"池袋から飯田橋まで散歩した","/blog/sanpo-log","2025-02-21","https://images.bokukoha.dev/blog/sanpo-log/main.jpg",[987,992,993,994,995],{"title":988,"path":989,"date":990,"category":852,"coverImage":991},"京都お花見バカ散歩＆名古屋メシ部～関西3,4日目～","/blog/kansai_day3to4","2026-03-31","https://images.bokukoha.dev/blog/kansai_day3to4/main.jpg",{"title":956,"path":957,"date":958,"category":852,"coverImage":959},{"title":893,"path":894,"date":895,"category":852,"coverImage":896},{"title":972,"path":973,"date":974,"category":852,"coverImage":975},{"title":888,"path":889,"date":890,"category":852,"coverImage":891},[997,998,999,1000,1001],{"title":977,"path":978,"date":979,"category":859,"coverImage":980},{"title":956,"path":957,"date":958,"category":852,"coverImage":959},{"title":962,"path":963,"date":964,"category":852,"coverImage":965},{"title":967,"path":968,"date":969,"category":852,"coverImage":970},{"title":988,"path":989,"date":990,"category":852,"coverImage":991},[1003,1004,1005,1006,1007],{"title":935,"path":936,"date":937,"category":859,"coverImage":938},{"title":977,"path":978,"date":979,"category":859,"coverImage":980},{"title":967,"path":968,"date":969,"category":852,"coverImage":970},{"title":962,"path":963,"date":964,"category":852,"coverImage":965},{"title":1008,"path":1009,"date":1010,"category":852,"coverImage":1011},"無知オタク、AWS Summitに行く","/blog/aws_summit","2025-06-26","https://images.bokukoha.dev/blog/AWS_summit/main.jpg",[1013,1014,1015,1016,1017],{"title":988,"path":989,"date":990,"category":852,"coverImage":991},{"title":977,"path":978,"date":979,"category":859,"coverImage":980},{"title":972,"path":973,"date":974,"category":852,"coverImage":975},{"title":856,"path":857,"date":858,"category":859,"coverImage":860},{"title":962,"path":963,"date":964,"category":852,"coverImage":965},[1019,1024,1025,1026,1027],{"title":1020,"path":1021,"date":1022,"category":859,"coverImage":1023},"メインスマホをPixel10に乗り換えたぞ！","/blog/pixel10","2025-12-24","https://images.bokukoha.dev/blog/pixel10/main.jpg",{"title":867,"path":868,"date":869,"category":828,"coverImage":870},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},{"title":972,"path":973,"date":974,"category":852,"coverImage":975},{"title":888,"path":889,"date":890,"category":852,"coverImage":891},[1029,1030,1031,1032,1033],{"title":862,"path":863,"date":864,"category":859,"coverImage":865},{"title":878,"path":879,"date":880,"category":828,"coverImage":881},{"title":883,"path":884,"date":885,"category":859,"coverImage":886},{"title":1020,"path":1021,"date":1022,"category":859,"coverImage":1023},{"title":982,"path":983,"date":984,"category":852,"coverImage":985},[1035,1036,1037,1038,1039],{"title":941,"path":942,"date":943,"category":859,"coverImage":944},{"title":919,"path":920,"date":921,"category":859,"coverImage":922},{"title":982,"path":983,"date":984,"category":852,"coverImage":985},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},{"title":1040,"path":1041,"date":1042,"category":828,"coverImage":1043},"Proxmoxでコンテナ on コンテナして自鯖落とした話","/blog/docker-on-lxc","2025-11-21","https://images.bokukoha.dev/blog/docker-on-lxc/main.png",[1045,1046,1047,1048,1049],{"title":909,"path":910,"date":911,"category":859,"coverImage":912},{"title":972,"path":973,"date":974,"category":852,"coverImage":975},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},{"title":883,"path":884,"date":885,"category":859,"coverImage":886},{"title":867,"path":868,"date":869,"category":828,"coverImage":870},[1051,1052,1053,1054,1055],{"title":982,"path":983,"date":984,"category":852,"coverImage":985},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},{"title":956,"path":957,"date":958,"category":852,"coverImage":959},{"title":883,"path":884,"date":885,"category":859,"coverImage":886},{"title":962,"path":963,"date":964,"category":852,"coverImage":965},[1057,1058,1059,1060,1061],{"title":856,"path":857,"date":858,"category":859,"coverImage":860},{"title":883,"path":884,"date":885,"category":859,"coverImage":886},{"title":878,"path":879,"date":880,"category":828,"coverImage":881},{"title":52,"path":929,"date":930,"category":828,"coverImage":931},{"title":849,"path":850,"date":851,"category":852,"coverImage":853},[1063,1068,1073,1074,1075],{"title":1064,"path":1065,"date":1066,"category":828,"coverImage":1067},"HugoでのCloudflare Pagesのビルド失敗を回避する方法","/blog/cf_build","2025-05-11","https://images.bokukoha.dev/blog/cf_build/main.jpg",{"title":1069,"path":1070,"date":1071,"category":828,"coverImage":1072},"Cloudflare tunnelで作るMisskey自鯖","/blog/misskey-docker","2025-04-06","https://images.bokukoha.dev/blog/misskey-docker/main.jpg",{"title":888,"path":889,"date":890,"category":852,"coverImage":891},{"title":977,"path":978,"date":979,"category":859,"coverImage":980},{"title":52,"path":929,"date":930,"category":828,"coverImage":931},[1077,1078,1079,1084,1085],{"title":1069,"path":1070,"date":1071,"category":828,"coverImage":1072},{"title":904,"path":905,"date":906,"category":828,"coverImage":907},{"title":1080,"path":1081,"date":1082,"category":859,"coverImage":1083},"労働体験して体調崩してた日記","/blog/taityo","2025-07-13","https://images.bokukoha.dev/blog/taityo/main.jpg",{"title":873,"path":874,"date":875,"category":852,"coverImage":876},{"title":5,"path":835,"date":830,"category":828,"coverImage":829},[1087,1088,1089,1094,1095],{"title":867,"path":868,"date":869,"category":828,"coverImage":870},{"title":1040,"path":1041,"date":1042,"category":828,"coverImage":1043},{"title":1090,"path":1091,"date":1092,"category":828,"coverImage":1093},"Nuxt Contentでブログもどきを作ってみた","/blog/nuxt_content","2025-05-09","https://images.bokukoha.dev/blog/nuxt_content/main.jpg",{"title":935,"path":936,"date":937,"category":859,"coverImage":938},{"title":873,"path":874,"date":875,"category":852,"coverImage":876},[1097,1098,1099,1100,1101],{"title":919,"path":920,"date":921,"category":859,"coverImage":922},{"title":878,"path":879,"date":880,"category":828,"coverImage":881},{"title":5,"path":835,"date":830,"category":828,"coverImage":829},{"title":873,"path":874,"date":875,"category":852,"coverImage":876},{"title":972,"path":973,"date":974,"category":852,"coverImage":975},[1103,1104,1105,1106,1111],{"title":849,"path":850,"date":851,"category":852,"coverImage":853},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},{"title":919,"path":920,"date":921,"category":859,"coverImage":922},{"title":1107,"path":1108,"date":1109,"category":852,"coverImage":1110},"先週は色々あったよ日記","/blog/2025-06-12","2025-06-12","https://images.bokukoha.dev/blog/2025-06-12/main.jpg",{"title":893,"path":894,"date":895,"category":852,"coverImage":896},[1113,1118,1119,1120,1121],{"title":1114,"path":1115,"date":1116,"category":828,"coverImage":1117},"3万円くらいで作る自宅サーバー","/blog/server-make","2025-02-22","https://images.bokukoha.dev/blog/server-make/main.jpg",{"title":1069,"path":1070,"date":1071,"category":828,"coverImage":1072},{"title":873,"path":874,"date":875,"category":852,"coverImage":876},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},{"title":967,"path":968,"date":969,"category":852,"coverImage":970},[1123,1124,1125,1126,1127],{"title":52,"path":929,"date":930,"category":828,"coverImage":931},{"title":867,"path":868,"date":869,"category":828,"coverImage":870},{"title":5,"path":835,"date":830,"category":828,"coverImage":829},{"title":919,"path":920,"date":921,"category":859,"coverImage":922},{"title":914,"path":915,"date":916,"category":859,"coverImage":917},[1129,1130,1131,1132,1133],{"title":962,"path":963,"date":964,"category":852,"coverImage":965},{"title":972,"path":973,"date":974,"category":852,"coverImage":975},{"title":893,"path":894,"date":895,"category":852,"coverImage":896},{"title":1080,"path":1081,"date":1082,"category":859,"coverImage":1083},{"title":878,"path":879,"date":880,"category":828,"coverImage":881},[1135,1136,1137,1138,1139],{"title":956,"path":957,"date":958,"category":852,"coverImage":959},{"title":873,"path":874,"date":875,"category":852,"coverImage":876},{"title":878,"path":879,"date":880,"category":828,"coverImage":881},{"title":1040,"path":1041,"date":1042,"category":828,"coverImage":1043},{"title":972,"path":973,"date":974,"category":852,"coverImage":975},[1141,1142,1143,1144,1145],{"title":899,"path":900,"date":901,"category":828,"coverImage":902},{"title":5,"path":835,"date":830,"category":828,"coverImage":829},{"title":919,"path":920,"date":921,"category":859,"coverImage":922},{"title":867,"path":868,"date":869,"category":828,"coverImage":870},{"title":888,"path":889,"date":890,"category":852,"coverImage":891},[1147,1148,1149,1150,1151],{"title":977,"path":978,"date":979,"category":859,"coverImage":980},{"title":856,"path":857,"date":858,"category":859,"coverImage":860},{"title":899,"path":900,"date":901,"category":828,"coverImage":902},{"title":873,"path":874,"date":875,"category":852,"coverImage":876},{"title":849,"path":850,"date":851,"category":852,"coverImage":853},[1153,1154,1155,1156,1157],{"title":888,"path":889,"date":890,"category":852,"coverImage":891},{"title":962,"path":963,"date":964,"category":852,"coverImage":965},{"title":956,"path":957,"date":958,"category":852,"coverImage":959},{"title":1107,"path":1108,"date":1109,"category":852,"coverImage":1110},{"title":972,"path":973,"date":974,"category":852,"coverImage":975},[1159,1160,1161,1162,1163],{"title":919,"path":920,"date":921,"category":859,"coverImage":922},{"title":893,"path":894,"date":895,"category":852,"coverImage":896},{"title":873,"path":874,"date":875,"category":852,"coverImage":876},{"title":956,"path":957,"date":958,"category":852,"coverImage":959},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},[1165,1170,1171,1172,1173],{"title":1166,"path":1167,"date":1168,"category":828,"coverImage":1169},"MisskeyのDBバックアップとオブジェクトストレージの設定方法","/blog/misskey-setting","2025-11-23","https://images.bokukoha.dev/blog/misskey-setting/main.jpg",{"title":1069,"path":1070,"date":1071,"category":828,"coverImage":1072},{"title":5,"path":835,"date":830,"category":828,"coverImage":829},{"title":52,"path":929,"date":930,"category":828,"coverImage":931},{"title":899,"path":900,"date":901,"category":828,"coverImage":902},[1175,1176,1177,1178,1179],{"title":972,"path":973,"date":974,"category":852,"coverImage":975},{"title":967,"path":968,"date":969,"category":852,"coverImage":970},{"title":1008,"path":1009,"date":1010,"category":852,"coverImage":1011},{"title":856,"path":857,"date":858,"category":859,"coverImage":860},{"title":988,"path":989,"date":990,"category":852,"coverImage":991},[1181,1182,1183,1184,1185],{"title":919,"path":920,"date":921,"category":859,"coverImage":922},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},{"title":893,"path":894,"date":895,"category":852,"coverImage":896},{"title":878,"path":879,"date":880,"category":828,"coverImage":881},{"title":904,"path":905,"date":906,"category":828,"coverImage":907},[1187,1188,1189,1190,1191],{"title":893,"path":894,"date":895,"category":852,"coverImage":896},{"title":962,"path":963,"date":964,"category":852,"coverImage":965},{"title":956,"path":957,"date":958,"category":852,"coverImage":959},{"title":972,"path":973,"date":974,"category":852,"coverImage":975},{"title":52,"path":929,"date":930,"category":828,"coverImage":931},[1193,1194,1195,1196,1197],{"title":1114,"path":1115,"date":1116,"category":828,"coverImage":1117},{"title":5,"path":835,"date":830,"category":828,"coverImage":829},{"title":1040,"path":1041,"date":1042,"category":828,"coverImage":1043},{"title":1166,"path":1167,"date":1168,"category":828,"coverImage":1169},{"title":1064,"path":1065,"date":1066,"category":828,"coverImage":1067},[1199,1204,1205,1206,1207],{"title":1200,"path":1201,"date":1202,"category":828,"coverImage":1203},"自宅で動かすMinecraftサーバー","/blog/mc_server","2025-09-30","https://images.bokukoha.dev/blog/mc_server/main.jpg",{"title":1069,"path":1070,"date":1071,"category":828,"coverImage":1072},{"title":5,"path":835,"date":830,"category":828,"coverImage":829},{"title":883,"path":884,"date":885,"category":859,"coverImage":886},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},[1209,1210,1215,1216,1217],{"title":972,"path":973,"date":974,"category":852,"coverImage":975},{"title":1211,"path":1212,"date":1213,"category":859,"coverImage":1214},"chatGPTからGeminiに完全移行した","/blog/gpt-to-gemini","2025-12-03","https://images.bokukoha.dev/blog/gpt-to-gemini/main.png",{"title":977,"path":978,"date":979,"category":859,"coverImage":980},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},{"title":988,"path":989,"date":990,"category":852,"coverImage":991},[1219,1220,1221,1222,1223],{"title":52,"path":929,"date":930,"category":828,"coverImage":931},{"title":899,"path":900,"date":901,"category":828,"coverImage":902},{"title":919,"path":920,"date":921,"category":859,"coverImage":922},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},{"title":1069,"path":1070,"date":1071,"category":828,"coverImage":1072},[1225,1226,1227,1228,1229],{"title":1090,"path":1091,"date":1092,"category":828,"coverImage":1093},{"title":950,"path":951,"date":952,"category":859,"coverImage":953},{"title":878,"path":879,"date":880,"category":828,"coverImage":881},{"title":5,"path":835,"date":830,"category":828,"coverImage":829},{"title":1107,"path":1108,"date":1109,"category":852,"coverImage":1110},[1231,1233],{"title":982,"path":983,"stem":1232,"children":-1},"blog/sanpo-log/index",{"title":919,"path":920,"stem":1234,"children":-1},"blog/1/index",1782435686750]