Scully とは

Scully（スカリー）は Angular 用の静的サイトジェネレーターです。同様のものには Gatsby や Gridsome などがあります。

Scully を利用することでページをプリレンダしたり、Markdown ファイルからブログを作成したりできます。

Angular Universal との違い

Scully は内部で Puppeteer を利用して静的ページを生成しています。Angular Universal のような SSR ではなくブラウザで実行した結果をそのまま使っているため isPlatformServer() で処理を分岐させる必要がなく、気軽に Angular アプリケーションにプリレンダリングを導入できるのが利点です。

導入

ng new で新規アプリケーションを作成します。

Copyng new my-app --routing

ng add で Scully を追加します。

Copyng add @scullyio/init

ng generate でブログ用のファイルを追加します

Copyng g @scullyio/init:blog

設定

デフォルトではシンタックスハイライトが含まれないため追加しておきましょう。

Copyimport { ScullyConfig, setPluginConfig } from '@scullyio/scully';

setPluginConfig('md', { enableSyntaxHighlighting: true });

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: 'my-app',
  outDir: './dist/static',
  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      slug: {
        folder: './blog',
      },
    },
  },
  defaultPostRenderers: ['seoHrefOptimise'],
};

seoHrefOptimise は Scully がプリレンダする HTML 内のリンク URL に末尾スラッシュ / を追加するプラグインです。SEO 対策に必要です。

開発

Scully を用いたブログの開発では

• Angular アプリケーションの更新
• 記事の更新

の二つを同時に動かす必要があります。

ng serve の代わりに ng build の watch モードを使うのをお勧めします。

Copynpm run build -- --watch

そして別ターミナルで Scully を watch モードで起動します。

Copynpm run scully -- --watch

この状態で http://localhost:1668 を開くと開発中のアプリケーションを静的ファイルが生成された状態で見ることができます。

現在は自動リロード機能に不具合があるため、変更を反映するには手動でリロードする必要があります。

ビルド

記事を公開する準備ができたら Markdown ファイルのメタ情報に published: true を追加しましょう。

Copy---
title: blog
description: sample
published: true
---

アプリケーションをビルドしましょう。

Copynpm run build -- --prod
npm run scully

デプロイ

Netlify や Firebase Hosting などを使ってブログをデプロイしてみましょう。

Scully を使う場合は ng deploy が使えないことに注意してください（ng build --prod 実行後すぐにデプロイされてしまうため）。また、History API を使ったルーティングの際に必要な URL リライトの設定は必要ありません。

まとめ

Scully の登場で Angular を使って JAMstack なブログを作ることも簡単になったと思います。今はまだアルファ版ですが今後の発展が楽しみです。