[{"data":1,"prerenderedAt":626},["ShallowReactive",2],{"content-\u002Fcontents\u002Fhugo-docker":3,"surroundPost-\u002Fcontents\u002Fhugo-docker":617},{"id":4,"title":5,"body":6,"createdAt":605,"description":132,"draft":606,"extension":607,"meta":608,"navigation":609,"path":610,"seo":611,"stem":612,"tags":613,"thumbnail":615,"updatedAt":605,"__hash__":616},"contents\u002Fcontents\u002Fhugo-docker.md","DockerでHugo環境構築",{"type":7,"value":8,"toc":597},"minimark",[9,13,17,20,23,26,29,32,45,48,51,54,57,60,70,74,77,80,83,111,117,120,126,169,172,185,276,282,285,288,291,297,305,308,402,419,453,460,465,468,473,492,499,502,507,510,513,519,537,556,559,562,581,584,590,593],[10,11,12],"h2",{"id":12},"はじめに",[14,15,16],"p",{},"どうも、おい丸です。",[14,18,19],{},"今回は普段このサイトで使っている Hugo に関する記事です。",[14,21,22],{},"最近、以前から使っていた Macbook とは別に機械学習用のノート PC を買いました。",[14,24,25],{},"新しいノート PC でも同じようにブログの更新をしたいと思い、どうせなら Docker で環境作ろうということでやってみました。",[10,27,28],{"id":28},"環境",[14,30,31],{},"今回作業を行った環境は以下になります。",[14,33,34,35,38,39,41,42,44],{},"NAME=\"Ubuntu\"",[36,37],"br",{},"\nVERSION=\"18.04.3 LTS (Bionic Beaver)\"",[36,40],{},"\nDocker version 19.03.2",[36,43],{},"\ndocker-compose version 1.24.1",[14,46,47],{},"また、Hugo の作業フォルダは作成済みとします。",[14,49,50],{},"※ docker のインストール方法には触れません",[10,52,53],{"id":53},"やりたいこと",[14,55,56],{},"やりたいことは、docker（docker-compose）さえあれば、どのデバイスからでも Hugo でブログ更新ができるようにすることです。",[14,58,59],{},"データは github にあがっているので、clone すればどこでも使えます。\nなので今回の環境でコンテナに求められるのは、以下の 2 つ",[61,62,63,67],"ul",{},[64,65,66],"li",{},"新規記事作成コマンドが使える",[64,68,69],{},"localhost:1313 でプレビューできる",[10,71,73],{"id":72},"docker-を使った-hugo-環境の作成方法","Docker を使った Hugo 環境の作成方法",[14,75,76],{},"まずは Docker Hub で Hugo の image がないか探しました。",[14,78,79],{},"やはり、Docker Hub にはたくさんの Hugo 用 image がありました。",[14,81,82],{},"今回は以下の Docker image を使います。",[61,84,85,99],{},[64,86,87,88],{},"Docker Hub\n",[61,89,90],{},[64,91,92],{},[93,94,98],"a",{"href":95,"rel":96},"https:\u002F\u002Fhub.docker.com\u002Fr\u002Fklakegg\u002Fhugo",[97],"nofollow","klakegg\u002Fhugo",[64,100,101,102],{},"Github\n",[61,103,104],{},[64,105,106],{},[93,107,110],{"href":108,"rel":109},"https:\u002F\u002Fgithub.com\u002Fklakegg\u002Fdocker-hugo",[97],"klakegg\u002Fdocker-hugo",[14,112,113,114,116],{},"選んだ理由としては他のサイトで ↑ が使われていてちゃんと動作しているようだったからです。",[36,115],{},"\nまた、image が非常に軽量だったというのもあります。",[14,118,119],{},"それでは、環境を作っていきます。",[14,121,122,123,125],{},"まずは、Docker 用のフォルダを作成します。",[36,124],{},"\n作成場所はどこでもよいと思いますが、私は Hugo の作業フォルダと同じ階層にしました。",[127,128,133],"pre",{"className":129,"code":130,"language":131,"meta":132,"style":132},"language-bash shiki shiki-themes github-dark",".\n├── Docker\n└── hugo_folda # Hugo作業フォルダ\n","bash","",[134,135,136,145,156],"code",{"__ignoreMap":132},[137,138,141],"span",{"class":139,"line":140},"line",1,[137,142,144],{"class":143},"sDLfK",".\n",[137,146,148,152],{"class":139,"line":147},2,[137,149,151],{"class":150},"svObZ","├──",[137,153,155],{"class":154},"sU2Wk"," Docker\n",[137,157,159,162,165],{"class":139,"line":158},3,[137,160,161],{"class":150},"└──",[137,163,164],{"class":154}," hugo_folda",[137,166,168],{"class":167},"sAwPA"," # Hugo作業フォルダ\n",[14,170,171],{},"今回はより簡単に使えるように docker-compose を使用します。",[14,173,174,177,178,181,182,184],{},[134,175,176],{},"Docker","フォルダ配下に",[134,179,180],{},"docker-compose.yml","を作成します。",[36,183],{},"\n内容は以下になります。",[127,186,190],{"className":187,"code":188,"language":189,"meta":132,"style":132},"language-yml shiki shiki-themes github-dark","version: \"3\"\nservices:\n  work:\n    image: klakegg\u002Fhugo:0.58.2-alpine\n    volumes:\n    　- ..\u002Fhugo_folda:\u002Fsrc\n    ports:\n      - \"1313:1313\"\n    command: shell\n","yml",[134,191,192,205,213,220,231,239,248,256,265],{"__ignoreMap":132},[137,193,194,198,202],{"class":139,"line":140},[137,195,197],{"class":196},"s4JwU","version",[137,199,201],{"class":200},"s95oV",": ",[137,203,204],{"class":154},"\"3\"\n",[137,206,207,210],{"class":139,"line":147},[137,208,209],{"class":196},"services",[137,211,212],{"class":200},":\n",[137,214,215,218],{"class":139,"line":158},[137,216,217],{"class":196},"  work",[137,219,212],{"class":200},[137,221,223,226,228],{"class":139,"line":222},4,[137,224,225],{"class":196},"    image",[137,227,201],{"class":200},[137,229,230],{"class":154},"klakegg\u002Fhugo:0.58.2-alpine\n",[137,232,234,237],{"class":139,"line":233},5,[137,235,236],{"class":196},"    volumes",[137,238,212],{"class":200},[137,240,242,245],{"class":139,"line":241},6,[137,243,244],{"class":200},"    　- ",[137,246,247],{"class":154},"..\u002Fhugo_folda:\u002Fsrc\n",[137,249,251,254],{"class":139,"line":250},7,[137,252,253],{"class":196},"    ports",[137,255,212],{"class":200},[137,257,259,262],{"class":139,"line":258},8,[137,260,261],{"class":200},"      - ",[137,263,264],{"class":154},"\"1313:1313\"\n",[137,266,268,271,273],{"class":139,"line":267},9,[137,269,270],{"class":196},"    command",[137,272,201],{"class":200},[137,274,275],{"class":154},"shell\n",[14,277,278,279,281],{},"私の場合は、コンテナ内に入って Hugo コマンドを使いたかったので上記のような内容にしました。",[36,280],{},"\n私と違う場所に Docker フォルダをおいた方は、マウントするフォルダ場所などを適宜変えてください。",[14,283,284],{},"作成者の readme を読めばわかるのですが、build だけ serve だけのような使い分けも簡単にできるようになっています。",[14,286,287],{},"おそらく、Docker for Mac の人だと上記内容でうまくいくはずです。",[14,289,290],{},"しかし、私のような ubuntu ユーザーの場合はコンテナ内でファイルを作成すると、ホスト側のユーザからは権限がないといわれ編集できなくなってしまう可能性があります。",[14,292,293,294,296],{},"調べると Linux の人はホストとコンテナの owner が別になってしまうらしいです。",[36,295],{},"\nこちらと同じ現象です。",[14,298,299,300],{},"参考：",[93,301,304],{"href":302,"rel":303},"https:\u002F\u002Fqiita.com\u002Fyohm\u002Fitems\u002F047b2e68d008ebb0f001",[97],"docker で volume をマウントしたときのファイルの owner 問題",[14,306,307],{},"この記事を参考にしつつ以下のように書き換えます。",[127,309,311],{"className":187,"code":310,"language":189,"meta":132,"style":132},"version: '3'\nservices:\n  work:\n    user: '${UID}:${GID}'\n    image: klakegg\u002Fhugo:0.58.2-alpine\n    volumes:\n      - \u002Fetc\u002Fgroup:\u002Fetc\u002Fgroup:ro\n      - \u002Fetc\u002Fpasswd:\u002Fetc\u002Fpasswd:ro\n      - ..\u002Fhugo_folda:\u002Fsrc\n    ports:\n      - '1313:1313'\n    command: shell\n",[134,312,313,322,328,334,344,352,358,365,372,378,385,393],{"__ignoreMap":132},[137,314,315,317,319],{"class":139,"line":140},[137,316,197],{"class":196},[137,318,201],{"class":200},[137,320,321],{"class":154},"'3'\n",[137,323,324,326],{"class":139,"line":147},[137,325,209],{"class":196},[137,327,212],{"class":200},[137,329,330,332],{"class":139,"line":158},[137,331,217],{"class":196},[137,333,212],{"class":200},[137,335,336,339,341],{"class":139,"line":222},[137,337,338],{"class":196},"    user",[137,340,201],{"class":200},[137,342,343],{"class":154},"'${UID}:${GID}'\n",[137,345,346,348,350],{"class":139,"line":233},[137,347,225],{"class":196},[137,349,201],{"class":200},[137,351,230],{"class":154},[137,353,354,356],{"class":139,"line":241},[137,355,236],{"class":196},[137,357,212],{"class":200},[137,359,360,362],{"class":139,"line":250},[137,361,261],{"class":200},[137,363,364],{"class":154},"\u002Fetc\u002Fgroup:\u002Fetc\u002Fgroup:ro\n",[137,366,367,369],{"class":139,"line":258},[137,368,261],{"class":200},[137,370,371],{"class":154},"\u002Fetc\u002Fpasswd:\u002Fetc\u002Fpasswd:ro\n",[137,373,374,376],{"class":139,"line":267},[137,375,261],{"class":200},[137,377,247],{"class":154},[137,379,381,383],{"class":139,"line":380},10,[137,382,253],{"class":196},[137,384,212],{"class":200},[137,386,388,390],{"class":139,"line":387},11,[137,389,261],{"class":200},[137,391,392],{"class":154},"'1313:1313'\n",[137,394,396,398,400],{"class":139,"line":395},12,[137,397,270],{"class":196},[137,399,201],{"class":200},[137,401,275],{"class":154},[14,403,404,405,408,409,412,413,415,416,418],{},"次に、",[134,406,407],{},"user: \"${UID}:${GID}\"","の環境変数を定義するのに",[134,410,411],{},".env","ファイルを",[134,414,176],{},"フォルダ配下に作成します。",[36,417],{},"\n内容は以下の通り簡単です。",[127,420,424],{"className":421,"code":422,"language":423,"meta":132,"style":132},"language-sh shiki shiki-themes github-dark","UID=\u003Cuidの値>\nGID=\u003Cgidの値>\n","sh",[134,425,426,441],{"__ignoreMap":132},[137,427,428,431,435,438],{"class":139,"line":140},[137,429,430],{"class":200},"UID",[137,432,434],{"class":433},"snl16","=\u003C",[137,436,437],{"class":154},"uidの値",[137,439,440],{"class":433},">\n",[137,442,443,446,448,451],{"class":139,"line":147},[137,444,445],{"class":200},"GID",[137,447,434],{"class":433},[137,449,450],{"class":154},"gidの値",[137,452,440],{"class":433},[14,454,455,456,459],{},"ちなみに uid と gid の値は",[134,457,458],{},"id","コマンドで調べられます。",[14,461,462,464],{},[134,463,411],{},"ファイルを書かなくても、ホスト側で環境変数として GID と UID を定義してもオッケーです。",[14,466,467],{},"これで準備はできました。",[14,469,470,472],{},[134,471,176],{},"フォルダに移動し、以下のコマンドで実行します。",[127,474,476],{"className":129,"code":475,"language":131,"meta":132,"style":132},"docker-compose run --service-ports work\n",[134,477,478],{"__ignoreMap":132},[137,479,480,483,486,489],{"class":139,"line":140},[137,481,482],{"class":150},"docker-compose",[137,484,485],{"class":154}," run",[137,487,488],{"class":143}," --service-ports",[137,490,491],{"class":154}," work\n",[14,493,494,495,498],{},"今回はコンテナが一つなので",[134,496,497],{},"run","を使いました。",[14,500,501],{},"実行すると以下のようになり、コンテナが起動して中で作業ができます。",[503,504],"img",{"alt":505,"img-src":506},"result","\u002Fimg\u002Fhugo-docker\u002Fresult.png",[14,508,509],{},"フォルダがマウントしてあるので、editer を使ってファイルの編集をしたり、また 1313 に port フォワードもしているので、いつもどおり Hugo のプレビュー機能も使えます。",[10,511,512],{"id":512},"ハマったところ",[14,514,515,516,518],{},"今回の環境でビルドしたサイトのレイアウトが変わってしまっていたことです。",[36,517],{},"\n原因は、おそらく普段使っている Hugo のバージョンが 0.54 で今回の環境では 0.58 を使用したからだと思います。",[14,520,521,522,525,526,528,529,532,533,536],{},"具体的な原因箇所は",[134,523,524],{},".Data.Pages","の部分です。",[36,527],{},"\nこれでページをリストで取得していたのが、代わりに一個上の階層の一覧（",[134,530,531],{},"contents","とか",[134,534,535],{},"posts","）が呼び出されるようになってしまっていました。",[14,538,539,540,542,543,546,547,549,550,555],{},"これは",[134,541,524],{},"の部分を",[134,544,545],{},".Site.RegularPages","に修正すること解決できました。",[36,548],{},"\n（参考：",[93,551,554],{"href":552,"rel":553},"https:\u002F\u002Fgohugo.io\u002Fvariables\u002Fsite\u002F#site-pages",[97],"Site Variables","）",[14,557,558],{},"あとは、上述したファイルのアクセス権問題です。",[14,560,561],{},"環境は docker の image を pull するだけだったので、簡単だったのですが、アクセス権問題がなかなか解決できず苦労しました。",[14,563,564,565,568,569,571,572,574,575,580],{},"最後は、port フォワードで",[134,566,567],{},"docker-compose run \u003Cservice名>","だと",[134,570,180],{},"に書いた port フォワードが反映されなかったことです。",[36,573],{},"\nまあこれに関しては、",[93,576,579],{"href":577,"rel":578},"http:\u002F\u002Fdocs.docker.jp\u002Fcompose\u002Freference\u002Frun.html",[97],"公式","に書いてあったのですぐ解決できました。",[10,582,583],{"id":583},"まとめ",[14,585,586,587,589],{},"Docker 便利ですね。",[36,588],{},"\nもっと早くやっておけばよかったです。",[14,591,592],{},"デプロイの自動化や環境構築もコード化されて、ようやくブログ更新環境が完成に近づいてきた気がします。",[594,595,596],"style",{},"html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}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 .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":132,"searchDepth":147,"depth":147,"links":598},[599,600,601,602,603,604],{"id":12,"depth":147,"text":12},{"id":28,"depth":147,"text":28},{"id":53,"depth":147,"text":53},{"id":72,"depth":147,"text":73},{"id":512,"depth":147,"text":512},{"id":583,"depth":147,"text":583},"2019-09-15",false,"md",{},true,"\u002Fcontents\u002Fhugo-docker",{"title":5,"description":132},"contents\u002Fhugo-docker",[614],"Hugo","\u002Fimg\u002Ftwitter-card.png","SgsZT2-bERdq18WDTeedkFcld3cSI6LYNTZMQNjP8m4",[618,622],{"title":619,"path":620,"stem":621,"children":-1},"資料をスムーズに作るための思考整理テンプレート","\u002Fcontents\u002Fhow_to_create_doc","contents\u002Fhow_to_create_doc",{"title":623,"path":624,"stem":625,"children":-1},"Hugoを使ったブログ運営方法の紹介","\u002Fcontents\u002Fhugo_blog_create","contents\u002Fhugo_blog_create",1782518417042]