How I made my blog cheap to host, customizable, and lightning-fast. —Part 3

Part 1: Setting up — Azure DevOps and Our Headless CMS
Part 2: Building out our Angular Site
Part 3: Meet Scully, our Static Site Generator — you are here
Part 4: Hosting on the Cheap
Part 5: Build and Deploy with Azure DevOps

At this point, you have an Angular site that is rendering your blog posts from the Headless CMS. Now we're going to use Scully to make it into a static site. It'll still have some JavaScript, but it won't be a SPA. Each route will have a "physical" Html file, that does not need to be rendered at run time.

To do this we need to first add Scully to our project with this command:

ng add @scullyio/init

This will add a Scully config file to the root of your site. We'll modify it later, but for now, it will look something like this:

https://gist.github.com/milestonedev/c88bba9bb1b3a087f4492ac712558354

You'll also notice a folder called "scully" in the root of your site. We'll be using that later too. For now we can run two commands:

ng build --prod

npm run scully -- --scanRoutes

When we run we should get a couple of routes mapped. If you look closely though you'll see that no static files were created for our individual posts. This is because the route "/blog/:postSlug" has a route parameter in it, and Scully isn't sure what to do with that. So we need to tell it. We do that with a plugin.

Our Custom Plugin

Scully allows for a few types of plugin. The type we're going to use is called a router plugin. Scully already gives us a skeleton for a plugin in the "/scully/plugin.ts" file. We just need to modify it like so:

https://gist.github.com/milestonedev/6d9066b615a39132a69efadb9a4994db

What we're doing here is:

• Getting an auth token from Squidex
• using that auth token to get all of our posts
• assembling an array of the potential routes based on the slugs
• returning that array

Now we just have to let scully know to use this plugin for our blog post routes. We do that by going into the scully config and modifying the routes section. Like so:

https://gist.github.com/milestonedev/61666dd5dd6126864eee4c6150bdcdc4

Now when Scully tries to parse the route with the parameter in it, it will look to its config and see that it should use the plugin to get the possible values.

Go ahead and run Scully again with :

ng build --prod

npm run scully -- --scanRoutes

You should now have static pages for every blog post in your /dist folder!

The only problem is that we have to run the above commands every time we save a blog post. We'll fix that in Part 4!

< Part 2:Building out our Angular Site
Part 4: Hosting on the Cheap >