This article has been Deprecated
New article link
はじめに
今まで自身がプライベートで作成してきた作品をポートフォリオサイトとして公開しました。
ポートフォリオサイト: https://momotaro98.github.io/
サイトソース: https://github.com/momotaro98/hugo-bio
デプロイ先はGitHub Pages
静的サイト生成にはHugoとHugo用に提供されてるResumeテーマモジュール(こちら)を利用させていただきました。
本記事ではこれらを使ったサイトの作り方、公開方法を紹介します。
前提
ローカル環境: MacOS High Sierra 10.13.6
手順
サイト作成
はじめにHugoをインストール
$ brew install hugo
テーマのレポジトリをフォークしてGit Submoduleに追加
Hugo用に提供されているテーマを利用します。
今回はポートフォリオサイトを作りたいのでこちらのResumeテーマというのを利用させていただきました。
私は自分でサイトのデザインやHugoを変更できるよう、GitHub上のレポジトリをフォークしています。
フォークしたらサイトを作成する作業ディレクトリに下記コマンドでGit Submoduleとして追加します。
$ cd YOUR_SITE_WORKSPACE_PATH
$ git submodule add -b master git@github.com:<YOUR_USERNAME>/hugo-resume.git themes/resume
サイト用レポジトリを作成
ポートフォリオサイトを作ります。今回利用するResumeテーマではこちらに作成例が載っているので参考にして作りましょう。
【はじめに】のリンクで紹介している私のも参考にできます。
Hugoの以下コマンドでローカルマシン上に変更のホットウォッチをするサーバが立ち上がるのでチェックしながら作れます。
$ hugo server
サイトをGitHub Pagesへデプロイ
GitHub PagesのレポジトリをGitHubへ作成
公式ドキュメントを参考に自身のユーザアカウントのGitHub Pagesのレポジトリを作成します。
【注意】 すでに自身のユーザアカウントに別サイトをデプロイ済みであれば、プロジェクトページとして作成するか、GitHub Pages以外の静的サイトホストサービスを利用してください。
GitHub PagesのレポジトリをGit Submoduleとしてソースレポジトリに追加
上記で作成したGitHub Pagesのレポジトリをサイト用レポジトリのpublicディレクトリ配下にGit Submoduleとして追加します。
$ cd YOUR_SITE_WORKSPACE_PATH
$ git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public
デプロイ
作成しているサイトが問題ないことを確認した後、以下のデプロイ用スクリプトをサイト用レポジトリのトップに配置し、実行することでGitHub Pages上へサイトをデプロイできます。
#!/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`
# Go To Public folder
cd public
# Add changes to git.
git add .
# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
# Push source and build repos.
git push origin master
# Come Back up to the Project Root
cd ..
$ cd YOUR_SITE_WORKSPACE_PATH
$ chmod +x deploy.sh
$ ./deploy.sh
Pushできていることを確認し、
https://YOUR_USERNAME.github.io/
へアクセスしサイトが表示できていればOKです。