May 2, 2020

Hugo+Github Pagesで新しい個人ウェブサイトを作った

HugoとGithub Pagesで個人ブログを作ったので作業メモ。 macOS Catalina 10.15.4で作業した。

手順

GitHub repositoryを作成
Hugoでサイト作成
GitHub Pagesで公開
独自ドメイン設定
記事を追加

GitHub repositoryを作成

GitHubで新しくリポジトリ(例えばblogという名前)を作成する。このリポジトリにはHugoのプロジェクトを配置する。プライベートリポジトリでも可。次に、username.github.ioリポジトリを作成する。ここにはHugoで生成したサイトのファイルを配置するため、パブリックリポジトリとして作成する必要がある。

mshr-h/mshr-h.github.io

$ hugo new site blog
$ cd blog
$ git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite themes/hugo-theme-cleanwhite
$ cp -r themes/beautifulhugo/exampleSite/* .
$ hugo server -D

Hugoでサイト作成

Hugoをインストールする。

$ brew isntall hugo

作業ディレクトリに移動し、hugoコマンドで新規プロジェクトを作成する。

$ cd ~/workspace
$ hugo new site blog
$ cd blog

テーマをインストールする。今回はClean Whiteを選んだ。テーマはsubmoduleとして追加する。

$ git init
$ git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite

テーマが用意してくれているサンプルページをベースに構築する。サンプルページをコピーする。

$ cd ~/workspace/blog
$ cp -r themes/hugo-theme-cleanwhite/exampleSite/* .

設定ファルを編集する。

$ vim config.toml

baseurlは独自ドメインを使わない場合username.github.io、使う場合はそのドメインを指定する。titleはブログのタイトルを、themeはテーマ名(hugo-theme-cleanwhite)を指定する。

baseurl = "https://keepcodingkeepclimbing.com/"
title = "Keep Coding, Keep Climbing"
theme = "hugo-theme-cleanwhite"
languageCode = "ja-jp"
googleAnalytics = ""
paginate = 8 #frontpage pagination
hasCJKLanguage = true

[outputs]
home = ["HTML", "RSS", "Algolia"]

[params]
header_image = "img/home-bg-jeep.jpg"
SEOTitle = "Keep Coding, Keep Climbing"
description = "programming and rock climbing"
keyword = "programming, software, machine learning, climbing, bouldering, blog"
slogan = "programming and rock climbing"
image_404 = "img/404-bg.jpg"
title_404 = "404 Not Found"
omit_categories = false
# algolia site search
algolia_search = true
algolia_appId = ""
algolia_indexName = ""
algolia_apiKey = ""
# Sidebar settings
sidebar_about_description = "Edge deep learning research engineer, open source enthusiast and rock climber"
sidebar_avatar = "img/avatar.jpg" # use absolute URL, seeing it's used in both `/` and `/about/`
featured_tags = true
featured_condition_size = 1
about_me = true
custom_css = ["css/custom-font.css"]

[params.social]
rss = true
twitter = "https://twitter.com/mshrh3"
linkedin = "https://www.linkedin.com/in/masahiro-hiramori-63b992167/"
github = "https://github.com/mshr-h"
googlescholar = "https://scholar.google.com/citations?user=NSCMi88AAAAJ"
facebook = "https://www.facebook.com/masahiro.hiramori"

[[params.addtional_menus]]
title = "CV"
href = "/top/cv/"

[[params.addtional_menus]]
title = "ABOUT"
href = "/top/about/"

[outputFormats.Algolia]
baseName = "algolia"
isPlainText = true
mediaType = "application/json"
notAlternative = true

[params.algolia]
vars = ["title", "summary", "date", "publishdate", "expirydate", "permalink"]
params = ["categories", "tags"]

[markup.tableOfContents]
endLevel = 2
startLevel = 1

[markup.highlight]
style = "dracula"

[markup.goldmark.renderer]
unsafe = true

以下のコマンドでローカルにて確認できる。

$ hugo server -D

http://localhost:1313/をブラウザで開くとサンプルページが表示される。

GitHub Pagesで公開

hugoでビルドしたページはpublic/ディレクトリに生成される。このディレクトリをusername.github.ioにプッシュすることで、GitHub Pagesが更新される。 hugoで作成したblogディレクトリをリモートのblog/リポジトリに紐付け、public/ディレクトリをusername.github.ioリポジトリに紐付ける。

$ cd ~/workspace/blog
$ git remote add origin https://github.com/mshr-h/blog
$ git submodule add -b master https://github.com/mshr-h/mshr-h.github.io public

この時点で各リポジトリとディレクトリの対応関係は以下の通り。

~/workspace/blog/ <-> https://github.com/mshr-h/blog
            +-public <-> github.com/mshr-h/mshr-h.github.io
            +-themes/hugo-theme-cleanwhite/ <-> https://github.com/zhaohuabing/hugo-theme-cleanwhite.git

Clean Whiteテーマにはデプロイスクリプトdeploy.shが用意されているので、これ使ってデプロイする。

$ cd ~/workspace/blog
$ ./deploy.sh

独自ドメイン設定

独自ドメインを使う場合、username.github.ioリポジトリとDNSレコードの設定が必要。

username.github.ioリポジトリの設定タブからGitHub PagesのCustom domainに独自ドメインを指定する。

DNSのAレコードに以下を追加する。

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

詳細はここを参照する。

記事を追加

新しい記事を作成し、デプロイする。

$ hugo new post/2020-04-01-article-title.md
$ vim content/post/2020-04-01-article-title.md
$ ./deploy.sh

Clean Whiteテーマ特有の設定

Clearn Whiteテーマはデフォルトで中華フォントのため、日本語フォントを使うためにはCustom CSSでフォントを指定する必要がある。

static/css/custom-font.cssに以下の内容を保存する。

body, h1, h2, h3, h4, h5, h6, .navbar-custom { 
    font-family: Helvetica,"Sawarabi Gothic",Meiryo,"メイリオ","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",YuGothic,"游ゴシック",Arial,sans-serif; 
}

config.tomlにすでにcustom_cssに関して記載があるため、以下に書き換える。

custom_css = ["css/custom-font.css"]

これでブログの設定完了。