This is tonari's blog, a static site generated with next.js and using Notion as the source of articles.
See tonari-notion-blog-demo.web.app for a simple demonstration of what it looks like :).
Articles are written in the form of pages in a Notion database, and this codebase then fetches them via their public API and coverts those pages into static content that is deployed to a Firebase static site.
This repository is an unbranded version of our blog, presented as-is for others to modify as they please. There's a lot of hardcoded stuff in here (like the Japanese-English language support and GoatCounter metrics) that you'll need to modify to your own needs. We hope it serves as a good starting-point for others, though, and would also be welcome to the idea of others turning it into a more generic configurable blog system.
-
Go to the sample database Notion page and click "Duplicate" on the top right, copying it into your workspace.
-
In your duplicated page, get your new database's ID by hovering over the database title ("Posts"), clicking on "..." -> "Open as page".
The new URL will look like
https://www.notion.so/yourname/[DATABASE_ID]?v=[VIEW_ID]
.Copy just the
DATABASE_ID
and place it in thedatabaseId
field inblog.config.js
.
- Go to My Integrations on Notion and make a new internal integration.
- Copy
.env.example
to.env
and fill in your integration key:NOTION_API_KEY=[secret_YOURAPIKEY]
Your database needs to be "shared" with your integration before the notion API can access it.
- Hover over your database title ("Posts"), click on "..." -> "Open as page".
- Click "Share" on the upper right, click the text box that says "People, emails, groups, or integrations", then find your integration and select it.
Install yarn if you don't have it already, then within the root of this repository, run:
yarn
to grab all dependencies.
yarn dev
And then visit https://localhost:3000/
To export a static site to the out/
directory:
yarn export:prod
We included some sample scripts in package.json
and a firebase.json
for deploying to Firebase, which is what we use for tonari's blog, but you're obviously free to deploy that static site anywhere you want.
We deploy our blog to staging and production using a Slack slash command that triggers a GitHub Action which builds & deploys the site to Firebase Hosting. It was the simplest way to allow non-technical peeps to update the blog and not need a server running.
Included in this blog is our (totally optional) GitHub action and Firebase function you can modify and deploy to use this functionality yourself if you'd like.
To deploy the functions, set the applicable secrets:
firebase functions:config:set \
deploy.region=asia-northeast1 \
github.username=mygithub \
github.repository=mygithub/blog \
github.access_token=ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx \
slack.signing_secret=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
yarn deploy:functions
firebase.region
is the Cloud Function location to deploy into.github.username
is the username of the account that owns the Personal Access Tokengithub.access_token
- we use a special bot account with restricted access to certain repositories, and recommend you do the same.slack.signing_secret
is the signing secret of the app you create in your Slack workspace for this bot.
See this blog for more details on setting it up (thanks to whoever wrote this, by the way): https://whatdafox.com/trigger-github-workflow-from-slack-using-firebase-functions/.
For the GitHub actions to successfully build and deploy your Firebase static site (and send slack notifications), you'll need to set the following secrets on your repo:
FIREBASE_TOKEN
- generated by runningfirebase login:ci
NOTION_API_KEY
- the API key for the integration that has access to your blog database in Notion.SLACK_BOT_TOKEN
- the auth token for your Slack app that you created in your workspace.
This was originally a fork of https://github.com/ijjk/notion-blog, but has since been largely re-written.