github pagesとhugoで簡単blog作成

Jan 1, 0001 github hugo

動機

2020年の年始にこれまでの人生を振り返ってみたところ,「これまでoutputあんまりしてなかったなぁ」と気がついたのと, 個人的には2019年, 2020年は割と人生のイベントも多く, 「思い出の記録というのは大事だなぁ」と思ったりもしたので始めました.

正直, サーバ借りてドメイン取ってアプリケーションサイドのインフラで遊ぼうとも思っていたのですが, お金をあまりかけられない事情が発生したので, 無料っていいなと思ったのでgithub pagesを選びました. 辛みだね.

github pages

github pageというものがあり, githubが提供している.

repository毎にweb pageが簡単に作れて差分管理もできる.

作った製品のデモページを置いたりするのにも使えて便利です.

今回はユーザサイトを作る心づもりです.

https://pages.github.com/

1Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

hugo

webサイトを構築するためのフレームワーク. 早いらしい. 確かに早い気がする.

全てが面倒に感じ始め, wordpressで良いかと思っていたところ, 早くてカスタマイズもできてテンプレートも多いこいつに出会った.

マークダウン使えて便利だね.webサーバ機能が大変便利.

hugoの使い方や学びはまた今度書こうかなと.

https://gohugo.io/

1Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

導入手順

1. hugo をインストール

以下の手順でインストールとサイトの作成を実施.

1$ wget https://github.com/gohugoio/hugo/releases/download/v0.76.2/hugo_0.76.2_Linux-64bit.deb
2$ sudo dpkg -i /ugo_0.76.2_Linux-64bit.deb
3$ hugo new site

ちなみに使用環境は以下:

1OS: Ubuntu 20.04(VM)
2VM CPUs: 4
3VM Memory: 16GB 
4Hugo version: 0.76
5Hypervisor: Workstation 16

2. テーマを選ぶ

hugoには豊富なテーマが存在する.

今回は以下を選んだ.

Clarity

https://themes.gohugo.io/hugo-clarity/

サイトのディレクトリにて以下コマンドでsourceを落としてくる.

1$ git submodule add https://github.com/chipzoller/hugo-clarity.git
2$ cp -a themes/hugo-clarity/exampleSite/* .
3$ hugo server

3. テーマ検証

ブラウザでlocalhost:1313にアクセスするとテーマを確認できる.

serverを起動したまま編集でき、変更は即座に反映されて便利だね.

4. テーマ編集

割愛.ページが充実してきたら書きます.

5. リポジトリ作成

github上にリポジトリを作成.

ここでページを管理していく.

非公開コンテンツ管理用:

https://github.com/bluestar714/motion-2.0.git

公開用:

https://github.com/bluestar714/bluestar714.github.io

ユーザサイトとするため公開用リポジトリ名をUSERNAME.github.ioとした.

6. コンテンツ生成

以下のコマンドをサイトディレクトリにて実施.

publicディレクトリが生成される.

このpublicディレクトリを公開用リポジトリにpushする.

1$ hugo -t hugo-clarity

事前にhugo serverコマンドで状態を確認したほうが良い.

7. Configの編集

config.toml内の以下のbaseurlを編集する.

github pagesで与えられたurlを記述する.

今回の構成ではUSERNAME.github.ioとなる.

1<config.toml>
2
3baseurl = "https://bluestar714.github.io"

8. リポジトリに反映

サイトのディレクトリにて以下を実施してgithub上に反映させる.

1$ git init
2$ git remote set-url origin git@github.com:USER_NAME/REPOSITORY_NAME
3$ git add .
4$ git commit -m "first commit"
5$ git push origin main

9. public ディレクトリサブモジュール化

サイトのディレクトリにて以下を実施.

サブモジュール化する.

1$ git submodule add -b main git@github.comUSER_NAME/USER_NAME.github.io.git public

10. デプロイ自動化

デプロイ用shellscriptを用意する.

 1<deploy.sh>
 2
 3#!/bin/bash
 4
 5hugo -t hugo-clarity
 6
 7cd public
 8git add .
 9
10msg="push successfully `date`"
11if [ $# -eq 1 ]
12          then msg="$1"
13fi
14git commit -m "$msg"
15
16# Pushing public contetns to github
17git push origin main
18
19#Optional
20cd ..
21git add .
22git commit -m "$msg"
23git push

何でも良いですが、shellscriptを定期的に実行するように整える.

規模的にcrontabで良いやと言った感じ.

毎日13時に適当にuploadしてくれるので雑に書いてuploadされる感じです.

 1$ crontab -e
 2Select an editor.  To change later, run 'select-editor'.
 3  1. /bin/nano        <---- easiest
 4  2. /usr/bin/vim.basic
 5  3. /usr/bin/vim.tiny
 6  4. /bin/ed
 7
 8Choose 1-4 [1]: 3
 9# 毎日13時にコマンドを実行する
1000 13 * * * <COMMAND_PATH>

11. github pages 機能の有効化

公開用リポジトリのgithubのページにアクセスして[Settings]->[Options]->[Github Pages]にて有効化する.

今回はsourceをmainブランチのrootディレクトリとした.

所感

githubに慣れて入れば楽にページを公開できることを確認できました.

製品のデモや自分の成果物を公開できるので活用できたら良いなぁと.

github 上に置いておけるので管理いらずでらくらくなことも良いですね

普段文章をあまり書かないのでこういう書物はめちゃくちゃ時間がかかりますね.Outputしている人ほんと偉いわ.