Skip to main content

​
blog

The blog schematic (also available as add-blog) creates a complete blog setup in your Angular application with routing, components, and markdown support.

​
Usage

​
Basic Usage

ng generate @scullyio/init:blog

​
Short Form

ng g @scullyio/init:blog

​
Using Alias

ng g @scullyio/init:add-blog

​
With Options

ng g @scullyio/init:blog --project=my-app --routingScope=Root

​
Options

​
--routingScope

  • Type: string
  • Default: "Child"
  • Options: "Child", "Root"
  • Description: Determines whether to create a child routing module or add routes to the root module
Child routing (default): 
ng g @scullyio/init:blog --routingScope=Child
Creates a separate blog routing module that can be lazy-loaded. Root routing: 
ng g @scullyio/init:blog --routingScope=Root
Adds blog routes directly to the root routing module.

​
--project

  • Type: string
  • Default: "defaultProject"
  • Description: Specifies the project to add the blog to in a multi-project workspace
ng g @scullyio/init:blog --project=my-app

​
What Gets Created/Modified

The blog schematic internally calls the create-markdown schematic with blog-specific configuration. Here’s what gets created:

​
1. Blog Module

File: src/app/blog/blog.module.ts Creates a dedicated Angular module for the blog: 
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BlogRoutingModule } from './blog-routing.module';
import { BlogComponent } from './blog.component';
import { ScullyLibModule } from '@scullyio/ng-lib';

@NgModule({
  declarations: [BlogComponent],
  imports: [
    CommonModule,
    BlogRoutingModule,
    ScullyLibModule
  ]
})
export class BlogModule { }

​
2. Blog Component

Files:
  • src/app/blog/blog.component.ts
  • src/app/blog/blog.component.html
  • src/app/blog/blog.component.css
  • src/app/blog/blog.component.spec.ts
Component TypeScript: 
import { Component, OnInit } from '@angular/core';
import { ScullyRoutesService } from '@scullyio/ng-lib';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {
  links$: Observable<any> = this.scully.available$;

  constructor(private scully: ScullyRoutesService) {}

  ngOnInit() {
    this.links$.subscribe((links) => {
      console.log(links);
    });
  }
}
Component Template: 
<h3>Blog List</h3>
<scully-content></scully-content>

<h3>Blog Posts</h3>
<ul>
  <li *ngFor="let page of links$ | async">
    <a [routerLink]="page.route">{{ page.title }}</a>
  </li>
</ul>

​
3. Blog Routing Module

File: src/app/blog/blog-routing.module.ts Configures routing for blog posts with a dynamic slug parameter: 
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BlogComponent } from './blog.component';

const routes: Routes = [
  {
    path: ':slug',
    component: BlogComponent,
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class BlogRoutingModule {}

​
4. App Routing Updates

File: src/app/app-routing.module.ts Adds blog route to the main routing configuration: 
const routes: Routes = [
  // ... existing routes
  {
    path: 'blog',
    loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule)
  }
];

​
5. Sample Markdown File

File: blog/[date]-blog.md (e.g., blog/2020-09-17-blog.md) Creates a sample blog post: 
---
title: 'Blog'
description: 'blog description'
published: false
---

# Blog

​
6. Scully Configuration Updates

File: scully.config.ts (or scully.[project].config.ts) Adds content folder configuration: 
import { ScullyConfig } from '@scullyio/scully';

export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "my-app",
  outDir: './dist/static',
  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      slug: {
        folder: "./blog"
      }
    },
  }
};

​
Configuration Details

The blog schematic automatically configures:
  • Module name: blog
  • Route parameter: slug
  • Content folder: ./blog
  • Route path: /blog
These values are passed to the create-markdown schematic internally: 
const markdownOptions = {
  name: 'blog',
  slug: 'slug',
  sourceDir: 'blog',
  route: 'blog',
  project: options.project,
  routingScope: options.routingScope
};

​
Examples

​
Default Blog Setup

ng g @scullyio/init:blog
Creates a blog with child routing module at /blog/:slug.

​
Blog with Root Routing

ng g @scullyio/init:blog --routingScope=Root
Integrates blog routes directly into the root routing module.

​
Multi-Project Workspace

ng g @scullyio/init:blog --project=my-app
Adds blog to a specific project in an Angular workspace.

​
Output Example

When you run the schematic, you’ll see output similar to: 
ng g @scullyio/init:blog
    ✅️ Update scully.my-app.config.ts
UPDATE scully.my-app.config.ts (511 bytes)
UPDATE src/app/app-routing.module.ts (524 bytes)
CREATE src/app/blog/blog-routing.module.ts (406 bytes)
CREATE src/app/blog/blog.component.html (153 bytes)
CREATE src/app/blog/blog.component.spec.ts (614 bytes)
CREATE src/app/blog/blog.component.ts (489 bytes)
CREATE src/app/blog/blog.component.css (131 bytes)
CREATE src/app/blog/blog.module.ts (380 bytes)
    ✅️ Blog ./blog/2020-09-17-blog.md file created
CREATE blog/2020-09-17-blog.md (97 bytes)

​
Customizing the Blog Folder

After running the schematic, you can customize the blog folder location by editing the Scully configuration: 
routes: {
  '/blog/:slug': {
    type: 'contentFolder',
    slug: {
      folder: "./content/posts"  // Changed from ./blog
    }
  }
}
Remember to move your markdown files to the new location.

​
Next Steps

After creating your blog:
  1. Create new posts: 
    ng g @scullyio/init:post --name="My First Post"
  2. Build your application: 
    ng build
  3. Run Scully: 
    npm run scully
  4. Serve the static site: 
    npm run scully:serve

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us