Quill — Free Minimal Long-Form Personal Blog Website Template
Quill is a free, two-page Bootstrap 5 template for long-form personal blogs, where the essay is the interface instead of a busy feed of image cards. Its standout is a book-style table-of-contents home page — folio numbers, hairline rules and leader dots listing essays with dates and reading times — paired with a refined article page built around a drop cap, pull quotes and real footnotes. It's self-hosted and dependency-free: no jQuery, no icon fonts, no CDN scripts.
Key features
- Book-style "table of contents" essay list with folio numbers and reading times
- Long-form article page with drop cap, wide measure and pull quotes
- Real footnote system: superscripts smooth-scroll to notes and back
- Reading-progress bar plus floating back-to-top on articles
- "About the author" band and "On the desk / Now reading" section
- Hand-drawn inline-SVG icons — zero icon fonts, strict-CSP safe
- Accessible newsletter form with inline validation
- Off-canvas mobile navigation and skip link
- IntersectionObserver scroll-reveal with reduced-motion fallback
Best for
- Writers and essayists who want the words to lead
- Personal journals and long-form reading logs
- An author or columnist's portfolio site
- A client blog where typography matters
- Minimalist newsletter or publication homes
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 2 (essay home + single long-form essay)
- Responsive: Yes
- Style: Quiet editorial — oat paper, soft ink, one restrained moss accent; Newsreader + Hanken Grotesk
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Quill really free for commercial use?
Yes. You can use it for a personal journal, a client's writer site, or a paid publication at no cost. Attribution is appreciated but never required.
Do I need a build tool or framework to edit it?
No. Quill is a static front-end — plain HTML, CSS and one vanilla JavaScript file — so you can edit it in any text editor and open it straight in a browser. There's no npm install, no bundler and no compile step. Just change the content, save, and refresh.
Does it use jQuery or any icon fonts?
No. Every bit of interactivity is written in vanilla JavaScript in a single guard-claused file, and all icons are inline SVG. That means no jQuery, no CDN scripts and no icon-font requests, so it stays fast and deploys cleanly even under a strict Content-Security-Policy.
How do I change the colours and fonts?
Both live in a CSS variable block at the top of the stylesheet. The palette (oat paper, soft ink, and the single restrained moss accent) and the Newsreader + Hanken Grotesk font pairing are defined as custom properties, so you can restyle the whole template by editing a handful of values rather than hunting through the CSS.
Is it responsive, and which browsers does it support?
Yes to both. It's built on Bootstrap 5's grid and scales cleanly from phones to wide desktops, keeping the reading measure comfortable at every size and using an accessible off-canvas panel for mobile navigation. It runs in all current versions of Chrome, Firefox, Safari and Edge, and effects like the scroll-reveal degrade gracefully when prefers-reduced-motion is set.
Can I connect the newsletter form to a real service?
The form ships with inline validation built in, but as a static front-end it isn't wired to a mailing provider or backend. Point its action at your own service — Mailchimp, Buttondown, ConvertKit or similar — or hook it to your own endpoint to start collecting subscribers. Quill handles the markup and validation; delivery is up to your provider.
How is this different from an image-heavy blog theme?
Deliberately so. Instead of photo cards and a busy feed, the home page reads like a book's contents page — titles, dates and reading times set with folio numbers and leader dots — so the writing leads and nothing competes with it. The single-post page is tuned entirely around comfortable long-form reading rather than showcasing thumbnails, which also keeps the template light on images.
What's included, and how does the footnote system work?
You get two pages: the book-style essay home page and a complete long-form article page (post.html). The article page includes a drop cap, pull quotes, a reading-progress bar and a floating back-to-top. Its real footnote system lets superscript references smooth-scroll down to numbered notes and back up again — proper academic-style citations, not just tooltips.
