前からGODofMEGANE.github.ioでブログっぽいことをしようと思ってましたが、最近godofmegane.comドメインを買ったのでブログ作ってみました
Github pagesとGoogle Domainsの設定
まずはGithubで空リポジトリを作成し、pagesの設定を行います
この画面でNoneと書かれている場面を設定したいブランチにしてディレクトリを選べば簡単にホームページが作れます
確認のために適当にhtmlファイルを作ってpushしてみるといいと思います
リポジトリ名が ユーザー名.github.io なら
ユーザー名.github.io
それ以外なら
ユーザー名.github.io/リポジトリ名
でアクセスできます
次にGoogle DomainsのリンクとGithub pagesを紐づけます
DNSの設定からカスタムレコードを作成します
タイプはCNAMEにしましょう
CNAMEの場合ホスト名を決める必要があるので、wwwとかにすると良いと思います
データにはgithub pagesのURLを入力しておきます
ここまで設定したらまたgithub pagesの設定画面へ戻りましょう
Custom domainの欄にGoogle Domainsで取得したドメインを入力し、Saveをクリックします
少し待てばGoogle Domainsで取得したドメインにアクセスするとgithub pagesが見られるようになるはずです!
次にHugoを用いてブログを作っていきます
Hugoのインストール
今回はWindowsでインストールを行います
まず本体をこちらからダウンロードします
Windowsを使用していて64bit版なら
hugo_0.96.0_Windows-64bit.zip
をダウンロードして解凍しましょう
出てきた実行ファイルにはPATHを通しておきましょう
envと検索し、環境変数を編集を開きます
そうしたら上の通り
- ユーザー環境変数のPathを選択
- 編集(E)…をクリック
- 新規(N)…をクリック
- hugoの実行ファイルがあるフォルダを入力
を行いましょう
実行ファイル自体ではなくて、実行ファイルのあるフォルダなので注意してください
最後にOKを押して閉じましょう
ここまで終わったらPowerShellを開き
hugo
と入力してみましょう
上記のような結果になればOKです
用語 ‘hugo’ は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。
と表示された場合、PATHを通せていないのでもう一度やり直してみてください
正常にPATHが通せたら先ほどgithub pagesの設定を行ったリポジトリをcloneしましょう
cloneしたらそのディレクトリ内部でPowerShellで以下のコマンドを入力しましょう
hugo new site サイト名
サイト名の部分は各自で好きな名前にしてください
これでhugoの準備は完了です
Hugoのテーマを決める
Hugoではテーマというものがあり、他の人が作成したテーマを適用することで簡単にカッコいいブログを作ることができます
こちらから好みのテーマを探してみましょう
このブログではrobustというテーマを使わせてもらっています
スマホでの見た目がカッコいくてお気に入りです!
テーマを決めたら以下のコマンドを入力しましょう
cd themes
git submodule add テーマのGithubのURL
これだけでテーマを適用させることができます
hugo server
と入力した後に http://localhost:1313/ にアクセスすれば確認ができます
ちなみにgithub pagesをただcloneしただけだとテーマがcloneされず以下のようなエラーを吐かれます
found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
その場合は以下のコマンドを追加で入力しましょう
git submodule update --init --recursive
これによりテーマもcloneすることができます
次に設定ファイル config.toml を書き換えます
Hugoの設定を行う
Hugoでは config.toml を書き換えることで色々な設定が行えます
自分の設定を以下に置いておきます
baseURL = 'http://godofmegane.github.io/'
canonifyurls = true
publishDir = "docs"
languageCode = 'ja'
DefaultContentLanguage = 'ja'
title = "GODofMEGANE's Blog"
theme = 'hugo_theme_robust'
googleAnalytics = 'UA-225430593-1'
disqusShortname = 'www-godofmegane-com'
enableGitInfo = true
[Params]
enableHighlight = false
description = "音ゲー大好きメガネの神様のブログ"
dateformat = "2006/01/02"
[params.author]
name = "GODofMEGANE"
twitter = "https://twitter.com/god_of_megane"
github = "https://github.com/GODofMEGANE"
[taxonomies]
tag = 'tags'
category = 'categories'
重要そうなやつを解説していきます
baseURLにはgithub pagesのURLを設定しましょう(もしかしたらGoogle Domainsの方でも動くかも)
publishDirはhugoコマンドを使用した場合の出力先を設定できます
ここで選んだディレクトリをgithub pagesのほうで設定しておきましょう
themeにはthemesディレクトリ直下のフォルダ名を書いておくことでそのテーマを適用できます
dateformatはよく見ない指定の仕方ですが、このようにGoで使われているフォーマットのようです、YYYY/MM/DDの場合2006/01/02と指定すればOKです
taxonomiesではtag、category、archiveなどを指定でき、それぞれtag=“tags”、category=“categories”、archive=“archives"とすることで各種機能を利用可能になります
tagでは記事にタグをつけることができるようになり、tagで記事の絞り込みができます
categoryは記事をカテゴリ毎に分別できるようになります
archiveでは記事の更新日時によって絞り込みを行えるようにできます
記事の作成
いよいよ記事を作成していきましょう
hugo new posts/記事の名前.md
で記事を作成できます
Tip:この際に生成される記事のテンプレートはarchetypes/default.mdで変更できます
記事はMarkdownで書くことができます
途中で画像を載せたい場合は static/ のどこかに画像を配置すれば使えます
記事を書き終えたら冒頭部分の
draft = true
を false に変更しましょう
これを行わないと下書き扱いになり記事が反映されません
また、githubにpushする前に
hugo
を実行し、ファイルを出力しておく必要があります
ここまでできたらpushしてみましょう、少し待つとgithub pagesに反映されるはずです
hugo newの効率化
今のままでも記事は作成できますが、記事のファイル名が被らないようにする必要があったり、ファイル名に日本語を使用するとURLに日本語が表示されてしまったりと少し不便です
そこでpowershellで利用可能なスクリプトを作成しました、以下にスクリプト全文を載せます
Param([parameter(mandatory=$true)][String]$slug)
$time = Get-Date -UFormat "%Y%m%d-%H%M%S"
hugo new posts/$($slug)_$($time).md
$file_contents = Get-Content ./content/posts/$($slug)_$($time).md -Encoding utf8 | % { $_ -creplace "title: ""$($slug)_$($time)""", "title: ""$($slug)"""}
Write-Output $file_contents | Out-File ./content/posts/$($slug)_$($time).md -Encoding UTF8
New-Item ./static/images/$($slug)_$($time) -ItemType Directory
Start-Process -FilePath ./content/posts/$($slug)_$($time).md
start 'C:\Program Files\Google\Chrome\Application\chrome.exe' 'http://localhost:1313/'
hugo server
またこれに合わせarchetypes/default.mdを以下のように変更しました
---
title: "{{ .Name }}"
slug: {{ .Name }}
date: {{ .Date }}
tags: []
categories: ["未分類"]
draft: false
---
このスクリプトは
./new.ps1 記事名
のように使用することができ、その場合はファイル名とURLは 記事名_YYYYMMDD-HHMMSS.md となります
また、static/images 内に 記事名_YYYYMMDD-HHMMSS のフォルダが作られます
これが多分一番速いと思います