Development Hub

A small static site to share the tools I'm building and a few resources along the way. Four pages: a Home page with a project status board, a Journal feed pulled from Notion, a Resources page, and an About page. No frameworks, no build step beyond a one-line sync. Hosted free on GitHub Pages.

Live site: https://bytesizedbooksmith.github.io/dev-hub/

How it works

I write journal entries in a Notion database. A sync script reads them with a secret token and writes them into data/entries.json. The site reads that JSON file, so the published site never contains the secret token and stays 100% static.

Notion DB  --(sync-notion.js, uses secret token)-->  data/entries.json  -->  the site reads it

Only entries with Status = Published appear on the site, so drafts stay private.

Files

File	What it is
index.html	Home page (project status board + latest entries)
updates.html	Journal feed (with project filters)
resources.html	Build docs & references
about.html	About page
styles.css	Shared styling (Byte-Sized Booksmith palette)
feed.js	Loads data/entries.json and renders the feed
data/entries.json	The synced journal data (regenerated by the sync script)
scripts/sync-notion.js	Fetches Published entries from Notion
images/	Site images
dev-docs/the-backroom/	The Backroom build docs, linked from Resources
.github/workflows/sync-and-deploy.yml	Auto-sync from Notion + deploy on GitHub

The Notion database

Name: Book Machine Journal Database ID: ef77c7904a4643c7a91b97d1e29c9d55

Properties:

• Title -- entry title
• Date -- date of the entry
• Body -- the entry text
• Project -- which tool the entry relates to
• Type -- Journal / Milestone / Screenshot / Resource
• Status -- Published / Draft (only Published shows on the site)
• Screenshot -- optional image
• Link -- optional external link

How the journal updates (the live setup)

This repo deploys through GitHub Actions. The workflow syncs from Notion and redeploys the site on every push, once a day automatically, and any time it's run by hand.

To publish a new or changed entry:

1. Write/edit the entry in the Notion database and set Status = Published.
2. In this repo: Actions tab -> Sync Notion & Deploy -> Run workflow.
3. When the run finishes green, the live site reflects the change.

The token lives as a repo secret named NOTION_TOKEN (Settings -> Secrets and variables -> Actions). It is never committed.

One-time token setup (already done, kept for reference)

1. https://www.notion.so/my-integrations -> New integration -> name it, pick the workspace, Read content is enough. Copy the Internal Integration Secret (starts with ntn_).
2. Open the Book Machine Journal database -> ... -> Connections -> add the integration. (Without this step the API returns 404.)
3. Add the secret to the repo as NOTION_TOKEN, and set Settings -> Pages -> Source: GitHub Actions.

Running the sync locally (optional)

Requires Node 18+.

PowerShell:

$env:NOTION_TOKEN = "ntn_your_token_here"
node scripts/sync-notion.js

macOS / Linux:

NOTION_TOKEN=ntn_your_token_here node scripts/sync-notion.js

This rewrites data/entries.json. Commit and push to publish.

Preview locally

Because the site fetches a JSON file, open it through a small local server (not by double-clicking the HTML):

python3 -m http.server 8000
# then visit http://localhost:8000

A note on screenshots

Images attached to the Notion Screenshot field are hosted by Notion with URLs that expire after about an hour. So either rely on the daily/auto sync as part of every deploy (the GitHub Action does this), or paste a permanent external image URL into the Screenshot field instead.