Scullyを使ってブログを作ってみた

もともとこのサイトは自分のポートフォリオと、外部のサイトで書いた記事だけを並べようと思っていたのですが、もっと雑に書きたい・書ける場所がほしいということで、挑戦です。

Scully とは

↑ scully.io
Angular製の静的サイトジェネレーターです。Markdown を書くだけでブログになっちゃう機能があってこれを使います。
あまり深く調べてませんが、たぶん他のフレームワークにもこういうのがあると思います。

まずはAngular v11 にアップデートする

元々の Angular のバージョンが 10 だったので、まずはアップデートをすることにしました。

ng update @angular/core @angular/cli

とするだけで完了します。お手軽ですね。

さっそくインストールで躓く

続いて Scully のインストールです。

ng add @scullyio/init

とすれば基本的な Scully の環境がセットアップできると思っていたのですが、 M1 Mac を使っていたのでハマりました。

The chromium binary is not available for arm64 と出ており、Chromium のインストールに失敗してコケていたようです。
すでに Mac には GoogleChrome が入っているため、Puppeteer インストール時に Chrome のインストールをスキップする技

export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

で対応。インストールは一通り成功しました。

ただし、Puppeteer がまだ M1 Mac には対応しておらず、インストールされている Chrome を起動できませんでした。
この記事 の 3番目 の対応策「puppeter 5.5.0時点ではまだM1 Macに対応していないのでパッチを手動であてる。」を使いました。

無事、Scullyのビルドができるようになりました。

あとはブログ用の仕組みを入れるだけ

https://scully.io/docs/learn/create-a-blog/overview/ の指示に従って実装していけばブログは完成です！
細かいところ(OGPだったり)を対応するために、自前でいくつかコードを実装しました。

• @angular/platform-browser の Meta
• @angular/platform-browser の Title

など。SSRではないので、雑にブラウザ用のコードを書いてなんとかなりました。

まとめ

とりあえずブログができたので、今後も雑にいろいろ書いていきたいです！