A calm, content-first Ghost theme. The home page is a personal index — a well-kept workshop at a glance:
- Hej — avatar, a one-line hello and an Om mig → door
- Texter — recent articles as compact archive rows
- Projekt — a 3×3 grid of compact project previews (
#projectposts)
System fonts, one sparse rust accent, near-zero JavaScript, dark by default with a sun/moon theme toggle. Swedish UI labels throughout (Texter / Projekt / Nu).
More screenshots — blog, projects, now page, about
/blog/ — article archive |
/projects/ — showcase |
|---|---|
 |
 |
/nu/ — now page + notes log |
A page — reading view |
|---|---|
 |
 |
Everything is an ordinary Ghost post. Which stream a post lands in is decided
by an internal tag (a tag whose name starts with # — these never show
publicly). There's nothing else to learn.
| You want to write… | Do this | Where it shows |
|---|---|---|
| An article | Publish a normal post. No special tag. | Home "Texter" timeline + /blog/ |
| A project | Add the internal tag #project |
Home "Projekt" grid + /projects/ |
| A note | Add the internal tag #microblog, leave the title empty |
The /nu/ notes log |
Permalinks never change — every post stays at /{slug}/ regardless of stream.
Just write and publish a post as normal. Any post not tagged #project or
#microblog is an article. On the home it appears under Texter as a row with
its date and reading time; the full archive is at /blog/ via the
Alla texter → link.
Short dated notes — one or two sentences, micro.blog-style.
- Create a new post.
- Leave the title empty.
- Write one or two sentences in the body. Keep it short — ~120 characters.
- Add the internal tag
#microblog. - Publish.
Notes don't appear on the homepage — it introduces, then showcases writing
and projects. The now page and dated log live at /nu/; put Nu in
the primary navigation so visitors find it.
A proper now page in the nownownow.com tradition — a curated list of what you're focused on right now (building, reading, thinking about), not a feed.
Create a Ghost page with the slug nu and write the list in its
body. It renders at the top of /nu/ under the // Nu heading, with
"Uppdaterad date" beneath — the date refreshes automatically whenever you
edit the page. The dated notes log follows below as // Noteringar.
If the nu page doesn't exist, /nu/ is simply the notes log. (The channel
route shadows the page's own URL, so the page only ever appears here.)
Write a post and add the internal tag #project (type #project in the
post's Tags field — Ghost turns it into the internal tag hash-project).
Then, to make the previews and cards work:
- Feature image → the card/thumbnail image. Without one, a quiet
//placeholder stands in. - Excerpt (post settings) → the one-line pitch on the home preview and the
card on
/projects/. Keep it to a sentence. - Public tags (e.g.
Rust,CLI) → the mono tech labels. - Feature this post (admin toggle) → hand-picks the hero card at the top
of
/projects/; otherwise the newest project leads.
The home shows the 9 newest as compact previews in a three-column grid.
The full showcase lives at /projects/: a hero card (image beside text
on wide screens) above a two-column card grid, introduced by the Projects
tagline theme setting.
The greeting at the top of the home comes from an editable Ghost page with
the slug intro (Pages → New page → set the URL slug to intro):
- Page title → the bold greeting line, e.g.
Hello! Jag heter Alex. - Custom excerpt → the regular sentence beneath, e.g.
Jag bygger små verktyg och skriver om mjukvara. - Page body → the full presentation, reached via Om mig →.
The hero also carries a fixed invitation line — "Ta en titt på vad jag gör just nu." — pointing visitors at the now page.
The round avatar is the intro page author's profile image (Settings →
Staff → your profile picture). With none set, it falls back to
assets/images/avatar.svg. If the intro page doesn't exist, the home simply
omits the hello line — no error.
These three listing pages are Ghost channels defined in
routes.yaml. routes.yaml is site config, not part of the
theme bundle, so install it once:
- Hosted / Ghost(Pro): Settings → Labs → Routes → upload
routes.yaml. - Local Docker: it's already bind-mounted by
docker-compose.yml; a restart picks up edits.
Without it, posts and the home page still work, but the Alla … → links 404.
The /projects/ channel orders featured posts first (that's what powers the
hand-picked hero card) — if you installed an older routes.yaml, re-upload this
one to get that.
Set in Settings → Navigation:
- Primary (top bar): e.g.
Home → /,Blog → /blog/,Projects → /projects/,Nu → /nu/,About → /about/. - Secondary (footer): your social/personal links — e.g.
Prenumerera → #/portal/,GitHub → https://github.com/you,Mastodon → https://mastodon.social/@you. They render in the footer's right group next to RSS, each carryingrel="me"so Mastodon (and friends) can verify them back to this site.
Facebook and X set under Settings → General → Social accounts also appear in the footer automatically when filled in.
Settings → Design → verkstad exposes:
- Show tagline on home — off by default (the hello line stands in for it on the home page; the tagline still shows on every other page).
- Projects tagline — the one-line introduction under the Projekt heading on
/projects/(default: "Små verktyg, teman och experiment."). Leave empty to hide it.
Relative dates and UI strings assume Swedish. Set Settings → General →
Publication Language to sv for "för 3 dagar sedan"-style dates.
docker compose up -d # start Ghost with the theme + routes bind-mounted
# http://localhost:2368/ (site) http://localhost:2368/ghost/ (admin)- Template (
.hbs) orroutes.yamlchanges:docker compose restart ghost - CSS changes: just refresh the browser
- Validate the theme:
npm test(runs gscan) - Release zip: publishing a GitHub release attaches an installable
verkstad.zipautomatically (a workflow validates, zips and uploads it); it can also be run by hand from the Actions tab.
default.hbs base layout: masthead, nav, footer, theme toggle
index.hbs home (hello + Texter timeline + Projekt grid) & paginated archive
blog.hbs /blog/ channel — article archive
projects.hbs /projects/ channel — showcase (hero card + card grid)
nu.hbs /nu/ channel — now page (from the `nu` page) + notes log
post.hbs page.hbs reading views
tag.hbs author.hbs taxonomy archives
partials/
navigation.hbs primary + secondary menus
post-card.hbs an article row (date + title + reading time)
project-card.hbs a showcase card (image, pitch, tech tags; hero variant)
project-mini.hbs a home preview card (small thumb, title, tags, one-line pitch)
micro-card.hbs a note row (date + note)
routes.yaml channel definitions (install separately — see Setup)
assets/css/ screen.css (tokens, layout) + code.css (reading views)
assets/js/theme.js the only JS: the dark/light toggle
package.json config.custom theme settings + image sizes
All colour, spacing and type live as CSS custom properties at the top of
assets/css/screen.css (--bg, --text, --heading, --accent, --muted,
--space-1/2/3, --date-col, …) for both the dark and light palettes. Adjust
there rather than hunting through rules.
Licensed under The Lagom License.