ポートフォリオサイトを作ろう。
某エンジニア友達の勧めにより、ポートフォリオサイトを作ることになった。
え？EZ5000やTRIGLAV Indexesはポートフォリオの分類に入らないの？という率直な疑問に対し、哲学のような問答が始まった。(なんとも説明し難い話だったので割愛)
要するに作った成果物だけでなく、それらを作った経緯がわかるように記事を残せるといいよねという話。ごもっともである。
ブログサイトを作るにあたり、静的サイトジェネレータHugoを使用することにした。
markdown形式で記事を書き、コマンドひとつでhtmlを生成してくれる。
静的サイトなのでアクセスは爆速。さらにジェネレータ自体も速い。らしい。
WSLのインストール
手っ取り早くLinuxの環境を用意するため、Windows Subsystem for Linux (WSL)をインストールする。
以下の記事を参考にした。
実際にやったのは、機能の有効化とStoreからのUbuntu 18.04 LTSのインストールのみ。
インストール後のaptコマンドでのアップデートも忘れずに。
Hugoのインストール
以降はHugo公式のQuick Startを参考に環境を構築していく。
公式サイトではbrewでのインストールしか書いていなかったが、調べてみたらaptコマンドでもインストールは可能な模様。と思ったら互換性に影響するレベルでバージョンが古かった。
仕方ないのでGitHubから最新リリースのdebファイルを落としてきてインストール。
sudo apt install hugo_0.58.1_Linux-64bit.deb
新しいサイトを作る
コマンドを叩くだけ。特にこだわることもなくホームディレクトリにそのまま作成。
このサイトはnikki5という名前で作っている。
作成したら、中に移動してgitの初期処理を行う。.gitignoreファイルはgitignore.ioでVim, Hugo, Linuxを指定して作成。
cd
hugo new site nikki5
cd nikki5
git init
テーマを追加する
Hugo Themesからテーマを探す。
Blackburnに決めた。名前もかっこいいし文句なし。
gitコマンドでthemesディレクトリ内にサブモジュールとして追加する。
git submodule add https://github.com/yoshiharuyamashita/blackburn.git themes/blackburn
ついでに設定ファイル(config.toml)の編集。Blackburnのサンプルをおおよそコピペして、一部いらないところを削った。
出来上がった設定はこちら。
記事を作成する
最初の記事を作成する。コマンドでファイルを作るが、Quick Startではディレクトリ名がpostsになっていることに注意。
Blackburnではpostなので、postsに作っても見ることができない。
作成されたファイルを編集して記事を書く。
draft: trueは下書きの設定。falseにするか削除しないとデプロイ時にページが生成されない。
なお、画像を掲載する際はstaticディレクトリ以下に配置する。
hugo new post/my-first-post.md
vim post/my-first-post.md
サーバーを起動する
hugo serverコマンドでサーバーを起動する。-Dオプションでdraft(下書き)の記事もページ生成する。エラーが出ず起動に成功したら拍手。
hugo server -D
http://localhost:1313にアクセスすることでページを確認できる。ファイルの変更は即座に反映される。
ここまですんなりいったかのように書いているが、実際は何度もエラーを出したり記事が見えなかったり苦労していた。
デザインをアレンジする
テーマ標準のCSSが気に入らなかったため、自分でCSSを少し書いた。
Blackburnの設定にcustom_css = ["css/my.css"]とあるので、static/css/my.cssを作成。
変えたのは背景色とフォント、文字サイズ、文字色のみ。
実際に作ったファイルはこちら。
コミットしてGitHubにpushする
ブランチを分ける必要性も感じなかったのでmasterのみでやりくりする。
GitHubにリポジトリを作り、pushする。
本番サーバーにデプロイする
まずはHugoのインストール。開発環境と同様なので割愛。
インストールが済んだら、所定のディレクトリでgit cloneする。root権限が必要なのでsudo付き。
cloneが完了したら、中に移動してhugoコマンドを実行しページを生成。
sudo git clone https://github.com/Candle5000/nikki5.git
cd nikki5
sudo hugo
publicディレクトリにファイルが生成されていることを確認したら、このpublicをドキュメントルートとしてWebサーバーの設定にサイトを追加する。
以降、記事を追加・更新した場合は、pullしてhugoだけ。
sudo git pull
sudo hugo
感想
休日を丸一日使ってこの程度だった。休日がまるごと使えると思うとなんでもできそうな無敵感があるが、一日でできることの限界ってこんなもんだよね。ただ最低限に環境構築するのではなく、実際にサイトを公開する前提で設定も書いていくのでやはり時間がかかる。
記事の執筆にも相当時間がかかっている。文章量が多いのもあるが、実際にやった手順を記憶から辿って文字に起こすのはなかなか大変。記事の材料になるメモを残しながら作業するとまだ楽かもしれない。コーディングだったらコミット履歴を見るという手もある。
markdown自体にまだ慣れていない状態からだったが、記事を書いているうちにだんだん慣れてきた。Hugo自体かなり便利に感じているので、今後は技術ジャンルだけでなく普通に日記としても記事を書いていきたい。
あとは、https対応とか、コメントできるようにするとか、最終更新日表示とか、デプロイ自動化とか、やりたいことをリストに書き起こそう。