Nhan Nguyen

Ngx-scully-blog V5 is out!

May 28, 2022 angular
image

Blogging on Notion, generating a static site with Angular, Scully, and hosting on Firebase.

ngx-scully-blog is a simple blog made for developers that is easy to setup, supports SEO, Google Adsense, Google Analytics, Facebook Pixel, and many more.

Live demo: https://ngx-scully-blog-demo.web.app

Repository: https://github.com/nhaancs/ngx-scully-blog

Getting started

Fork this project and then clone the forked project

git clone https://github.com/<your_username>/ngx-scully-blog.git && cd ngx-scully-blog

Install dependencies

npm install

Export the default Notion API key. This is the key I created for demo purposes, you will setup with your own Notion later.

export NOTION_API_KEY=secret_daYuK8nuNeFvxWrn0dIhDwZnGXyMN3fAdFG97gY5i3l

Run Scully

npm run scully:preview

The demo blog with default data will be available at http://localhost:1668

Make it your own

Setup Notion

  • Register or login at notion.so
  • Create an integration at notion.so/my-integrations. Remember to copy the secret token!
  • Create a Notion database with the same properties as this database (or you can choose to duplicate this one)
  • Go to the created database, and share it with the integration (Share → Select the integration in the Invite dropdown). Don’t forget the database id in the URL. It’s a series of characters after the last slash and before the question mark.

Personalize your blog

  • Update the config values in ngx-scully-blog/src/app/config/site-configs.ts file. I put comments for each config so you can read the comments if you need more information.
  • Update favicon (ngx-scully-blog/src/favicon.ico)
  • Update profile image (ngx-scully-blog/src/assets/profile.jpg)
  • Update default cover image of the blog (ngx-scully-blog/src/assets/default_share_img.jpg)
  • Replace the default database id with the id of the database you created (line 49 in ngx-scully-blog/scully.ngx-scully-blog.config.ts file)
  • Export NOTION_API_KEY again with your intergration token (export NOTION_API_KEY=your_integration_token or update in your .profile, .bashrc or .zshrc file)

Setup Firebase

  • Go to https://console.firebase.google.com and login with your Google account.
  • After login, click on Add project button to create a new project.
  • Input your project name and click Continue.
  • Disable the option Enable Google analytics for this project and click Create project

Deploy your blog to Firebase

Login to Firebase

  • Open your terminal and go to the project root directory.
  • Let's install Firebase CLI globally: npm install -g firebase-tools
  • Login to Firebase: firebase login
  • Input y to let Firebase collect CLI usage and error reporting information, if not, input n
  • A new browser window will be opened and you can login to Firebase here.
  • Next, click on the "Allow" button to give Firebase CLI permissions to access to your Firebase account.

Then you would see a success page notify that you are logged in successfully.

Go back to your editor's terminal. You will see a successful message also.

Init your project

  • In the previous terminal, run the command firebase init to initiate your project.
  • Firebase CLI will ask: Which Firebase CLI features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices:
  • Project setup, Firebase CLI will ask you some questions:
  • Hosting setup, Firebase CLI will ask you some questions:

Ok, now you are ready to deploy your blog to Firebase.

Deploy to Firebase hosting

In the previous terminal, inside the project root directory, run the command npm run scully:deploy

How to write and publish a blog post

Create a new post on Notion

  • Open your database and create a new record
  • Fill in all properties
  • Open the record and start to write your post content

Important note on post images

Image links on Notion have expire time of one hour, you need to rebuild the blog to get new links each hour. To prevent that, you need to upload post images elsewhere like Firebase storage or Dropbox and then provide the links to Notion instead of uploading directly on the Notion app.

Preview your blog on local

npm run scully:preview

Deploy your new post to Firebase

npm run scully:deploy

Advanced features

Google analytics

Update configs in ngx-scully-blog/src/app/config/advanced/google-analytics.ts file.

Google adsense

Update configs in ngx-scully-blog/src/app/config/advanced/google-adsense.ts file.

Facebook pixel

Update configs in ngx-scully-blog/src/app/config/advanced/facebook-pixel.ts file.

Enable comment for your blog

Update configs in ngx-scully-blog/src/app/config/advanced/comment.ts file.

Manage menus

Update configs in ngx-scully-blog/src/app/config/advanced/menus.ts file.

Logging errors

Update configs in ngx-scully-blog/src/app/config/advanced/logging.ts file.

Advanced plugins

You can enable the Advanced plugins section in ngx-scully-blog/scully.ngx-scully-blog.config.ts file to support lazy load images, create a sitemap, create RSS feeds, minify HTML, optimize SEO href.