Create a blog site using Scully (SSG for Angular)

When we using SSG to create site, many people are choosing React or Vue, not Angular.

But now, we can convert an Angular SPA to SSG website using Scully.io.

Setup

Scully is an addon of Angular.
We need to create an Angular SPA before install it.

$ npx -p @angular/cli ng new my-scully-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ https://lesscss.org                                             ] 
  Stylus [ https://stylus-lang.com                                         ]

After that, we can install Scully from ng add command.

$ npx ng add @scullyio/init

Create a blog page

After the init Scully, we can setup a blog feature.

$ npx ng generate @scullyio/init:blog
$ npx ng generate @scullyio/init:markdown
? What name do you want to use for the module? blog
? What slug do you want for the markdown file? id
? Where do you want to store your markdown files? 
? Under which route do you want your files to be requested? 
    ✅️ Update scully.scully-app.config.js
UPDATE scully.scully-app.config.js (321 bytes)
UPDATE src/app/app-routing.module.ts (428 bytes)
UPDATE src/app/blog/blog-routing.module.ts (426 bytes)
UPDATE src/app/blog/blog.component.css (138 bytes)
UPDATE src/app/blog/blog.component.html (160 bytes)
UPDATE src/app/blog/blog.component.spec.ts (639 bytes)
UPDATE src/app/blog/blog.component.ts (508 bytes)
UPDATE src/app/blog/blog.module.ts (391 bytes)

That’s a diff of the installation of Scully.

 % git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   package-lock.json
        modified:   package.json
        modified:   src/app/app-routing.module.ts
        modified:   src/app/app.module.ts
        modified:   src/polyfills.ts

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        blog/
        scully.scully-app.config.js
        src/app/blog/

Scully is a SSG tool for Angular, but the application structure is almost in Angular way, I think.

Add a blog post

We can write a blog post using Markdown.

ng g @scullyio/init:post --name="Helloworld"
? What's the target folder for this post? blog
    ✅️ Blog ./blog/helloworld.md file created
CREATE blog/helloworld.md (87 bytes)

That’s a example posts.

---
title: Helloworld
description: blog description
published: false
slugs:
    - hello-world
---

# Helloworld

If we change publish attribute from false to true, the post will be published.

And we can set a multiple slug.

Build a Static Site

Finally, we can execute a Scully SSG.

We have to build the Angular application before execute Scully command.

 % yarn build && yarn scully
yarn run v1.21.1
$ scully
/Users/sandbox/scully-app /Users/sandbox/scully-app
 ☺   new Angular build imported
 ☺   Started servers in background
Finding all routes in application.

----------------------------------
Using stored unhandled routes!.
   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
----------------------------------
Pull in data to create additional routes.
Finding files in folder "/Users/sandbox/scully-app/blog"
Route list created in files:
  "/Users/sandbox/scully-app/src/assets/scully-routes.json",
  "/Users/sandbox/scully-app/dist/static/assets/scully-routes.json",
  "/Users/sandbox/scully-app/dist/scully-app/assets/scully-routes.json"

Route "/blog/hello-world" rendered into file: "/Users/sandbox/scully-app/dist/static/blog/hello-world/index.html"
Route "/blog/helloworld" rendered into file: "/Users/sandbox/scully-app/dist/static/blog/helloworld/index.html"
Route "/blog/___UNPUBLISHED___ka0ntqgd_OYqkHri6mFRPSq5Ta5BwRFgQYlmJIZct" rendered into file: "/Users/sandbox/scully-app/dist/static/blog/___UNPUBLISHED___ka0ntqgd_OYqkHri6mFRPSq5Ta5BwRFgQYlmJIZct/index.html"
Route "/" rendered into file: "/Users/sandbox/scully-app/dist/static/index.html"
send reload

Generating took 3.6 seconds for 3 pages:
  That is 0.84 pages per second,
  or 1201 milliseconds for each page.
  
  Finding routes in the angular app took 0 milliseconds
  Pulling in route-data took 7 milliseconds
  Rendering the pages took 817 milliseconds


✨  Done in 9.53s.

The generated site is in dist/staic folder.

 % tree -L 2 dist/static
dist/static
├── 404.html
├── assets
│   └── scully-routes.json
├── blog
│   ├── ___UNPUBLISHED___ka0ntqgd_OYqkHri6mFRPSq5Ta5BwRFgQYlmJIZct
│   ├── hello-world
│   └── helloworld
├── blog-blog-module-es2015.js
├── blog-blog-module-es2015.js.map
├── blog-blog-module-es5.js
├── blog-blog-module-es5.js.map
├── favicon.ico
├── index.html
├── main-es2015.js
├── main-es2015.js.map
├── main-es5.js
├── main-es5.js.map
├── polyfills-es2015.js
├── polyfills-es2015.js.map
├── polyfills-es5.js
├── polyfills-es5.js.map
├── runtime-es2015.js
├── runtime-es2015.js.map
├── runtime-es5.js
├── runtime-es5.js.map
├── styles-es2015.js
├── styles-es2015.js.map
├── styles-es5.js
├── styles-es5.js.map
├── vendor-es2015.js
├── vendor-es2015.js.map
├── vendor-es5.js
└── vendor-es5.js.map

Conclusion

Scully is a new SSG tools for Angular.

We can convert own Angular application to Static website.