
Blogging on Notion, generating a static site with Angular, Scully, and hosting on Firebase.
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
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
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.ngx-scully-blog/src/favicon.ico
)ngx-scully-blog/src/assets/profile.jpg
)ngx-scully-blog/src/assets/default_share_img.jpg
)ngx-scully-blog/scully.ngx-scully-blog.config.ts
file)NOTION_API_KEY
again with your intergration token (export NOTION_API_KEY=your_integration_token
or update in your .profile
, .bashrc
or .zshrc
file)npm install -g firebase-tools
firebase login
y
to let Firebase collect CLI usage and error reporting information, if not, input n
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.
firebase init
to initiate your project.Ok, now you are ready to deploy your blog to Firebase.
In the previous terminal, inside the project root directory, run the command npm run scully:deploy
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.
npm run scully:preview
npm run scully:deploy
Update configs in ngx-scully-blog/src/app/config/advanced/google-analytics.ts
file.
Update configs in ngx-scully-blog/src/app/config/advanced/google-adsense.ts
file.
Update configs in ngx-scully-blog/src/app/config/advanced/facebook-pixel.ts
file.
Update configs in ngx-scully-blog/src/app/config/advanced/comment.ts
file.
Update configs in ngx-scully-blog/src/app/config/advanced/menus.ts
file.
Update configs in ngx-scully-blog/src/app/config/advanced/logging.ts
file.
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.