[{"data":1,"prerenderedAt":402},["ShallowReactive",2],{"content-\u002Fcontents\u002Fhugo_blog_create":3,"surroundPost-\u002Fcontents\u002Fhugo_blog_create":393},{"id":4,"title":5,"body":6,"createdAt":380,"description":381,"draft":382,"extension":383,"meta":384,"navigation":385,"path":386,"seo":387,"stem":388,"tags":389,"thumbnail":391,"updatedAt":380,"__hash__":392},"contents\u002Fcontents\u002Fhugo_blog_create.md","Hugoを使ったブログ運営方法の紹介",{"type":7,"value":8,"toc":372},"minimark",[9,13,18,21,24,27,30,33,52,61,64,67,70,73,76,79,88,92,95,103,106,132,135,154,157,196,211,231,234,248,255,261,269,276,291,294,299,302,305,309,312,321,324,327,335,350,353,356,359,362,365,368],[10,11,12],"p",{},"Hugo を使ったブログ運営も 1 年ほど経過したので、Hugo の使い方や自分の行っている Hugo を使ったブログ運営方法を紹介します。",[14,15,17],"h2",{"id":16},"hugo-を使ったブログ運営方法","Hugo を使ったブログ運営方法",[10,19,20],{},"Hugo の始め方などは、ネット上にいくつかありますが、その先の使いやすい運営方法はあまりでてきません。",[10,22,23],{},"私も最初の頃は、Nginx を使った VPS 上の Web サーバに Hugo で作った public フォルダを置くということをしていました。しかしこの方法だと、デプロイ後にミスが見つかるたびに public フォルダを置き直す作業をコマンドを打ち込んで行うのでかなりめんどくさかったです。あとは、証明書の更新がやっかいでしたね。",[10,25,26],{},"現在の運営方法は、Hugo を Docker コンテナ上で動かして、ブログフォルダは GitHub で管理しています。ブログのホストは Netrify で行っており、GitHub に push すると Netrify でビルドを行い、デプロイされる仕組みになっています。なんと証明書の更新も Netrify が自動でやってくれます！しかも無料（制限はある）！",[10,28,29],{},"この方法だと、Docker と Git がインストールされている PC ならすぐに作業環境を構築し、デプロイまで行うことができます。さらに、デプロイも GitHub に push するだけなので、Hugo のビルドコマンドを入力したり、public をフォルダを移したりする作業がなくて楽です。",[14,31,32],{"id":32},"準備するもの",[34,35,36,40,43,46,49],"ul",{},[37,38,39],"li",{},"Docker",[37,41,42],{},"Git",[37,44,45],{},"GitHub アカウント",[37,47,48],{},"AWS アカウント",[37,50,51],{},"独自ドメイン",[10,53,54,55,60],{},"作業 PC が変わらないという方は、Docker はなくてもいいです。Docker を使わない場合はローカルに Hugo の準備を行ってください。Docker を使った Hugo 環境構築については、以前まとめたので",[56,57,59],"a",{"href":58},"hugo-docker","こちら","をご覧ください。",[10,62,63],{},"Git と GitHub や AWS アカウントについてはたくさんわかりやすい情報がネットにあるので大丈夫でしょう。",[10,65,66],{},"AWS アカウントは DNS の管理のために Route 53 を利用するために必要です。",[14,68,69],{"id":69},"ドメイン取得",[10,71,72],{},"すでに独自ドメインを取得済みの方はここをとばしてもらって大丈夫です。",[10,74,75],{},"ドメインを持っていない方は、AWS の Route 53 にアクセスし、ドメインを取得しましょう。もちろん Route 53 以外の DNS サービスを使っていただいても大丈夫です。",[10,77,78],{},"ドメインの取得は有料なので注意しましょう。また、取得が完了するのに数日かかる可能性があるので時間にも注意です。",[10,80,81,82,87],{},"Route 53 を使ったドメイン取得方法は",[56,83,59],{"href":84,"rel":85},"https:\u002F\u002Fdev.classmethod.jp\u002Fcloud\u002Faws\u002Froute53-domain-2019\u002F",[86],"nofollow","のサイトに詳しく書いてあります。",[14,89,91],{"id":90},"コンテンツレイアウト準備","コンテンツ、レイアウト準備",[10,93,94],{},"Hugo を使ったブログ準備です。",[10,96,97,102],{},[56,98,101],{"href":99,"rel":100},"https:\u002F\u002Fgohugo.io\u002Fgetting-started\u002Fquick-start\u002F",[86],"公式","の手順に従って準備します。",[10,104,105],{},"まずは Hugo のインストールを行います。\nMac であれば以下のコマンドでインストールできます。",[107,108,113],"pre",{"className":109,"code":110,"language":111,"meta":112,"style":112},"language-bash shiki shiki-themes github-dark","brew install hugo\n","bash","",[114,115,116],"code",{"__ignoreMap":112},[117,118,121,125,129],"span",{"class":119,"line":120},"line",1,[117,122,124],{"class":123},"svObZ","brew",[117,126,128],{"class":127},"sU2Wk"," install",[117,130,131],{"class":127}," hugo\n",[10,133,134],{},"インストールができたら新しいサイトを作成します。",[107,136,138],{"className":109,"code":137,"language":111,"meta":112,"style":112},"hugo new site quickstart\n",[114,139,140],{"__ignoreMap":112},[117,141,142,145,148,151],{"class":119,"line":120},[117,143,144],{"class":123},"hugo",[117,146,147],{"class":127}," new",[117,149,150],{"class":127}," site",[117,152,153],{"class":127}," quickstart\n",[10,155,156],{},"次にテーマを追加します。",[107,158,160],{"className":109,"code":159,"language":111,"meta":112,"style":112},"cd quickstart\ngit init\ngit submodule add https:\u002F\u002Fgithub.com\u002Fbudparr\u002Fgohugo-theme-ananke.git themes\u002Fananke\n",[114,161,162,170,179],{"__ignoreMap":112},[117,163,164,168],{"class":119,"line":120},[117,165,167],{"class":166},"sDLfK","cd",[117,169,153],{"class":127},[117,171,173,176],{"class":119,"line":172},2,[117,174,175],{"class":123},"git",[117,177,178],{"class":127}," init\n",[117,180,182,184,187,190,193],{"class":119,"line":181},3,[117,183,175],{"class":123},[117,185,186],{"class":127}," submodule",[117,188,189],{"class":127}," add",[117,191,192],{"class":127}," https:\u002F\u002Fgithub.com\u002Fbudparr\u002Fgohugo-theme-ananke.git",[117,194,195],{"class":127}," themes\u002Fananke\n",[10,197,198,199,202,203,206,207,210],{},"これで",[114,200,201],{},"quickstart\u002Fthemes\u002F","に",[114,204,205],{},"ananke","というテーマが配置されます。",[114,208,209],{},"quickstart\u002Fconfig.toml","にこのテーマを使うことを明記します。",[107,212,214],{"className":109,"code":213,"language":111,"meta":112,"style":112},"echo 'theme = \"ananke\"' >> config.toml\n",[114,215,216],{"__ignoreMap":112},[117,217,218,221,224,228],{"class":119,"line":120},[117,219,220],{"class":166},"echo",[117,222,223],{"class":127}," 'theme = \"ananke\"'",[117,225,227],{"class":226},"snl16"," >>",[117,229,230],{"class":127}," config.toml\n",[10,232,233],{},"次にコンテンツをてきとうに追加します。",[107,235,237],{"className":109,"code":236,"language":111,"meta":112,"style":112},"hugo new posts\u002Fmy-first-post.md\n",[114,238,239],{"__ignoreMap":112},[117,240,241,243,245],{"class":119,"line":120},[117,242,144],{"class":123},[117,244,147],{"class":127},[117,246,247],{"class":127}," posts\u002Fmy-first-post.md\n",[10,249,250,251,254],{},"追加したコンテンツは",[114,252,253],{},"quickstart\u002Fcontent\u002Fpost\u002Fmy-first-post.md","にあるはず。",[10,256,257,260],{},[114,258,259],{},"my-first-post.md","の中身にちょっと言葉を加えて以下のようにする。",[107,262,267],{"className":263,"code":265,"language":266},[264],"language-text","---\ntitle: Hugoを使ったブログ運営方法の紹介\ncreatedAt: '2020-01-02'\nupdatedAt: '2020-01-02'\ntags: ['Hugo']\ndraft: false\ndescription:  'Hugoをブログ作成は非常に使いやすくて便利ですよね。私が1年ほどHugoを使ったブログ運営を行ってみて、いろいろ改良した現在のHugoブログ運営環境をご紹介します。'\nthumbnail: '\u002Fimg\u002Ftwitter-card.png'\n---\n# Hugoを使ったブログ運営方法の紹介\n\n\nHello world!!\n","text",[114,268,265],{"__ignoreMap":112},[10,270,271,272,275],{},"最後に以下のコマンドを入力し、",[114,273,274],{},"localhost:1313","でブログを確認する。",[107,277,279],{"className":109,"code":278,"language":111,"meta":112,"style":112},"hugo server -D\n",[114,280,281],{"__ignoreMap":112},[117,282,283,285,288],{"class":119,"line":120},[117,284,144],{"class":123},[117,286,287],{"class":127}," server",[117,289,290],{"class":166}," -D\n",[10,292,293],{},"以下のように表示されるはず。",[295,296],"img",{"alt":297,"img-src":298},"test_site","\u002Fimg\u002Fhugo_blog_create\u002Ftest-site.png",[10,300,301],{},"これで Netrify にデプロイするものの準備ができました。",[10,303,304],{},"デプロイする前に config.toml の baseURL を取得したドメインに書き換えておくのをお忘れなく。",[14,306,308],{"id":307},"netrify","Netrify",[10,310,311],{},"まずはアカウントを作成します。GitHub のアカウントがあればそれでログインできるはずです。",[10,313,314,315,320],{},"やり方については",[56,316,319],{"href":317,"rel":318},"https:\u002F\u002Fgohugo.io\u002Fhosting-and-deployment\u002Fhosting-on-netlify\u002F",[86],"Hugo の公式","に詳しく記載されています。",[10,322,323],{},"やることはブログコンテンツが入った GitHub レポジトリの指定、ビルドコマンドの指定、Publish ディレクトリの指定、使用している Hugo のバージョン指定などです。",[10,325,326],{},"Hugo のバージョンは 使用しているものが Netrify で対応しているか確認を行ってください。",[10,328,329,330,334],{},"あとは、Custom Domain の設定を行います。設定は",[56,331,59],{"href":332,"rel":333},"https:\u002F\u002Fcu-fe-lab.com\u002Fposts\u002Fnetlify_20180501\u002F",[86],"のサイトが参考になります。",[10,336,337,338,343,344,349],{},"Route 53 側の設定もいじる必要があります。Netlify では www ありドメインを推奨しているのでリダイレクト等の設定も行います（",[56,339,342],{"href":340,"rel":341},"https:\u002F\u002Fwww.netlify.com\u002Fblog\u002F2017\u002F02\u002F28\u002Fto-www-or-not-www\u002F",[86],"参考","）。あとは",[56,345,348],{"href":346,"rel":347},"https:\u002F\u002Fqiita.com\u002FNaokiIshimura\u002Fitems\u002F64e060ccc244e38d0c15",[86],"ここ","が参考になります。",[10,351,352],{},"設定が完了すると、GitHub に push するとビルド → デプロイまでやってくれるようになります。",[14,354,355],{"id":355},"感想",[10,357,358],{},"移行してすぐにまとめておけばよかったと後悔してます。",[10,360,361],{},"もともとはさくらインターネットで DNS の管理をしていて、そこから Route 53 に移行するのに苦労した記憶があります。\nあとは、Hugo のビルド部分ですね。フォルダの指定やバージョンの指定がうまくいかず何度もやり直しました。",[10,363,364],{},"まあ、とにかくいろいろな苦労の末に現在のやり方に落ち着いてます。\n今のところ不満なく快適にブログの執筆ができてます",[10,366,367],{},"他にもっといいやり方があったら教えてください！",[369,370,371],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":112,"searchDepth":172,"depth":172,"links":373},[374,375,376,377,378,379],{"id":16,"depth":172,"text":17},{"id":32,"depth":172,"text":32},{"id":69,"depth":172,"text":69},{"id":90,"depth":172,"text":91},{"id":307,"depth":172,"text":308},{"id":355,"depth":172,"text":355},"2020-01-02","Hugoをブログ作成は非常に使いやすくて便利ですよね。私が1年ほどHugoを使ったブログ運営を行ってみて、いろいろ改良した現在のHugoブログ運営環境をご紹介します。",false,"md",{},true,"\u002Fcontents\u002Fhugo_blog_create",{"title":5,"description":381},"contents\u002Fhugo_blog_create",[390],"Hugo","\u002Fimg\u002Ftwitter-card.png","x0sgSQT6sbuv6cL6-M-i79OuZ5XZhCnu6XHmLg_gs-c",[394,398],{"title":395,"path":396,"stem":397,"children":-1},"DockerでHugo環境構築","\u002Fcontents\u002Fhugo-docker","contents\u002Fhugo-docker",{"title":399,"path":400,"stem":401,"children":-1},"Hugoのテーマ作成のやり方","\u002Fcontents\u002Fhugo_create_theme","contents\u002Fhugo_create_theme",1782257369297]