We'll be building a blog site with the Angular framework, Scully for static site generation(SSG) and then deploying the project on Netlify so that it can be accessible to the public. What this article covers Using Angular to build the blog architecture Installing Scully library to handle static site Generation Netlify deployment Demo of this project Repository for the demo Setup requirements We'll be using the following tools for this project Angular v13 Tailwind Scully Node v14.15 (or higher) is an application design framework and development platform for creating efficient and sophisticated single-page apps. It's an opensource frontend framework built by Google. Angular is a library used for generating static sites built with Angular and ushers you into the jamstack. SSGs generate static pages when you build your project so that what you publish/deploy is the already built pages which can be indexed by google(for some of that SEO good good) and served quickly to clients. Without scully, our angular project will go through client side rendering where each page of the application that is visited is rendered by the browser at runtime. Scully is a CSS utility library that is used to speed up the styling of applications by offering flexibility and conciseness. Tailwind Now that we have some background on the project, we can start building. Generating the Angular project Use the command below to generate a new angular project. You can name your project what you like. I have chosen angular-blog ng new angular-blog You'll see the following questions. We want routing and SCSS stylesheet format. ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS After the project has been generated, serve the application using the ng serve command ng serve You'll be greeted with the standard angular welcome template. Navigate to and delete the entire content (we don't want that welcome page showing up) and then place tags since this is where all our modules and components will be displayed based on the route configuration in app.component.html <router-outlet></router-outlet> app.routing-module.ts Installing Scully Run the command below to install scully and automatically make all the necessary configurations to the project ng add @scullyio/init During the installation, you'll get the question below. As at the time of this writing, is the most stable renderer so we'll choose that. pupeteer ? Which route renderer would you like to use? Scully platform server > Puppeteer Playwright (beta) Here is what the terminal looks like after the installation process The schematic of the scully installation made a couple of changes which include; init installing the pupeteer plugin updating the by importing the app.module.ts ScullyLibModule updating the package.json file with scully commands for building and serving the generated pages "scully": "npx scully --", "scully:serve": "npx scully serve --" created a file which is the scully configuration file. scully.angular-blog.config.ts Adding Blog Support to Our Project Scully has a schematic for creating the blog section for our project ng generate @scullyio/init:blog This adds a lazy-loaded blog module's routes to the Angular application( ) and creates a folder for the blog's markdown files(where our blog posts will live). Below is the current route configuration in updated by scully. app.routing-module.ts ./blog app.routing-module.ts const routes: Routes = [{ path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }]; It also updates the with the blog routes to prerender. scully.angular-blog.config.ts A Few Other Configurations Now we have a module for our blog feature. The next things we need to do are; create a component for the list of blog posts using the command below ng generate component blog/blog-list create a component that will show the actual blog post content using the command below ng generate component blog/blog-post Fix up our route configuration in as below blog.routing.module.ts const routes: Routes = [ { path: '', component: BlogComponent, children: [ {path: ':slug', component: BlogPostComponent}, {path: '', component: BlogListComponent} ] } ]; Lastly, we add the in the to handle routing in the module.This page will display the blog list and blog posts based on the route configuration in <router-outlet></router-outlet> blog.component.html blog-routing.module.ts Configuring the Route Entry Point for Scully After sorting out the module for our blog feature, we need to create an entry point for scully (typically the home page of our app). It is suitable to leverage the Angular lazy-loaded module feature for our app home page because this part of our app is separate from the blog part. Create a with the following command: home module ng generate module home --route=home --module=app-routing This updates the route configuration in with the path for the . Set its path to an empty string. app-routing.module.ts home module const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then((m) => m.BlogModule), }, { path: '', loadChildren: () => import('./home/home.module').then((m) => m.HomeModule), }, { path: '**', redirectTo: 'blog', pathMatch: 'full' }, ]; You can always add a redirect below the route configuration for the blog module if you don't want the home page to be accessed yet. {path:'',redirectTo:'blog',pathMatch:'full'}, Building the Angular-Scully App After all those configurations, we need to build our project with Angular, build with Scully then serve the built project on the Scully server but first, let's restart the Angular server.Build the project by running ng build Then we build with scully using npx scully We can also modify the command in our so that it will run the two previous commands. build package.json "build": ng build && npm run scully -- --scanRoutes Now we can use to achieve the same thing. After those two commands, a folder is created in the root directory of our project. This folder contains the two built versions of our site, The folder named is the one built by Angular while the one named contains the static pages generated by scully. Now, we can start the scully server using the command: npm run build dist angular-blog static npx scully serve After the server starts successfully, navigate to to see the angular app running, then in a separate tab, open this link to see the static site. You browser should show a white page with the text .To check our actual blog post (created by the schematic) go to the markdown file in the folder and copy the value of the property in the frontmatter. http://localhost:4200/blog http://localhost:1668/blog blog-list works! init:blog blog slugs --- title: 2022-04-29-blog description: 'blog description' published: false slugs: - ___UNPUBLISHED___l2kp8pyl_z4RfUZ7hSOMdOfldi8yqeZcOKuebIId2 --- That is the current path(generated by scully) to the blog post when . It's a private route to your blog post when it's still in draft version so you can share with anyone to get an article review before publishing. When you are ready to publish the post, you can set and remove the property which will allow scully use the file name(without the extension) as its path when it generates the static pages. published: false published: true slugs Go to address bar of the tab serving the static site and paste the slug after then press enter. You should see the content of the blog post. Now, we have confirmed that our blog feature is fully functional so next up is to add more blog posts. http://localhost:1668/blog/ Creating Blog Posts We can create a blog post with the command below. The option takes the name of your post. name ng generate @scullyio/init:post --name="Post 1" This creates a markdown file in the folder. When we open the newly created markdown file, we see this blog --- title: Post 1 description: blog description published: false --- # Post 1 As you now know, the content between the three dashes is the frontmatter and below the frontmatter is the blog content.The frontmatter is where we can add information about the post such as metadata, SEO e.t.c. Let's update this markdown file to look like this --- title: Post 1 description: blog description published: true image: /assets/images/enigma.jpg seo: { metaDescription: First post for my angular scully blog, metaTitle: First post }, --- # Post 1 I have added an image in the corresponding directory which I'll render in post. When we're satisfied with our markdown file, we can build with the command. npx scully A Tip on Knowing Which to Build With is only needed when you modified something in your angular app. The scully config file, plugins, and eventual markdown files are not part of your Angular app. Although this may seem evident, if this is your first time using Scully it is easy to rebuild Angular even if it is not needed. When writing Scully plugins OR modifying your blog's markdown files, you DO NOT need to ng build the app each time you re-run Scully. Again, ng build Angular only if the Angular app changes ng build Showing All Blog Posts Let's head over to to work out the logic that handles data for the component. In this component, we will inject the as a dependency which will give us access to the blog posts routes. blog-list.component.ts ScullyRoutesService import { Component, OnInit } from '@angular/core'; import {ScullyRoute, ScullyRoutesService} from "@scullyio/ng-lib"; import {Observable} from "rxjs"; @Component({ selector: 'app-blog-list', templateUrl: './blog-list.component.html', styleUrls: ['./blog-list.component.scss'] }) export class BlogListComponent implements OnInit { links$: Observable<ScullyRoute[]> = this.scully.available$; constructor(private scully: ScullyRoutesService) { } ngOnInit(): void { this.getPublishedPosts(); } getPublishedPosts() { this.links$ = this.links$.pipe(tap(val) => console.log(val)) } } What we want to render are the published posts, that's why we get the published routes from the property on the .In the we can build the template that shows all blog posts. We'll work with the code below for now. available$ ScullyRoutesService blog-list.component.html <div> <ul> <li *ngFor="let post of links$ | async"> <a [href]="post.route">{{post.title}}</a> </li> </ul> </div> After you save, you should see an array of two routes in the console. We can't see any blog posts route yet because we haven't built with scully after changing the property to .Let's ensure that the property in our markdown files are set to then build with scully to update our published routes. Now when we reload, we should see an array of 4 routes in the console. However, since we only want blog posts routes, we'll need to transform our data with some rxjs. Let's update the function published true published true getPublishedPosts getPublishedPosts() { this.links$ = this.links$.pipe(map((links) => links.filter((link) => link.route.startsWith('/blog/'))),tap((val) => console.log(val))); } To ensure the scully version of our site is updated, let's run the command: npm run build Now we should have our page like this. You can click on the links to see that they show the corresponding posts. Accessing the Data in the Blog Post Page We can get the route data of a particular page we navigate to with the help of the by subscribing to the observable returned by the method. Add the code below to the ScullyRoutesService getCurrent() blog-post.component.ts import {Component, OnDestroy, OnInit} from '@angular/core'; import {ScullyRoute, ScullyRoutesService} from "@scullyio/ng-lib"; import {Subject, takeUntil} from "rxjs"; import {tap} from "rxjs/operators"; @Component({ selector: 'app-blog-post', templateUrl: './blog-post.component.html', styleUrls: ['./blog-post.component.scss'] }) export class BlogPostComponent implements OnInit, OnDestroy { currentRoute: ScullyRoute = {} as ScullyRoute; onDestroy$ = new Subject<void>(); constructor(private scully: ScullyRoutesService) { } ngOnInit(): void { this.getCurrentPost() } getCurrentPost() { this.scully.getCurrent() .pipe(takeUntil(this.onDestroy$)) .subscribe((routeData: ScullyRoute) => { this.currentRoute = routeData; }); } ngOnDestroy() { this.onDestroy$.next(); this.onDestroy$.complete(); } } Details of our current route is assigned to property and this allows us use the route data for that particular post the way we want. this.currentRoute Styling Our Blog Firstly, we need to create another component which will be our reusable component for the blog cards. Use the command: ng generate component blog/blog-list/blog-card Open the and place the code below inside it blog-card.component.html <li *ngFor="let post of links$ | async"> <a [href]="post.route">{{post.title}}</a> </li> Then we make use of this component in our via the selector in this way blog-list.component.html app-blog-card <div> <ul> <app-blog-card [post]="post" *ngFor="let post of links$ | async"></app-blog-card> </ul> </div> We are also passing each route object in the array as through the component therefore, we will need to receive this data from the parent component( ) in our child component ( ) using the decorator. Let's do that by putting the code below in the post app-blog-card blog list blog card Input() blog-card.component.ts import {Component, Input, OnInit} from '@angular/core'; import {ScullyRoute} from "@scullyio/ng-lib"; @Component({ selector: 'app-blog-card', templateUrl: './blog-card.component.html', styleUrls: ['./blog-card.component.scss'] }) export class BlogCardComponent implements OnInit { @Input() post: Partial<ScullyRoute> = {}; constructor() { } ngOnInit(): void { } } Finally, Some Styling You can use any styling format you want. I'll be using tailwind. Let's use the straightforward to configure it in our project. After the configuration is done, we'll need to restart the angular server. Update the with the new template below tailwind documentation blog-card.component.html <li class="h-full"> <a [href]="post.route" class="h-full w-full lg:max-w-full lg:flex hover:bg-gray-100"> <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" [style.background-image]="'url(' + (post['image'] || 'https://images.unsplash.com/photo-1496494118863-9cf5d1e70cd6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80') + ')'" title="Mountain"> </div> <div class="w-full border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal"> <div class="mb-8"> <div class="text-gray-900 font-bold text-xl mb-2">{{post.title}}</div> <p class="text-gray-700 text-base">{{post['seo']?.metaDescription || post['description']}}</p> </div> </div> </a> </li> Also update the blog-list.component.html <div> <ul class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-3 gap-5"> <app-blog-card [post]="post" *ngFor="let post of links$ | async"></app-blog-card> </ul> </div> The code below adds a header to our site. Add it in app.component.html <nav class="flex flex-wrap items-center justify-between bg-gray-800 p-6 w-full"> <div> <a class="text-white no-underline hover:text-white hover:no-underline" routerLink="/"> <span class="text-2xl">Angular scully blog</span> </a> </div> <ul class="list-reset flex justify-end flex-1 items-center"> <li class="mr-3"> <a class="inline-block text-white no-underline hover:text-gray-200 hover:text-underline py-2 px-4" routerLinkActive="" routerLink="/blog">blog</a> </li> </ul> </nav> <router-outlet></router-outlet> Now we have a nice user interface that shows all blog post Let's add the code below for the blog post user interface( ) blog-post.component.html <main class="mx-auto max-w-screen-sm max-w-screen-lg"> <img [src]="currentRoute['image'] || 'https://cdn.mos.cms.futurecdn.net/4uiRZ5nNAgpHSifSjaKwcC-970-80.jpg.webp'" alt="nft"/> <h3>ScullyIo content</h3> <hr> <!-- This is where Scully will inject the static HTML --> <scully-content></scully-content> <hr> <h4>End of content</h4> </main> Finally, use the command to build the project and checkout the scully static version in your browser. npm run build Pushing to Github Create a repository on and then copy the remote url ( ) so that we can add it for our project using the command below: Github https://github.com/<github-username>/<repository-name>.git git remote add origin https://github.com/<github-username>/<repository-name>.git Rename the branch to with the command below: main git branch -M main Push to github with the command below: git push origin main Here's a link to the . repository for this article demo Deploying to Netlify After pushing our Angular Scully blog to github, we are ready to deploy on Netlify. If you do not have an account yet, you can or go ahead and log in to your account if you have one.Choose import from git Select Github Connect the repository you want to deploy. You may need to configure netlify for your github account if it has not been setup. This is needed for netlify to have access to the repository Provide the path to the folder where the scully generated static pages are as well as the build command Click the button and watch as netlify builds your project. Congratulations on making it to the end and have fun personalising your site as you like. signup here Deploy site Here's a link to the deployed site Conclusion I do hope this article has been helpful in guiding you through creating your blog site with Angular and scully from scratch. You can leave questions or suggestions in the comments or reach out to me on twitter @BrunoElo if you like. Thanks for reading! Also published . here
