https://blog.eniehack.net/ Nakaya https://blog.eniehack.net/ Hugo gohugo.io 2020 eniehack. Assets and articles not otherwise specified are licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. Source code is licensed under by <a href="https://apache.org/licenses/LICENSE-2.0.txt">Apache-2.0</a>. 2024-03-16T09:04:42Z Nakaya https://eniehack.net https://blog.eniehack.net/articles/2020/05/21/rebuild-blog-by-nanoc/ 2021-01-30T15:36:05Z 2020-05-21T14:32:31Z <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>おひさしぶりです。Nakayaです。Blogを引っ越してもう1年が経とうとしていますね……。 後で書くのですが、Hugoに納得できなくなって、GatsbyJSで改装して、またNanocで改装してと転々していたりでBlogの構築自体が面倒になって放置してしまいました。 加えて、TwitterやPleroma、Misskeyなので短文を書くことに慣れ、長文を書くことに面倒臭さを感じていたのもあります。 少なくともBlogからエタっていた間に世間は随分変容してしまったようで、私自身も前からずっと引きこもりみたいな生活をしていたのに、さらに家に出なくなってしまいました。 今回はブログをNanocで改装したのでそれに至るまでの話をしようと思います。少しばかりお付き合いください。</p> </div> </div> </div> <div class="sect1"> <h2 id="replace-gatsbyjs-once">GatsbyJSへ一旦の移行</h2> <div class="sectionbody"> <div class="paragraph"> <p>去年の8、9月にHugoへの不満が高まり、HugoからGatsbyJSに移行しようと決断しました。GatsbyJSを選んだのには、</p> </div> <div class="ulist"> <ul> <li> <p>Asciidocが使える</p> </li> <li> <p>jsxでテンプレートが自由自在に組める</p> </li> <li> <p>GraphQLから幅広いファイルの情報が選られる</p> </li> <li> <p>日本語文献が多い</p> </li> </ul> </div> <div class="paragraph"> <p>が大きかったです。結構すんなり組めはしたのですが、インラインCSSがバリバリ施されたStarterを見て、外装を替えようという気持ちが薄れてしまいました。 また、小さいパッケージが多く依存関係が毛糸の球も顔負けのぐちゃぐちゃさで、1つのパッケージにセキュリティ上の脆弱性が見つかるとドミノ倒しのようにその影響を受け、パッケージを更新しなければならないという、 npmの文化が面倒に感じてしまったこともあります。 ところでDeno v1.0.0リリースされましたね。v0.40.0くらいと最近の頃からではありますが、ちょっと追っ掛けてたのでWebエンジニア界隈に一石を投じられていることに感動しました。 この勢いでnpmを滅ぼしてくれ……。</p> </div> </div> </div> <div class="sect1"> <h2 id="do-you-know-good-static-site-generator">他にAsciidocが使える静的サイトジェネレータはないか？</h2> <div class="sectionbody"> <div class="paragraph"> <p>他にAsciidocが使える静的サイトジェネレータはないか？と思って<a href="https://staticgen.com/">StaticGen</a>を漁っていると、 BlogからLPまでなんでも組めちゃうかなり自由度が高いRuby製静的サイトジェネレータだそうで。これしかないと思いNanocで組んでみようと決断しました。</p> </div> </div> </div> <div class="sect1"> <h2 id="difficult-part">難しかった部分</h2> <div class="sectionbody"> <div class="paragraph"> <p>一番はNanocに関する文書、ブログ記事が少ないことでした。今Nanocはバージョンが4なのですが、以前のバージョン3に関する5、6年前の記事が出てきて 日本語文献はそのバージョンのものが多く、ほとんどの情報が今はもう通用しない情報でした。</p> </div> </div> </div> <div class="sect1"> <h2 id="what-i-learned">学べた部分</h2> <div class="sectionbody"> <div class="paragraph"> <p>今回、CSSフレームワークには<a href="milligram.io/">Milligram</a>を採用しました。これはBulmaと比べるとかなり軽量なフレームワークでTypographyや引用、containerくらいしか実装していません。 Bulmaばかり使っていたものの、HTMLの構造が複雑化するBulmaが嫌になり、対極的なMilligramを採用することにしました。 MIlligramのそのシンプルさからレスポンシブ対応を自分で実装することになりましたがこれがかえっていい勉強になりました。 レスポンシブ対応にはCSS メディアクエリを用いるらしいとのことですが初耳でした。 まだうまく行ってない部分もあるので不具合もあるかとは思いますが、スマホ、タブレット、PCでちょっとフォントサイズが違っていると思います。 またSEO対策でbreadcrumbなどを<a href="https://schema.org">Schema.org</a>とにらめっこしながら書いてみました。ちょっとはGoogleで上位になると思います。</p> </div> </div> </div> <div class="sect1"> <h2 id="still-have-to-do">まだやり残していること</h2> <div class="sectionbody"> <div class="paragraph"> <p>Webmentionについては近々別の記事で語りますが、記事の終わりのあたりにWebmentionによって得られたリアクションをDISQUSのiframeみたくくっつけたいです。これは別リポジトリでElmによって書かれるかもしれません。 レスポンシブ対応もまだ中途半端です。breadcrumbが環境によっては途中で改行されていたりしていると思います。これを改行させるのではなく横スワイプにしたかったり。</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">さいごに</h2> <div class="sectionbody"> <div class="paragraph"> <p>実はこのブログのデザインはMediumを意識しています。どこかで「サイドバーはないほうがいい」と聞いていたのとMediumのデザインが好きなので。 素人なので8割ショボくなったMediumもどき以下になりましたが……。 この記事は原稿をWorkflowyで書いているのですがアウトライナーっていいですね。短時間で原稿を書いたわりにはそこそこの量を書けました。Workflowyまた使おうと思います。</p> </div> </div> </div>