A blog is a great place to share the inside scoop on your new features with your users or bring new eyes to your site with interesting content. Scully, the Angular Static Site Generator, makes it easier to create a blog using Markdown and the Angular framework we’re familiar with. We’ll dig into this process today when we:

• integrate Scully into an existing Angular application
• generate a blog skeleton
• create content in Markdown
• pre-render all of the content as we go with Scully
• deploy to the Netlify Edge CDN (Content Delivery Network)

Here is a screenshot of the final project.

You can find the project at https://angular-jamstack-blog.netlify.app/ and all the code in the 🐙 project repo here. Now, let’s get coding!

The Starting Gate

To begin, we’ll take a project that was created using the Angular CLI with a generated navigation module and home module. The navigation has a header for the title of the site plus a home and blog link. The home page is a quick little info page. You can see what we’re starting with in 🐙 this commit.

If you’re working with a cloned version of the project (by running git clone https://github.com/tzmanics/angular-jamstack-blog in your terminal) you’ll want to remove my GitHub repo as origin and set your own with these commands:

git remote rm origin
git remote add origin <url for your repo>

📖 Here’s more information on working with Git remote.

This will help you keep track of all the changes you push and help with creating continuous deployment with Netlify (which we’ll cover in the last step).

Scully is Out There; Let’s Put it in Here

Now that we’re set up, we can incorporate Scully by running the Angular CLI’s ng add command and passing in the Scully library’s init command.

ng add @scullyio/init

Once installed we can run [ng build](https://angular.io/cli/build) and npm run scully to build out the project and have Scully traverse the build project to find all the routes to pre-render.

ng build
npm run scully

🤔 We always want to build out the project before running Scully if there are any changes. Scully always looks at the build output to get its information.

Running Scully creates a new build output folder called static that contains the pre-rendered content in a directory for each route. To see what the pre-rendered content looks like we can use Scully’s serve command.

npm run scully serve

When we create new routes (like we will do with each new blog post) we’ll have to add a --scanRoutes option to the npm run scully command. To save our keystrokes let’s make a new script in our package.json file.

{
  "name": "angular-jamstack-blog",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "scully": "scully",
    "scully:serve": "scully serve",
+    "jam-it": "ng build && npm run scully -- --scanRoutes && npm run scully serve"
  }

This jam-it script will run the build, run Scully with the scanRoutes option to look for new routes, and run the serve option so we can see the pre-rendered content at localhost:1668. If we look at the Sources tab in Developer Tools when we run npm run jam-it, we can see it’s serving the html file.

#angular #jamstack #scully