In the previous article: Getting Started With Scully - Angular Static Site Generator, We have seen what is Scully, How it works & How to use it to prerender routes.
In this article, we will see How Scully can help us to create a blogging site in angular?

Create Blogging Site With Angular And Scully

Scully is the best option to create a blogging site in Angular, because
  • It provides very good SEO support.
  • Superfast performance as pages are prerendered
  • Markdown support - Scully uses markdown files for blog content
  • Various plugins are available for syntax highlighting, google analytics integration, and many more.
  • Easy to create a new blog post : Once you have created the blog dashboard and blog page design setup in an angular application, you just need to add markdown files in your blog folder to create a new blog post
So let's get started
We will continue working on previous article example. If you want to start along then download/clone this GitHub repository.
  • We will add the blog support using Scully.
  • Create a Blog dashboard where it will show all the blogs.

Add Blog Support

Scully provides a schematic to add blog support in your existing angular application. execute the following command on command prompt or terminal.

(If you have not done Scully setup in your angular app, refer Getting Started With Scully.)
  1. ng generate @scullyio/init:blog
This will,
  • Update scully.[projectName].config.ts file
    1. // scully.portfolio.config.ts
    3. import { ScullyConfig } from '@scullyio/scully';
    4. export const config: ScullyConfig = {
    5. projectRoot: "./src",
    6. projectName: "portfolio",
    7. outDir: './dist/static',
    8. routes: {
    9. '/blog/:slug': {
    10. type: 'contentFolder',
    11. slug: {
    12. folder: "./blog"
    13. }
    14. },
    15. // Other Parameterized Route Config
    16. }
    17. }
    18. };
  • Create a blog component where markdown content will be rendered.
    1. //blog.component.ts
    3. import {Component, OnInit, ViewEncapsulation} from '@angular/core';
    4. import {ActivatedRoute, Router, ROUTES} from '@angular/router';
    6. declare var ng: any;
    8. @Component({
    9. selector: 'app-blog',
    10. templateUrl: './blog.component.html',
    11. styleUrls: ['./blog.component.scss'],
    12. preserveWhitespaces: true,
    13. encapsulation: ViewEncapsulation.Emulated
    15. })
    16. export class BlogComponent implements OnInit {
    17. ngOnInit() {}
    19. constructor(private router: Router, private route: ActivatedRoute) {
    20. }
    21. }
    1. <!-- blog.component.html -->
    3. <h3>ScullyIo content</h3>
    4. <hr>
    6. <!-- This is where Scully will inject the static HTML -->
    7. <scully-content></scully-content>
    8. <hr>
    9. <h4>End of content</h4>
    <scully-content> is a predefined component. Our blog content will be projected here. We can update the header and footer part as per our requirements.

  • Create blog.module.ts and blog-routing.module.ts for blog component route
    1. // blog-routing.module.ts
    3. import {NgModule} from '@angular/core';
    4. import {Routes, RouterModule} from '@angular/router';
    6. import {BlogComponent} from './blog.component';
    8. const routes: Routes = [
    9. {
    10. path: ':slug',
    11. component: BlogComponent,
    12. },
    13. {
    14. path: '**',
    15. component: BlogComponent,
    16. }
    17. ];
    19. @NgModule({
    20. imports: [RouterModule.forChild(routes)],
    21. exports: [RouterModule],
    22. })
    23. export class BlogRoutingModule {}
    1. // blog.module.ts
    3. import {CommonModule} from '@angular/common';
    4. import {NgModule} from '@angular/core';
    5. import {ScullyLibModule} from '@scullyio/ng-lib';
    6. import {BlogRoutingModule} from './blog-routing.module';
    7. import {BlogComponent} from './blog.component';
    9. @NgModule({
    10. declarations: [BlogComponent],
    11. imports: [CommonModule, BlogRoutingModule, ScullyLibModule],
    12. })
    13. export class BlogModule {}
  • Update the app-routing.module.ts to add the blog module route.
  • Add one sample blog markdown file with [current date] blog.md name in /blog folder
    1. ---
    2. title: 2021-04-03-blog
    3. description: blog description
    4. published: false
    5. ---
    7. # 2021-04-03-blog
    title, description, and published are meta details for this blog. These details can be used while we show the blog details on the blog dashboard. This can be accessible with the ScullyRoutesService. We can also add other meta properties as per our requirement, for example, authorName, authorTwitterId etc.

Test The Default Blog


We have added new components and modules. So we have to take a new angular build
  1. ng build --prod
Once it is done take Scully build
  1. npm run scully -- --scanRoutes
Scully maintains the cache for routes, if you want to discard the cache and recalculate the route, execute the command with --scanRoutes .

When published flag is false in a markdown file, and you take a Scully build it will add slugs property with ___UNPUBLISHED___[random-string]in markdown file and generate a blog HTML page in dist/static/blog folder with ___UNPUBLISHED___[random-string].
Unpublished blog path

When you want to publish this blog, set the published flag to true. and take a Scully build again with npm run scully.

Now serve the prerendered pages with npm run scully:serve and open the blog path in the browser.
Unpublished blog

Change The Blog Layout


We can customize the blog layout by doing related changes in BlogComponent. I have removed the default header and footer provided by Scully. I am using Bootstrap to apply some styling. You can do more customization as per your requirement.
  1. // blog.component.html
  3. <div class="row">
  4. <div class="col-md-12">
  5. <div class="card shadow-sm">
  6. <div class="card-body">
  7. <!-- This is where Scully will inject the static HTML -->
  8. <scully-content></scully-content>
  9. </div>
  10. </div>
  11. </div>
  12. </div>

Create Blog Dashboard

In BlogModule we will create BlogsComponent, In this component, we will show the list of blogs. We will update the route in blog-routing.module.ts to open BlogsComponent when the user open the /blog/ route.
  1. ng generate component blog/blogs
  1. //blogs.component.ts
  3. import { Component, OnInit } from '@angular/core';
  4. import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
  5. import { map } from 'rxjs/operators';
  7. @Component({
  8. selector: 'app-blogs',
  9. templateUrl: './blogs.component.html',
  10. styleUrls: ['./blogs.component.scss']
  11. })
  12. export class BlogsComponent implements OnInit {
  14. blogs$ = this.scullyService.allRoutes$.pipe(
  15. map(routes => routes.filter(r=> r.route.startsWith('/blog/')))
  16. );
  18. constructor(private scullyService: ScullyRoutesService) {
  20. }
  21. ngOnInit(): void {
  22. }
  24. }
We can access all routes details with ScullyRoutesService. We will filter the blog routes and render them on template.
  1. <!-- blogs.component.html -->
  3. <h1 class="text-center">Blogs</h1>
  4. <hr>
  5. <div class="row">
  6. <div class="col-md-12 p-2" *ngFor="let blog of blogs$|async">
  7. <div class="card shadow-sm">
  8. <div class="card-body">
  9. <h4 class="card-title">{{blog.title}}</h4>
  10. <p class="card-title">{{blog.description}}</p>
  11. <div>
  12. <span class="badge" [ngClass]="{'badge-info': blog.published, 'badge-dark': !blog.published}" >{{blog.published ? 'PUBLISHED' : 'DRAFT'}}</span>
  13. </div>
  14. <a class="btn btn-primary" [routerLink]="[blog.route]" >Read More</a>
  15. </div>
  16. </div>
  17. </div>
  18. </div>
We are done with our blog dashboard implementation. Now let's create few sample blogs and Test our blogging site.

Create A New Blog Post


We can create a new blog by creating a new markdown file in /blog folder. In this markdown file, we also have to mention the meta properties which is specified in about sample. We can do this manually, but instead of this Scully provides a schematic to create a new post, which will generate the file with meta properties.
  1. ng generate @scullyio/init:post
Create a new blog post
It will generate the markdown file with the following content,
  1. ---
  2. title: Getting Started with Scully
  3. description: blog description
  4. published: false
  5. ---
  7. # Getting Started with Scully
Here we will add the blog content and to publish this blog we will change published flag to true.

Final Output


I have added a few other blogs and changed all blog post published flags to true. Remove unpublished slug from markdown.

Take a new angular build and Scully build and start the scully static server.
  1. ng build --prod
  2. npm run scully -- --scanRoutes
  3. npm run scully:serve
Blogging Site With Scully and Angular

Great !!! We have successfully created a blogging site with Angular and Scully.
Get the Source Code at this GitHub Repository

Summary


In this article, We have seen how to create a blogging site with angular and Scully.
I hope you like this article, please provide your valuable feedback and suggestions🙂.