Netlify+Hugo環境に移行しました

以前は Github-Pages+Jekyll 環境でブログっぽいものを作っていたのですが、もう少しポートフォリオサイトらしく・かつシンプルにリニューアルを計画し、Golangの勉強も兼ねて Hugo を採用する事にしました。

Windows環境下で編集出来るようセットアップしたので、その記録を残しておきます


WindowsにHugoをインストール

Hugoのインストールはバイナリをダウンロードして配置、パスを通すだけ

Releases・gohugoio/hugo・Github
ここから最新版のWindows向けをダウンロードする

C:\Hugo 以下に Sitesbin のフォルダを作成

bin 以下にダウンロードしてきたバイナリを配置

環境変数のPATHに C:\Hugo\bin を追加しておしまい。

$ setx PATH "PATH=%PATH%;C:\Hugo\bin"

インストール確認でHugoのバージョンチェック

$ hugo version

Githubリポジトリの準備

好きな名前でHugo用リポジトリを作成する

リポジトリを作ったら clone するために適当なファイルを作って一度 commit するのですが面倒くさいので、そのままブラウザ上からREADMEファイル作って保存

中身はなんでも良いので、そのままページ下部の Commit new file して終了


Windows環境下にcloneする

ちゃんとコマンドライン使っても勿論良いのですが
Windows の Github-Desktop が楽で気に入ってるのでGithub-Desktop のキャプチャ載せておく


Hugoでサイト・記事を作る

hugo site new SITENAME すると、新しくフォルダが作られてしまい階層が深くなっていやなので、現在ディレクトリに直接作成したい

新しくディレクトリを作成しない場合や既にファイルが存在する場合はエラー吐くので --force フラグをつけて、エラー回避する

$ hugo new site . --force

とりあえず最初の記事を書いてみる

hugo new PATH/TITLE.md のコマンドを叩く事で
content/PATH フォルダの中に TITLE.md が作成される

$ hugo new posts/first-post.md

毎回ファイル名をつけてコマンド打つのが面倒なのでバッチファイル化する

content/posts 以下に 記事ファイルが大量に入ることを考えると日付でソート出来るようにしたい
年月日で階層化しても良いが、とりあえず今回はファイル名に YYYY-MM-DD_TITLE.md と年月日を入れることで整理する方針にした

となると毎回日付を打ち込むのが面倒くさいので、簡単なバッチファイルを書いた

[new.bat]

@echo off
set Y=%DATE:~0,4%
set M=%DATE:~5,2%
set D=%DATE:~8,2%

if "%1" == "" (
  set TITLE=untitled
) else (
  set TITLE=%1
)
hugo new posts/%Y%-%M%-%D%_%TITLE%.md

これで、このディレクトリ内で new を叩くだけで記事を作ってくれるように


Netlifyでホスティングする

Github-Pagesでホスティングしようとして何日も進まずイライラしてたのだけど、Netlifyでホスティングを試みたら5分で終了しました。
Netlifyは神ですね

ログインして最初のページで New site from Git を押下する

するとリポジトリの選択画面が出るので、今回作ったリポジトリを選択する

設定を入れるところが出るので、適切に入力する
今回の場合 public を生成してくれる hugo コマンドと、生成されたHTMLのディレクトリ public を指定

終わり
Netlifyは神ですね

あとは、同画面で指定したブランチ (master) に push/merge されたらビルドコマンドを走らせてくれるようです

公開されるURLを変更する

デフォルトで割当られるURLが適当なので、好きな名前に変更する

Site settings を押下し

Change site name を押下し

好きな名前を入力するだけ


baseURLの設定

CSSの取得URLが config.tomlbaseURL を基準に作られているので、環境に応じて適切な baseURL を設定してあげないといけない

baseURL = "https://masaquid.netlify.com"

Netlify なら Netlify の、独自ドメインなら独自ドメインのbaseURLに修正して commit する


独自ドメインの設定

Netlify+CloudFlare校正で独自ドメイン化・Https化したのでメモしておいた

Hugo+Netlify+CloudFlareで独自ドメインのhttps化