静的サイトジェネレータ「Hugo」〜公開方法〜

公開　Deploy

Hugoには、サイトを生成する仕組みはありますが公開する仕組みは持っていません。そのため、Hugoで生成した生成物（HTML+CSS）を何らかの方法で、Webサーバに持っていってあげなければいけません。

必要なのは、どこに公開するかと、どうやって公開するかです。

どこで公開するか

Hugoで生成したサイトをどこに公開するかは、いくつか選択肢があります。例えば、以下のようなものです。

  • VPS(Virtual Private Server)
  • レンタルサーバ（ロリポップ）
  • GitHub Pages
  • Amazon S3

私は、さくらのVPSを契約しています。自分で色々といじれるので楽しいです。

2017/03/19追記
さくらVPSを解約したので、 Netlify で公開するように変更しました。

Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する

2018/12/13追記 NetlifyからGitHub Pagesに変更しました。

NetlifyからGitHub Pagesに移行した件

どうやって公開するか

やることは単純で、Hugoで生成したHTML+CSSを公開サーバにアップロードするだけのことです。とはいえ、毎回手動で配置するわけにはいかないため、スクリプトで自動化させます。

例えば、以下の方法です。

  • FTP
  • rsync
  • git push

私は、以下のようにRakeタスクとして定義しています。

rake deploy_to_sakuraと叩けば、さくらVPSにrsyncでファイルをアップロードしています。

require "rubygems"
require "bundler/setup"
require "stringex"

posts_dir       = "content/blog/"    # directory for blog files
new_post_ext    = "markdown"  # default new post file extension when using the new_post task

desc "deploy_to_sakura"
task :deploy_to_sakura do
  sh 'rm -r public'
  sh 'hugo -t hugo-zen'
  sh 'mv public/category public/blog'
  sh 'mv public/tags public/blog'
  sh 'mv public/en/category public/en/blog'
  sh 'mv public/en/tags public/en/blog'
  sh "rsync --iconv=UTF-8-MAC,UTF-8 -e \"ssh -p #{ENV['SSH_PORT']}\" -avz --delete public/ web@#{ENV['SAKURA_IP']}:/home/web/www/meganii.com"
end

Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト (技術の泉シリーズ（NextPublishing）)
Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト (技術の泉シリーズ（NextPublishing）)
インプレスR&D
AmazonKindle楽天市場Yahoo!ショッピング

Links in this post

Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する
現在（2017/3月）、Hugoで生成した静的サイトをホストするためにさくらVPSを利用しています。 さくらVPSは2年近く使ってきましたが、そろそろ更新時期した（1年まとめて契約しているため）。 自分が契約したタイプはデイスクがHDDのままSSDに変更できないタイプだったので、新規契約し直すか、Conoha VPSに切り替えるか、それともVPS自体を契約しないとするか迷っています。 良い機会であるため、静的サイトのホスティングをVPSではなくクラウドサービスを利用しようと検討しました。 目次 移行先検討 Netlifyとは カスタムドメインの設定方法 お名前.comでの設定 app.netlify.comでの設定 リダイレクト処理 NetlifyでHugoを使うときの注意点 _headers ビルドにNetlify以外のCIツールを利用する場合 参考 移行先検討 GitHub Pages Netlify 自分の中ではGitHub PagesかNetlifyの2択でした。 静的サイトのコンテンツはGitHubにコミットしているため、最初は、GitHub Pagesにしようとしていました。 しかし、現状HTTP/2に対応していないことからあまり気乗りしませんでした。 もともとVPSを利用していたときには、 Lets’s Encryptでブログの常時SSL化にチャレンジのように、常時SSLに対応したり、h2oをインストールしてなんとかHTTP/2に対応した経緯もあり、せっかくなら対応できると嬉しいです。 その点、Netlifyを試してみたら「これで決まり！」と思うぐらい良かったのでまずはNetlifyで運用してみます。 Netlify: All-in-one platform for automating modern web projects
2017-03-19
NetlifyからGitHub Pagesに移行した件
Netlify から GitHub Pages に移行した。 結果、体感としては早くなった。 Netlifyの表示スピードがいまいちパフォーマンスを発揮できていない件 Before: 2018/10/14時点の Netlifyでのwww.meganii.com の結果
2018-12-12

Backlinks

静的サイトジェネレータHugo
Hugo入門 静的サイトジェネレータ「Hugo」でシンプルブログサイトを構築する 静的サイトジェネレータ「Hugo」インストール 静的サイトジェネレータ「Hugo」〜公開方法〜 サイト構築 Hugoのテーマでsubmoduleを使う方法 HugoでのシンタックスハイライトにPython Pygmentsが不要となった HugoのRelated Contentを利用して関連記事を表示する gulpで画像の最適化 Hugoソースコードリーディング〜Taxonomy〜 Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する Hugoでブログカードを作成する（resources.GetRemote利用） Templates 【Hugo】Partial Templateでは複数returnを記述する早期Returnを使えない 【Hugo】images.TextでOGP画像を生成する Shortcodes Hugo Shortcodesの作り方 HugoのShortcodesを利用してAmazon紹介リンクタグを作成 HugoでAMP対応のブログカードを作る AMP対応 AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜 AMP OptimizerによるAMPのさらなる最適化 AMP Service WorkerでPrefetch Linksを実現する Data Driven Content Hugoで人気記事を表示するためJSONを返すAPIサーバを作りData-driven Contentを試してみた Tailwind CSS HugoでTailwindCSSを利用しAMP Validなページを生成する ビルド npm-run-allでローカルAPI serverとHugo serverを同時に実行する GitHub Actionsのスケジューラ実行を利用して定期的にビルドする Circle CIでHugoのビルド・デプロイを実行する コンテンツ作成 Git pre-commitフックでFrontmatterの「更新日時」を自動更新する Hugoでブログ記事一覧ページ（ブログアーカイブページ）を作成する 移行 はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました JekyllからHugoへの移行ポイント Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する 書籍
2017-12-31