この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
どうも！大阪オフィスの西村祐二です。
最近気になっていた、Angular製静的サイトジェネレータScullyを試してみたので、作業ログをブログにまとめておきます。
試してみた
環境
Angular CLI: 9.0.0-rc.9
Node: 12.13.0
OS: darwin x64
Angular: 9.0.0-rc.9
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.900.0-rc.9
@angular-devkit/build-angular 0.900.0-rc.9
@angular-devkit/build-optimizer 0.900.0-rc.9
@angular-devkit/build-webpack 0.900.0-rc.9
@angular-devkit/core 9.0.0-rc.9
@angular-devkit/schematics 9.0.0-rc.9
@angular/cdk 8.2.3
@angular/material 8.2.3
@ngtools/webpack 9.0.0-rc.9
@schematics/angular 9.0.0-rc.9
@schematics/update 0.900.0-rc.9
rxjs 6.5.4
typescript 3.6.4
webpack 4.41.2セットアップ
Angular CLIを使って雛形のアプリケーションを作成します。今回は適当に「scully-blog」という名前にしました。
※Scullyでは、ルーターがアプリケーションに存在する必要がありますのでご注意ください。
❯ npx -p @angular/cli@next ng new scully-blog --routing
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS必要なライブラリを追加します。
cd scully-blog
ng add @scullyio/initこれで、セットアップ完了です。簡単ですね。
ブログ用のルーティングなど設定する
これも、ngコマンドから実行できます。ルーティングなど自動的に設定されるのでとても簡単ですね。
❯ ng g @scullyio/init:blog
✅️ Update /scully.config.js
CREATE src/app/blog/blog-routing.module.ts (369 bytes)
CREATE src/app/blog/blog.component.css (157 bytes)
CREATE src/app/blog/blog.component.html (160 bytes)
CREATE src/app/blog/blog.component.spec.ts (639 bytes)
CREATE src/app/blog/blog.component.ts (508 bytes)
CREATE src/app/blog/blog.module.ts (393 bytes)
UPDATE scully.config.js (199 bytes)
UPDATE src/app/app-routing.module.ts (336 bytes)
✅️ Blog ./blog/2020-01-18-blog.md file created
CREATE blog/2020-01-18-blog.md (95 bytes)/blog/2020-01-18-blog.mdというファイルが生成されているようにMarkdownでブログなど書いていけます。
app.componentを修正する
不要なコードを削除しておきます。
src/app/app.componet.html
<router-outlet></router-outlet>ビルドする
土台の部分はできたのでビルドしてみます。
scullyコマンドを実行することによってdist/static/にファイルを生成してくれます。
ログよりAngularでビルドしたファイルを使ってサーバを立ち上げchromiumでクローリングしてファイルの生成しているみたいです。
❯ ng build
❯ npm run scully
> scully-blog@0.0.0 scully /Users/yuji/study/angular/scully/scully-blog
> scully
The option outDir isn't configured, using default folder "/Users/yuji/study/angular/scully/scully-blog/dist/static/".
Cleaned up /Users/yuji/study/angular/scully/scully-blog/dist/static/ folder.
☺ new Angular build imported
☺ Started servers in background
servers available
Finding all routes in application.
Pull in data to create additional routes.
Finding files in folder "/Users/yuji/study/angular/scully/scully-blog/blog"
Route list created in files:
src/assets/scully-routes.json
/Users/yuji/study/angular/scully/scully-blog/dist/static/assets/scully-routes.json
Route "/blog/2020-01-18-blog" rendered into file: "/Users/yuji/study/angular/scully/scully-blog/dist/static/blog/2020-01-18-blog/index.html"
Route list created in files:
src/assets/scully-routes.json
/Users/yuji/study/angular/scully/scully-blog/dist/static/assets/scully-routes.json
Generating took 4.43 seconds for 1 pages:
That is 0.23 pages per second,
or 4439 milliseconds for each page.動作確認
スクリプトコマンドにscully:serveが追加されていますので、それを使って動作確認してみます。
❯ npm run scully:serve
> scully-blog@0.0.0 scully:serve /Users/yuji/study/angular/scully/scully-blog
> scully serve
The option outDir isn't configured, using default folder "/Users/yuji/study/angular/scully/scully-blog/dist/static/".
starting static server
/Users/yuji/study/angular/scully/scully-blog undefined
Scully static server started on "http://localhost:1668/"
Angular distribution server started on "http://localhost:1864/"
☺ new Angular build imported
Scully static server started on "http://localhost:1668/"
Angular distribution server started on "http://localhost:1864/"ポート番号1668でScully、1864でAngularで生成したファイルをホスティングしているのでScullyの下記URLにアクセスしてみます。
http://localhost:1668/blog/2020-01-18-blog
するとMarkdownで記述されたコンテンツが表示されていることがわかります。
ちなみに、Angularのhttp://localhost:1864/blog/2020-01-18-blogだと下記のようなSorryという表示なるかとおもいます。
コンテンツを追加してみる
ngコマンドより、postとすることで対話形式で雛形ファイルを生成することができます。タイトルは適当に「scully-test」としました。
❯ ng g @scullyio/init:post
? What title do you want to use for the post? scully-test
? What's the target folder for this post? blog
✅️ Blog ./blog/scully-test.md file created
CREATE blog/scully-test.md (87 bytes)Markdownファイルの生成だけではなく、ルーティング用のファイルも更新されていました。
あとは、ng buildして、npm run scullyすることでファイルが更新されます。
ローカル実行して下記にアクセスして確認してみます。
http://localhost:1668/blog/scully-test
サイトを公開する際は今まで通りの方法でAmplify Consoleやnetlifyなどでdist/static/配下のファイルをホスティングすればOKです。
さいごに
Angular製静的サイトジェネレータのScullyを試してみました。
gatsbyのようにプラグインはまだ充実していませんが、とても可能性を感じるものでした。
これからウォッチしていきたいと思います。また、プラグインなど自分で作ってみるのも面白そうです。
誰かの参考になれば幸いです。
参考サイト
https://medium.com/angular-in-depth/scully-the-static-site-generator-for-angular-d0608cb028ae