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上へサイトをデプロイできます。

deploy.sh

#!/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です。