News Blog is a static-site news blog template for the zuix.js ecosystem, generating a Google News-like Progressive Web App with swipeable section tabs, search, and bookmarks.
What is the News Blog template?
The News Blog template is a static web application built on the 11ty (Eleventy) static site generator, the zuix.js Web Starter, and zuix.js HTML-PWA. It produces a news blog interface modeled after Google News, with a view pager that supports gesture-based navigation between sections. Content is authored in Markdown with Liquid templates, and the site compiles to a deployable static web app. The template is distributed through the zuix.js project and can be scaffolded with the zuix CLI. It requires Node.js — the template description states Node.js 20, while the prerequisites section says version 14 or higher.
Key Features
- Progressive Web App — The generated site is a PWA with a background service worker and optimizations for offline use and performance.
- View pager with gestures — Sections are presented as tabs in a swipeable view pager; users can slide between news categories.
- Popup context menu — Each post card includes a button that opens a popup menu with further actions.
- Search page — A dedicated search page lets readers find posts across all sections.
- Bookmarks — A built-in bookmark feature saves posts for future reading.
- Section-based content structure — Pages are grouped into sections; each section becomes a card list featuring a preview image, title, date, and context-menu button.
- zuix CLI workflow — The
zuixcommand-line tool can start a server, wipe demo content, and add new pages.
Who is it for?
- Bloggers and independent publishers — They can set up a Google News-style site without hand-coding the UI.
- 11ty and Markdown developers — Developers comfortable with static site generators can extend the template using the same tooling.
- PWA-focused teams — Teams wanting an installable news reader with offline capability and a service worker can start from this template.
What can you do with the News Blog template?
- Create a news aggregate site — Group posts into sections (travel, technology, etc.) and display them in a swipeable interface similar to Google News.
- Write content in Markdown — Drop Markdown files under
content/and use the zuix CLI to generate new post pages. - Customize the PWA shell — Modify the service worker, layouts, and zuix.js components to change behavior and design.
How does the News Blog template work?
Start a new project with npx zuix new my-site-name -t news-blog. Then npx zuix start runs the local web server, npx zuix wipe-content removes the bundled demo content, and npx zuix add -s travel -n my-cruise-to-maldive creates a new post at content/travel/my-cruise-to-maldive/index.md.
FAQ
Is the News Blog template free?
The template is open source and available through the zuix.js Web Starter project. There is no pricing information shown, but it can be scaffolded with the free zuix npm CLI tool.
What Node.js version do I need?
The prerequisites section says Node.js version 14 or higher is required. The template description separately states Node.js 20; check your environment against the provided guidance.
How do I add a new post?
Run npx zuix add -s section-name -n post-name. This creates a Markdown file named post-name/index.md inside the content/section-name/ folder.
Does the template include a service worker?
Yes, the News Blog template is implemented as a Progressive Web App and includes a background service worker along with other optimizations.
Can I use it for desktop and mobile?
Yes, the template is described as suitable for both desktop and mobile, and the PWA approach allows installation on devices.
