ys memos
Blog
About
Features
Open Source

Github Pages x HUGOをセットアップする

github-pages
hugo
blog

2019/04/19

最近，Qiita に記事を少しづつ掲載していたのだが，少しづつ内容が増えていくにつれて，

「自分のサイトが欲しいなあ・・・」

と思うようになってきた．しかし，調べてみると

・　自宅サーバを立てる
・　レンタルサーバを借りる

など，貧困学生には手の出しづらいものが次々と出てきた． その中で，簡単に始められて無料でできるものとして，

Github Pages が出てきた．Github Pages は以前，

「Github Pages はページ公開は楽だけど html とかよくわからないし・・・」

と思って，リポジトリを作ったまま何もできないまま停滞していた．

そこで見つけたのが SSG(Static Site Generator)である．SSG は日本語では静的サイトジェネレータと呼ばれ，その名の通り静的なサイトを生成することができる． SSG は HUGO を使っているのだが，HUGO は GO 言語で開発されており，高速に動作すると言われている．（他を実際に使ったことがないので本当はわかりません．）

パソコンは苦手なので，環境構築には１日ほどかかってしまったが，手順としては簡単に導入することができた．他の方の手順紹介に，どこでコマンドを実行したら良いかを追加して紹介する． 自分は，Github で管理しているリポジトリはすべて~/Github/にあるので，その部分だけ自分似合わせてもらえばいいと思う． ここでは，環境構築の手順を紹介する．手順の概要は以下．

  1. Github のアカウント作成
  2. Github Pages のためのリポジトリ作成
  3. Github Pages のソースファイルを保存するリポジトリ作成
  4. サブモジュール化
  5. HUGO サイト作成
  6. 記事の作成
  7. デプロイ
  8. サイト確認

以上が手順であるが，環境構築中はほとんどchanmitsu55 さんのこちらの記事を参考にさせてもらったので，こちらを見てもらうとわかりやすいと思う．

Github は知っている人が多いと思うが，Github Pages とは Github でサイトを公開するサービスである．

Github のアカウントをすでに持っている場合はスルーして良いが，まだな方はGithub のホームからまずはアカウントを作る．また，作成したリポジトリをローカルにクローンする．

Github では，通常は好きなリポジトリ名をつけることができるのだが，リポジトリ名をusername.github.ioとするとネットに公開される．

~/Github
$ cd ~/Github
$ git clone https://github.com/username/username.github.io

Github Pages x HUGO でブログの作成方法を紹介している方をみると，username.github.ioリポジトリとソースファイルを保存するリポジトリは分けた方がいいようだ．今回は，blogという名前のリポジトリを作成した．

~/Github
$ cd ~/Github
$ git clone https://github.com/username/blog

HUGO コマンドを用いて HUGO サイトを作成する．ここで，サイトのテーマはこちらから選択することができ，好みのテーマがあれば github リポジトリなどが記載されている．

~/Github
$ cd ~/Gibhub
$ hugo new site temp
$ cd temp/theme
$ git clone https://github.com/appernetic/hugo-bootstrap-premium
$ cd ..

ここまでで，HUGO サイトと使用するテーマは準備された．次は，~Github/temp/config.tomlを書き換える必要がある．公式のリポジトリに記載されている．以下のconfig.tomlは先ほど言及したchanmitsu55 さんのこちらの記事を参考にした．

自分のconfig.tomlにする際はusernameなどを自分に合うように変更すると良い．

baseURL = "https://username.github.io/"
languageCode = "ja-jp"
weight = 1
title = "title"
publishDir = "public"
theme= "hugo-bootstrap-premium"
hasCJKLanguage = true
paginate = 10
paginatePath = "page"

[permalinks]
	post = "/:year/:month/:day/:filename/"
	code = "/:filename/"

[author]
	name = "author name"
	email = "mailaddress@yahoo.co.jp"

[params.theme]
	name = "yeti"

[params]
	BrandImage = "/logo.png"
	brand = "brand name"
	topline = "topline"
	footline = "Copyright&copy; <a href='/about/'>name</a>"
	showRightSidebar = true
	highlight = "default"
	twitter  = "acount id"
	github   = "acount id"

[[menu.main]]
	name = "Home"
	identifier = "home"
	url = "/"
	weight = -200
	pre = "<i class='fa fa-home'></i>"

[[menu.main]]
	name = "Archives"
	identifier = "archives"
	url = "/post/"
	weight = -180
	pre = "<i class='fa fa-archive'></i>"

[[menu.main]]
	name = "About"
	identifier = ""
	url = "/about/"
	weight = -100
	pre = "<i class='fa fa-info-circle'></i>"

こちらも公式リポジトリにサンプルがあるので，少しづつ自分用に変更していこうと思う．

サブモジュール化するためには，一度~/Github/blog内のpublicを消去する必要がある．この方法は公式ドキュメントに記載されている．

~/Github/blog
$ cd ~/Github/blog
$ rm -rf public
$ git summodule add -b master https://github.com/username/username.github.io public

記事の作成はhugoコマンどを用いると簡単にできる．

$ cd ~/Github/blog
$ hugo new post/articlename.md

ここで作成されたファイルを編集することで記事が完成する．生成ファイルの 4 行目に

draft : true

とあり，これは下書き中を意味する．ネットに載せるためには

draft : false

に変更すると良い．

~/Gibhub/blog内に記事を書いてもデプロイしなければ Github Pages で公開されない．デプロイする処理のスクリプトが公式で紹介されている．以下のファイルは~/Github/blog/deploy.shとする．

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo

# 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 ..

deploy.shを実行する際には

$ ./deploy.sh

とすると良いのだが，ファイル作成直後は実行権がなくて実行ができない．

$ bash ./deploy.sh

としたら実行できる．しかし，後のことも考えると

$ chmod +x deploy.sh

として実行権を与えておくとよい．

ここまでで，ネットにサイトを公開することができる．実際にサイトを閲覧するためには，ブラウザを開き，URL 欄にhttps://username,github.ioとするとサイトのホームが表示される．

実際に記事を編集している際にはなんどもデプロイせずに

~/Github/blog $ hugo server

と実行することでローカルサーバを立て，ブラウザの URL 欄に

localhost:1313

と入力することで逐次記事の状態を確認しながら作業できる． これは こちらにも方法を記載した．

関連タグを探す

github-pages
hugo
blog