2017-12-21HugoとNetlifyを連携して静的ブログを公開するHugoで生成した静的ファイルをホスティングサーバにアップして公開作業をします。今回はGitHub連携もできるNetlifyにデプロイしました。この記事の目次NetlifyとはGitHubにHugoのコードをデプロイするgitignoreを作成リモートリポジトリ設定HugoとNetlifyを連携するドメインHugoのインストールについては下記でまとめました。静的ジェネレーターHugoを使うNetlifyとは静的なHTML/CSS/JavaScript/画像をホスティングサービスです。独自ドメイン適応可能ワンクリックでSSL、HTTP/2に対応スナップショットでバージョン管理アクセスコントロール(Basic認証など、ただし有料プラン)CLI使ってのデプロイできるGitなどWebhookを利用しての連携Hugoなど自動ビルドに対応と、高機能なのに、アクセスコントロール以外は無料でホスティングしてくれます。S3とかでもBasic認証をかけて非公開とかがちょっと難しいので、管理画面で設定できるのはお手軽すぎる。GitHubにHugoのコードをデプロイするローカルでgit管理下においていたブログを、GitHubにアップします。Bitbucket/GitLabにも対応しているので、普段使ってるリモートリポジトリサービスでも大丈夫です。gitignoreを作成.gitignoreファイルを作成/publicpublicフォルダ以下はNetlifyがビルドしてくれるので、ローカルからはコミットしないように除外します。site」でサイト設定を行う。リポジトリを選択後、設定する内容は下記のとおりHugoのVersionを変数に与えてあげないとNetlify側のHugoのバージョンが合わなくてデプロイできないので注意。これで公開できました。ドメインは「https://****.netlify.com/」というサブドメインアドレスを仮当てしてくれます。managementの画面で独自ドメインの設定、SSLのインストール、HTTPSの適応がワンクリックで適応できます。pushするだけで自動デプロイされる環境が出来上がりました。自動デプロイのフックもブランチを分けることができるので、productionブランチなど作ってステージングと切り分けるなどの運用もできそうです。※今回作成したファイルは、Githubにアップしてあります。Tsukaguchi1987年生まれ。Webデザイナー/エンジニア。DTP、動画配信・リッチコンテンツ制作、Web制作会社共同創業を経て、フリーランスとして独立。デザインからフロントエンドの実装、WordPressやMovableTypeなどのCMS構築まで一貫した制作を行う。キーワードから探る未来像」や「現場のプロが教えるWeb制作の最新常識」など。Also静的ジェネレーターHugoを使うこのサイトはブログシステムにHugoを利用して運用してます。今回初めてHugoでテーマ作ってみたので、Markdown基本でたまに書き方を忘れてそのままHTMLコード書きたくて、画像はPhotoshopで作って、なんとなくディレクトリに整理して入れたい人には向いてるんじゃないかなということで紹介します。MOREお問い合わせ・ご相談はお気軽にご連絡ください。DESIGNはWeb制作を行うフリーランスの制作事務所です。当サイトはブログを軸にしたコンテンツ展開をしており、Webデザイン、システム、マーケティングなど、実制作に基づく技術情報を掲載しています。