BlogをNanocで改装した

おひさしぶりです。Nakayaです。Blogを引っ越してもう1年が経とうとしていますね……。 後で書くのですが、Hugoに納得できなくなって、GatsbyJSで改装して、またNanocで改装してと転々していたりでBlogの構築自体が面倒になって放置してしまいました。 加えて、TwitterやPleroma、Misskeyなので短文を書くことに慣れ、長文を書くことに面倒臭さを感じていたのもあります。 少なくともBlogからエタっていた間に世間は随分変容してしまったようで、私自身も前からずっと引きこもりみたいな生活をしていたのに、さらに家に出なくなってしまいました。 今回はブログをNanocで改装したのでそれに至るまでの話をしようと思います。少しばかりお付き合いください。

GatsbyJSへ一旦の移行

去年の8、9月にHugoへの不満が高まり、HugoからGatsbyJSに移行しようと決断しました。GatsbyJSを選んだのには、

  • Asciidocが使える

  • jsxでテンプレートが自由自在に組める

  • GraphQLから幅広いファイルの情報が選られる

  • 日本語文献が多い

が大きかったです。結構すんなり組めはしたのですが、インラインCSSがバリバリ施されたStarterを見て、外装を替えようという気持ちが薄れてしまいました。 また、小さいパッケージが多く依存関係が毛糸の球も顔負けのぐちゃぐちゃさで、1つのパッケージにセキュリティ上の脆弱性が見つかるとドミノ倒しのようにその影響を受け、パッケージを更新しなければならないという、 npmの文化が面倒に感じてしまったこともあります。 ところでDeno v1.0.0リリースされましたね。v0.40.0くらいと最近の頃からではありますが、ちょっと追っ掛けてたのでWebエンジニア界隈に一石を投じられていることに感動しました。 この勢いでnpmを滅ぼしてくれ……。

他にAsciidocが使える静的サイトジェネレータはないか？

他にAsciidocが使える静的サイトジェネレータはないか？と思ってStaticGenを漁っていると、 BlogからLPまでなんでも組めちゃうかなり自由度が高いRuby製静的サイトジェネレータだそうで。これしかないと思いNanocで組んでみようと決断しました。

難しかった部分

一番はNanocに関する文書、ブログ記事が少ないことでした。今Nanocはバージョンが4なのですが、以前のバージョン3に関する5、6年前の記事が出てきて 日本語文献はそのバージョンのものが多く、ほとんどの情報が今はもう通用しない情報でした。

学べた部分

今回、CSSフレームワークにはMilligramを採用しました。これはBulmaと比べるとかなり軽量なフレームワークでTypographyや引用、containerくらいしか実装していません。 Bulmaばかり使っていたものの、HTMLの構造が複雑化するBulmaが嫌になり、対極的なMilligramを採用することにしました。 MIlligramのそのシンプルさからレスポンシブ対応を自分で実装することになりましたがこれがかえっていい勉強になりました。 レスポンシブ対応にはCSS メディアクエリを用いるらしいとのことですが初耳でした。 まだうまく行ってない部分もあるので不具合もあるかとは思いますが、スマホ、タブレット、PCでちょっとフォントサイズが違っていると思います。 またSEO対策でbreadcrumbなどをSchema.orgとにらめっこしながら書いてみました。ちょっとはGoogleで上位になると思います。

まだやり残していること

Webmentionについては近々別の記事で語りますが、記事の終わりのあたりにWebmentionによって得られたリアクションをDISQUSのiframeみたくくっつけたいです。これは別リポジトリでElmによって書かれるかもしれません。 レスポンシブ対応もまだ中途半端です。breadcrumbが環境によっては途中で改行されていたりしていると思います。これを改行させるのではなく横スワイプにしたかったり。

さいごに

実はこのブログのデザインはMediumを意識しています。どこかで「サイドバーはないほうがいい」と聞いていたのとMediumのデザインが好きなので。 素人なので8割ショボくなったMediumもどき以下になりましたが……。 この記事は原稿をWorkflowyで書いているのですがアウトライナーっていいですね。短時間で原稿を書いたわりにはそこそこの量を書けました。Workflowyまた使おうと思います。