TheLazy.Dev
Portfolio GitHub

Blog

beginners |webdev |scully |angular

Build Simple Blog using Angular + Scully + Materialize + Netlify

sumitkharche

Sumit Kharche

Posted on August 1, 2020

Build Simple Blog using Angular + Scully + Materialize + Netlify

In this article, we are going to build a simple Blog application using Scully and deploying the application to Netlify. So please grab a cup of coffee and start learning.

Table of Content

  1. What is Scully?
  2. What is Netlify?
  3. Build a blog using Scully
  4. Deploy blog into Netlify

TL;DR

What is Scully?

There are lots of libraries available for Static Site Generators like Gatsby, Gridsome, Hugo, etc. Scully is the first SSG for Angular applications.

According Scully doc:

Scully is the best static site generator for Angular projects looking to embrace the JAMStack.
Under the hood, Scully analyzes an Angular application, and it generates a static version of it.

Scully uses a machine-learning algorithm that finds all routes in our application and generates static HTML files which then we can host it any CDN or web server. The best part of Scully is it has great support of Angular Schematics and due to this you just have to fire command to add Scully into your existing Angular application.

What is Netlify?

Netlify is a next-generation web hosting platform that provides everything that you need to build fast, modern websites such as CI/CI, serverless functions, etc. I recommend deploying it on Netlify because it supports project structures like this and can quickly create deployments.

Below are some of the benefits of Netlify:

  • You can create a free account for your projects.
  • Very less pricing with lots of features. You can check pricing here.
  • Provides free SSL certificates and has built-i DNS managements.
  • You want to store data then Netlify also has a Netlify CMS.

Build a blog using Scully

Let's create a new angular application:

ng new scully-blog-swa
Enter fullscreen mode Exit fullscreen mode

Select yes for Angular routing and select CSS for our stylesheet format.

angular-new-app

Once the project generation completed the navigate to the project folder.

cd scully-blog-swa
Enter fullscreen mode Exit fullscreen mode

So run the angular application by running the following command:

ng serve --open
Enter fullscreen mode Exit fullscreen mode

You can see the application at http://localhost:4200/

default-app

We are using Materializecss for styling our application.

To get started with Materializecss, open index.html and add below code:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

We will start by creating the Navbar component. So run following command:

ng g c components/navbar
Enter fullscreen mode Exit fullscreen mode

Open navbar.component.html and below code.

<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Scully Blog</a>
      <ul class="right hide-on-med-and-down">
        <li><a routerLink="/blog">Blog</a></li>
        <li><a routerLink ="/about">About</a></li>
      </ul>

      <ul id="nav-mobile" class="sidenav">
        <li><a routerLink="/blog">Blog</a></li>
        <li><a routerLink="/about">About</a></li>
      </ul>
    </div>
</nav>
Enter fullscreen mode Exit fullscreen mode

The above is a simple navbar component from Materializecss which you can get from the website.

Delete html from app.component.html and add <app-navbar> the navbar component.

<app-navbar></app-navbar>
<router-outlet></router-outlet>
Enter fullscreen mode Exit fullscreen mode

Navigate to browser to see the Navbar:

navbar

So integrate Scully into Angular application we have used below command:

ng add @scullyio/init
Enter fullscreen mode Exit fullscreen mode

We have to build our app then run npm run scully command so that Scully knows which routes it has to scan and creates static pages To make things simple we updated default build command in package.json as below:

 "build": "ng build && npm run scully -- --scanRoutes",
Enter fullscreen mode Exit fullscreen mode

Scully provides the below command to generate a blog.

ng generate @scullyio/init:blog
Enter fullscreen mode Exit fullscreen mode

scully-blog

This command generates a blog folder into our app which stores markdown files and also creates a blog component that is responsible for rendering markdown content.

To create posts we have to use below command:

ng g @scullyio/init:post --name="What makes a truly unique Latte"
Enter fullscreen mode Exit fullscreen mode

This creates a markdown file in the blog folder. So using this command create a few posts and add markdown in it. In the markdown files, we have to make the published field true as we are not publishing draft posts.

To show all our blogs we have to create a container component. So create a new component:

ng g c components/blog-container
Enter fullscreen mode Exit fullscreen mode

Open blog-container.component.ts and add below code:

import { Component, OnInit } from '@angular/core';
import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-blog-container',
  templateUrl: './blog-container.component.html',
  styleUrls: ['./blog-container.component.css']
})
export class BlogContainerComponent implements OnInit {

  constructor(private scully: ScullyRoutesService) {}
  posts$: Observable<ScullyRoute[]>;

  ngOnInit(): void {
    this.posts$ = this.scully.available$.pipe(
        map(routeList => {
          return routeList.filter((route: ScullyRoute) =>
            route.route.startsWith(`/blog/`)
          );
        })
      );
    }
}
Enter fullscreen mode Exit fullscreen mode

ScullyRoutesService gives us available posts i.e. published=true so we import as service and assign it to local posts variable.

Open blog-container.component.html and below code to render posts:

<div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br><br>
      <h1 class="header center orange-text">Scully Blog</h1>
      <div class="row center">
        <h5 class="header col s12 light">A simple coffee blog application</h5>
      </div>
    </div>
</div>

<div class="container">
    <div class="section">
      <div class="row">
        <div *ngFor="let post of posts$ | async" class="col s12 m6">
            <div class="card">
              <div class="card-image waves-effect waves-block waves-light">
                <img class="activator" src={{post.image_url}}>                              
              </div>
              <div class="card-content">
                <span class="card-title activator grey-text text-darken-4">{{post.title}}</span>
                <p><a [routerLink]="post.route">Read More</a></p>
              </div>
              <div class="card-reveal">
                <span class="card-title grey-text text-darken-4"><i class="material-icons right">close</i></span>
                <p>{{post.description}}</p>
              </div>
            </div>
          </div>
      </div>

    </div>
    <br><br>
  </div>
Enter fullscreen mode Exit fullscreen mode

Add below code into blog-routing.module.ts:

{
    path:'',
    component: BlogContainerComponent
}
Enter fullscreen mode Exit fullscreen mode

Open app-routing.module.ts and add below code:

const routes: Routes = [
  {path: '', redirectTo:'blog',  pathMatch: 'full'},
  { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }
];
Enter fullscreen mode Exit fullscreen mode

To run the application hit below commands:

npm run build
Enter fullscreen mode Exit fullscreen mode

after that run following command to serve Scully:

npm run scully:serve
Enter fullscreen mode Exit fullscreen mode

Open browser to see the output:

scully-container

Now click Read more button of any blog post and check the blog post content. It's not looking good so open blog-component.html and add below code:

<div class="container">
    <div class="section">
        <div class="row">
            <scully-content></scully-content>
        </div>
    </div>
    <br><br>
</div>
Enter fullscreen mode Exit fullscreen mode

and open blog-component.css and add below css:

h1 {
  color:rgb(51, 6, 37);
  padding: 5px;
  border-radius: 5px;
  width: fit-content;
}
Enter fullscreen mode Exit fullscreen mode

Create an about component and add some content in it and also include route into app-routing.module.ts

Finally, run the app and see the output:

blog-app

Now push this new app into Git (you can choose other software development platforms like Gitlab, Bitbucket). Follow the below steps for commit and push the project into Git.

git init
git add .
git commit -m "first commit"
git remote add origin <your repo address>
git push -u origin master
Enter fullscreen mode Exit fullscreen mode

So we have successfully created a Scully blog and also pushed source code into Git.

Deploy blog into Netlify

Now we have created our Scully blog app in the previous step. Now its time to deploy it on Netlify. If you are not already a Netlify user, first go ahead and sign up for a free account here.

Once you logged in, you will be redirected to https://app.netlify.com/. Follow the steps and link & authorize your Git account. Then you will see the New Site from Git button.

new-site-1.PNG

Click on the New Site for Git button. You will see below screen.

create-new-site.PNG

Under the Continuous Deployment section, select Github option. After that search the repo that you have created in the previous step and click on it.

Alt Text

After selecting repo, you have to provide a build setting as shown in below image:

Alt Text

Now click on Deploy Site button to deploy the site on Netlify. Then wait for the build and deployment to complete. Once the deployment is done navigate to the URL to see the live app.

Alt Text

Conclusion

In this article, I have demonstrated to you how to create a blog application using Scully. We have also deployed the same application on Netlify.

I really hope that you enjoyed this article, share it with friends and please do not hesitate to send me your thoughts or comments.

You can reach out to me on twitter @sumitkharche01.

Happy Coding!!

References

  1. Building an Angular Jamstack App with Scully
  2. Scully docs
  3. Scully, the First Static Site Generator for Angular
  4. Creating an Angular Jamstack Blog

Photo by Lukas Blazek on Unsplash

💖 💪 🙅 🚩
sumitkharche
Sumit Kharche

Posted on August 1, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Build Simple Blog using Angular + Scully + Materialize + Netlify
beginners Build Simple Blog using Angular + Scully + Materialize + Netlify

August 1, 2020