Quiet Bar Theme is a free, MIT-licensed Astro website template for bars, pubs, and restaurants, delivering a static one-page site with a vintage/industrial aesthetic and a JSON-powered content system.
What is Quiet Bar Theme?
Quiet Bar Theme is a static site template built with the Astro framework that transforms a single configuration file into a complete bar or restaurant website. It accepts content from src/data/site.json and optional Markdown articles in src/content/articles/, and outputs a static site with sections for header, hours, menu, gallery, location, press, contact, and footer. The template was created by Larry Xue and is available on GitHub with one-click deployment to Netlify, Vercel, and Cloudflare Pages.
Key Features
- Zero third-party dependencies — The only dependency in
package.jsonis Astro; no Tailwind CSS, no client-side frameworks, no UI or animation libraries. - JSON-based content management — All venue details (name, address, opening hours, menu, gallery, press, notices, social, SEO) are edited in one file,
src/data/site.json. - Vintage/industrial styling — Deep charcoal backgrounds with brass and terracotta accents, defined as CSS custom properties in
src/styles/global.cssfor easy recoloring. - Built-in article system — Markdown files placed in
src/content/articles/are automatically listed at/articlesand rendered at/articles/[slug], sorted newest first. - Interactive components — An accordion menu and a keyboard-supportable lightbox gallery are built with roughly 50 lines of vanilla JavaScript.
- SEO plus structured data — The base layout includes meta tags, Open Graph, Twitter Cards, and LocalBusiness structured data.
- Fully responsive and accessible — Mobile-first breakpoints, semantic HTML, ARIA labels, keyboard navigation, and high-contrast colors.
- Easy deployment — One-click deploy buttons for Netlify and Vercel, plus instructions for Cloudflare Pages;
npm run buildproduces a staticdist/folder for any host.
Who is it for?
- Bar, pub, and restaurant owners — Launch a professional online presence by editing one JSON file and deploying for free.
- Freelance developers — Use it as a lightweight starting point for hospitality client projects, with no build complexity beyond Astro.
- Venue managers — Showcase menus, hours, transit directions, photo galleries, and press reviews in a single-page layout.
- Indie site builders — Host the generated static site on any VPS or shared server by uploading the
distdirectory.
What can you do with Quiet Bar Theme?
- Venue owners: Publish a categorized drinks menu with draft, wine, and spirit sections, plus
featuredandseasonalbadges, and display your location with coordinates and transit lines. - Content editors: Add press quotes with source names and optional links, plus important notices like
NO RESERVATIONSor21+ ONLY WITH VALID ID. - Developers: Reorder or hide sections by commenting them in
src/pages/index.astro, and change the color palette or typography via CSS variables and the font link inLayout.astro. - Bloggers: Write articles in Markdown, add metadata to the articles array in
site.json, and have them automatically appear in a blog list.
How does Quiet Bar Theme work?
Create a project with npm create astro@latest -- --template larry-xue/quiet-bar (or clone the repo), run npm install, then edit src/data/site.json with your venue's content. Start the dev server with npm run dev to preview at http://localhost:4321, then run npm run build to generate a static site in dist/ for deployment. The build requires Node.js v18.20.8+, v20.3.0+, or v22.0.0+; v19.x and v21.x are not supported.
Pricing
Quiet Bar Theme is free to use — it is released under the MIT License, so personal and commercial projects are permitted. Hosting is not included, but Netlify, Vercel, and Cloudflare Pages all offer free tiers suitable for this static site.
FAQ
Is Quiet Bar Theme free?
Yes, the template is open source under the MIT License, so you can use it for free, including in commercial projects. You'll only need to pay for hosting if you choose a paid plan.
What Node.js versions are supported?
The project requires v18.20.8 or higher, v20.3.0 or higher, or v22.0.0 or higher. Versions 19.x and 21.x are explicitly not supported.
How do I change the menu or hours?
Open src/data/site.json and edit the openingHours and menu arrays. Each menu item accepts a name, description, and an optional badge value of featured or seasonal. Rebuild the site after editing.
Can I add a blog post?
Yes. Create a Markdown file in src/content/articles/, then add an object with the slug, title, excerpt, date, author, cover image, and markdown filename to the articles array in site.json. The post appears at /articles/[slug].
Does Quiet Bar Theme include a CSS framework?
No. The design is built with pure CSS and custom properties, with no Tailwind, Bootstrap, or UI component library. JavaScript is limited to a small amount of vanilla JS for interactive elements.
