Scullyのセットアップ手順[Angular]

はじめに

Angular製の静的サイトジェネレータ「Scully」を使ってJAMstackアーキテクチャで開発することになったので、その作業手順をメモ。(実施は2021年なので、ヴァージョン等古いです。。)

環境

Angular CLI: 9.1.10
Node: 10.21.0
OS: darwin x64

Angular: 9.1.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.10
@angular-devkit/build-angular     0.901.10
@angular-devkit/build-optimizer   0.901.10
@angular-devkit/build-webpack     0.901.10
@angular-devkit/core              9.1.10
@angular-devkit/schematics        9.1.10
@angular/cli                      9.1.10
@ngtools/webpack                  9.1.10
@schematics/angular               9.1.10
@schematics/update                0.901.10
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

セットアップ手順

まず、Angular CLIがなければ、インストール。

ここで、最新ヴァージョンのAngular10を入れたせいで後々詰まって、最初に手戻りました。。
このissueに書いてあるように、v9.1.6をインストールすれば上手くいきました。
https://github.com/scullyio/scully/issues/543

$ npm install -g @angular/cli@9.1.6

そして、Angularの新規プロジェクトを作成します。自分はmy-appというプロジェクト名に。
Scullyではルーターがアプリケーションに存在する必要があるので、routingはYesを選択。
stylesheetのフォーマットはSCSSを選択しました。

$ ng new my-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

そして、必要なライブラリを追加します。

$ cd my-app

$ ng add @scullyio/init

これでセットアップは完了

実行

$ ng build
$ npm run scully

以上、コマンドで実行して問題なく完了すれば、
dist/static/配下に静的ファイルが生成されているので、ファイルをホスティングすればOK。