Hugo + GitHub Pagesでブログを作成する方法
Hugo + GitHub Pagesでブログを作成する方法を説明します。
本記事では、Hugo + GitHub Pagesの組み合わせでブログ環境を構築する方法について説明します。
上から順番に読んでいただくと、ブログを作成できるような流れになっています。
本記事の内容です。
環境
Windows10 (1903)
前提条件
- Chocolateyインストール済み
- Gitインストール済み
インストール
下記コマンドを実行します。コマンドを実行するディレクトリはどこでも良いです。
choco install hugo -confirm
choco install hugo-extended -confirm
サイトを作成
サイトを作成したいディレクトリで下記コマンドを実行します。
[サイト名]には、好きなサイト名を入力してください。
hugo new site [サイト名]
記事を作成
記事を作成するには、作成したサイトディレクトリのルートで下記コマンドを実行します。
[ディレクトリ名]は、後述する各テーマに沿って指定します。
[記事名]は、好きな記事名を入力してください。
hugo new [ディレクトリ名]/[記事名].md
記事作成後は、自由に作成したMarkdownファイルを編集します。
テーマを適用
本記事内では、hugo-future-imperfect-slimを適用します。
最初に作成したサイトディレクトリのルートで下記のコマンドを実行し、GitHubからthemesディレクトリへテーマをダウンロードします。
git clone https://github.com/pacollins/hugo-future-imperfect-slim.git themes/hugo-future-imperfect-slim
その後、下記コマンドを同ディレクトリで実行し、サンプルサイトの設定を適用します。
xcopy /s /e .\themes\hugo-future-imperfect-slim\exampleSite .
ちなみに、テーマを適用する場合は、下記の様にconfig.tomlへ「theme="[テーマ名]"」の行を追記します。
theme = "hugo-future-imperfect-slim"
テーマの一覧を確認できるページについては、本記事最後に記述します。
ローカルでサーバ起動
下記コマンドを実行する。
hugo server
また、下記のように「-p [ポート番号]」とオプションを付けると、そのポート番号で起動することが可能。
hugo server -p 12345
これで、最低限ホームページを作成することができます。
GitHub PagesへDeploy
ゴール
今回は、GitHub Pagesのサブディレクトリで公開します。
例:下記URLにてブログを公開。
https://koki-nakamura22.github.io/test-hugo-blog/
GitHub上でブログ用のリポジトリを作成
静的ファイルを公開するためのリポジトリを作成します。
今回は「test-hugo-blog」という名前のリポジトリを作成します。
作成したリポジトリをクローン
サイトディレクトリのルートで下記コマンドを実行し、作成したリポジトリをクローンします。
下記のコマンドでは、念のためクローン前に既存のpublicディレクトリを削除しています。
rmdir /s /q public
git clone https://github.com/koki-nakamura22/test-hugo-blog.git public
デプロイ用スクリプト作成
deploy.batというファイルをサイトディレクトリのルートに作成し、下記コードをファイル内にコピー&ペーストします。
@echo off
REM Build the project.
hugo
REM Go to public directory.
cd public
REM Add changes to git.
git add .
REM Create a commit message.
set d=%date%
set yyyy=%d:~-10,4%
set mm=%d:~-5,2%
set dd=%d:~-2,2%
set t=%time: =0%
set hh=%t:~0,2%
set mn=%t:~3,2%
set ss=%t:~6,2%
set commitMsg=Site updated: %yyyy%-%mm%-%dd% %hh%:%mn%:%ss%
REM Commit.
git commit -m "%commitMsg%"
REM Push source and build repos.
git push origin master
REM Come back to the project root.
cd ..
echo "The web page has been updated!"
GitHub Pagesの設定
「GitHub上でブログ用のリポジトリを作成」で作成したリポジトリのページを開き、下記の設定を行います。
Settings -> GitHub PagesのSourceでmaster branchを選択 (大体の場合はmaster branchだと思います。)
実際の画面を確認しながら作業を行いたい方は、下記ページを参考にするとわかりやすいです。
デプロイ
先ほど作成した「deploy.bat」を実行します。
ここまで作業が終わったら、実際に作成したurlへアクセスし、Hugoで作成したものが表示されるかを確認してみましょう。
