📔 Hugo + GitHub Pages + GitHub Actions で独自ドメインのウェブサイトを構築する

この記事は Static Site Generator Advent Calendar 2020 10 日目の記事です。 はじめに Zenn や Qiita, note など様々なウェブサービスで記事を書くにつれて、ふと雑多な内容で自分の好き勝手に記事を書いて公開できる自分のブログが欲しくなりました。そこで、自分のブログを作ろうと思い調査したところ、SSG で作るのが手っ取り早そうだったのと、その中でも一番ラクにウェブサイトが構築できそうな Hugo を採用しました。 また、デプロイは簡単に行いたかったので、デプロイ先として GitHub Pages を採用しました。 独自ドメインの割り当てから HTTPS 対応まで無料でできるかつ、使い慣れている GitHub をデプロイ先に使えることが決め手でした。 Hugo で自分のブログを構築して GitHub Pages で公開できるようになったのですが、ブログ内容を更新したり記事を書くたびにビルドしてデプロイをするのが、意外と面倒なことに気づきました。そこで、GitHub Pages action を用いて、ビルドしてデプロイするという作業は自動化しました。 上記までの作業をすることで、自分のブログを書いたり更新することだけに集中できる環境を整えることができました。ウェブサイトを作りこむ以外は、簡単ないくつかの作業をするだけで Hugo で満足のいく自分のブログを書く環境が整えられたので、その手順についてまとめてみました。 ちなみに本記事の手順で実際に作成した私のブログは下記です。 https://nikaera.com/ Hugo を PC にインストールする 私は Windows には Chocolatey、Mac では Homebrew で Hugo をインストールしました。Chocolatey や Homebrew を利用したインストール方法については 公式サイトの手順 で公開されています。 # install-with-homebrew.sh # Mac で Homebrew を使って Hugo をインストールする brew install hugo # install-with-chocolatey.ps1 # Windows で Chocolatey を使って Hugo をインストールする choco install hugo -confirm # Sass/SCSS を用いてウェブサイトのデザイン改修を行いたい場合は # 下記で Chocolatey を使って Hugo をインストールする choco install hugo-extended -confirm Hugo で自分のウェブサイトを構築する Hugo プロジェクトを作成する 下記コマンドで Hugo のプロジェクトフォルダを生成できます。 ...

12月 10, 2020 · 4 分 · Me