Jekyllでサイトをつくる

前々から、ポートフォリオやブログなど自分の活動をまとめたサイトを作りたいと思っていた。ブログに関していえば「はてなブログ」「tumblr」「note」「Medium」などあるが、それぞれプラットフォームごとに独自の色がある気がする（noteはデザインに強かったり、Mediumはよりステートメントを発信しているイメージなど）。それとフォロー/フォロワーの関係があると、それを気にしてしまう面もあったり。ポートフォリオに関しては、NotionのPrivateページを作って限定リンクを発行すれば一時的な紹介などでは事足りるが、見易さや見栄えを考えると劣る部分がある。

とにかくもっとプレーンな場所があると、思考回路も若干変わるかなと思ってサイトを構築することにした。

静的サイトジェネレータ

ポートフォリオやブログを書く場合、一般的に使われるのはCMSサービス（最も有名なのはWordpress）だろうが、最近は「静的サイトジェネレータ」を使うのが人気らしい。「静的サイト」とは、毎回同じページを表示するサイトとのことだ。近年は動的に異なったページを表示するサイトも多いため、わざわざ名前がついているのだと思う。このジェネレータを使うと、ローカルで記述したマークダウンをビルドすれば爆速でサイトに反映されるらしい。かつ、表示も高速。マークダウンで毎日メモをとっているので、これはめちゃくちゃにありがたい。構築に使われる言語使用などで、いくつか種類がある。詳細は以下のリンクなど参照。

Jekyll + Netlify

どのジェネレータも大差ないと感じたので、今回はテンプレのデザインと、安定性からJekyllを選択した。また、ホスティング先はNetlifyというサービスを用いた。これを使うことで、ドメインやHTTPSの設定が簡単にできる。

手順は基本的にはJekyillの公式ページ（日本語訳もあった）と、いくつかの個人ブログを参考に。開発環境構築は問題なかったが、特にテーマ反映やレイアウト調整などは、あまり仕様を理解していないせいもあって結構ハマった。HTMLやCSSをそのまま書くわけではなく、sassなどを用いているので、Webの知識がそこまでない自分としてはかなり手探り。いい加減、ejsなども活用してページを作るべきかもしれない。以下のサイトを参考にした。

Netlifyでブログをデプロイ
 Jekyllのテーマ設定を試してみよう
 Jekyll 環境の構築
 【Netlify】カスタムドメインを設定する
 Netlifyで独自ドメインを設定する
 Jekyll + Netlify + Cloudinary で高速なウェブサイトを無料で公開する

フォントと画像

デフォルトのフォントが好みではなかったので、いくつかのサイトを参考にしながら設定した。元々はすべての書体がセリフ体だったが、なんとなくフォーマルすぎるのでタイトルやh1まわりはサンセリフにすることにして、FiraCodeに落ち着いた。セリフ書体はGeorgiaに。特にこだわりはないのでまたすぐ変えるかもしれない。色々なサイトのフォントを参考にする際に、Chrome拡張のWhatFontがとても便利だった。

と、ここまで書いて、なんとなく文字だけの記事も寂しいなと思ったので、画像を入れたいと思った。こういう時に便利なのが高画質フリー画像を提供しているUnsplash。普段からスライドなどをいい感じにする際に使っているのだけど、基本はDLして使っていた。ただ、Web上にあるものをざわざDLしてまた配置するのもな、と思ったので調べてみると、やはりAPI的に使えるらしい。めちゃくちゃ簡単で、以下のようにIDを指定して埋め込める。

<!-- https://source.unsplash.com/{PHOTO ID}/{WIDTHxHEIGHT} -->
<img src="https://source.unsplash.com/WLUHO9A_xik/1600x900">

しかも特定の写真を呼び出せるだけでなく、コレクションだったり、特定のユーザー（写真家）のものからランダムに表示させることができるとのこと。もちろん完全にランダムも可能。すごい。思わず何度もリロードしてしまった。

＊＊＊

こんな感じでひとまずの体裁は整った。レイアウトや細かい部分は全く調整できていないので、徐々に進めていこうと思う。気軽に書ける場所にしていきたい。