You can add a news section to a static HTML website by fetching published announcements from a CMS and inserting them into the existing page. Plain JavaScript is enough; you do not need to adopt a framework or rebuild the whole website. If the API key must stay private, or article content must be present in the initial HTML, fetch through a server or generate the HTML at build time instead.
This article is written by the genko.me team. It uses the documented behavior of genko.me as checked on October 20, 2026, and starts with a small list of public announcements.
How does a CMS work with a static website?
The website still serves your existing HTML, CSS, and images. Editors maintain announcements in a separate CMS interface. Your page retrieves the published content as JSON and renders the pieces it needs. This separates routine content updates from changes to the website code.
The main architectural decision is when to retrieve content. A static host does not prevent you from using a CMS, but it changes which integration methods are available.
Approach | When visitors see changes | Good fit |
|---|---|---|
Browser fetch | On the next page load and API request | Adding a small section to existing HTML |
Web Components | On the next page load and API request | Using ready-made list and detail components |
Build-time generation | After a successful rebuild and deployment | Putting article content in initial HTML |
Server-side fetch | According to server and cache behavior | Keeping API credentials out of browsers |
For a small company website with a few notices, browser fetching can be a practical starting point. For a searchable publication with many article pages, generated detail pages may be a better foundation. You can combine these approaches rather than committing the whole website to one rendering strategy.
1. Create a news API and publish an announcement
Follow the quickstart to create a workspace and a list API. Use news as the endpoint, with a text field named title and a rich-text field named body. The example only displays titles, but the body gives you content to use when you add detail pages.
Create an announcement and enter its title and body.
Set its publication status to published and save it.
Issue a delivery API key restricted to the
newsAPI.Note your workspace identifier and the key.
The publication timestamp, publishedAt, is a system field. An entry left as a draft will not appear in a normal published-content list. If the list is empty, first confirm that both the status change and the content were saved.
The announcements starter is another option if you want a complete site as a starting point. It is a Next.js template, so it has a different setup from adding a script to an existing HTML file.
2. Add an announcements list with plain fetch
Save this as news.html and serve it over HTTP using your existing website server. To add it to another page, move the section and script into that page. Replace your-workspace and YOUR_DELIVERY_API_KEY with your own values, subject to the API-key conditions below.
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Announcements</title></head><body> <section aria-labelledby="news-title"> <h2 id="news-title">Announcements</h2> <p id="news-status" role="status">Loading announcements.</p> <ul id="news-list"></ul> <noscript>JavaScript is required to load announcements.</noscript> </section> <script type="module"> const url = new URL('https://api.genko.me/v1/your-workspace/news'); url.searchParams.set('limit', '5'); url.searchParams.set('orders', '-publishedAt'); url.searchParams.set('fields', 'title,publishedAt'); const status = document.getElementById('news-status'); const list = document.getElementById('news-list');
try { const response = await fetch(url, { headers: { 'X-API-KEY': 'YOUR_DELIVERY_API_KEY' }, }); if (!response.ok) throw new Error(`HTTP ${response.status}`); const { contents } = await response.json(); for (const entry of contents) { const item = document.createElement('li'); const time = document.createElement('time'); if (entry.publishedAt) { time.dateTime = entry.publishedAt; time.textContent = new Date(entry.publishedAt) .toLocaleDateString('en-US'); } const title = document.createElement('span'); title.textContent = entry.title ?? ''; item.append(time, ' ', title); list.append(item); } status.textContent = contents.length ? '' : 'There are no announcements yet.'; } catch { status.textContent = 'Announcements could not be loaded. Please try again later.'; } </script></body></html>This is a complete title-and-date list, not a detail-page implementation. It deliberately does not link titles to pages you have not created. The titles use textContent, so a title is rendered as text rather than interpreted as HTML. Rich-text body rendering is a separate concern.
The request uses orders=-publishedAt for newest-first ordering, limit to keep the home-page section small, and fields to request only the relevant fields. URLSearchParams handles query encoding. The endpoint and response shape follow the JavaScript integration guide.
Keep the loading, empty, and failure states. A broken request should explain what happened without interrupting the rest of the company website. Before shipping, try the page with one published announcement, with no announcements, and with an intentionally invalid key.
Is it safe to put a CMS API key in static HTML?
A key shipped to the browser is visible to visitors. Moving it to another JavaScript file or obscuring the string does not make it secret. Treat browser delivery as an explicit decision about what the key allows others to read and consume.
The genko JavaScript overview documents direct browser requests only when the content is already public, the key is restricted to the selected API, and you accept that a third party could consume its delivery rate allowance.
Do not expose a key that also reads unrelated APIs, a draft-preview draftKey, or management credentials. If those conditions do not fit your project, retrieve content on a server and return only the required JSON, or generate HTML during a build. The delivery API being read-only does not make every key appropriate for public distribution.
This decision also affects operational control. When several pages use a browser key, replacing an expired key means updating the deployed scripts that contain it. Keep the connection configuration in one place and document who is responsible for rotation.
Can I use Web Components for lists and article pages?
Yes. If you want reusable content-display components instead of managing each DOM node yourself, use @genko-me/wc. The HTML getting-started guide includes the import-map setup for a browser without a bundler.
Import @genko-me/wc/define to register the custom elements. Importing @genko-me/wc alone exports classes without registering them. A genko-list also needs its first result through initial, plus the fields and schemas obtained from getApiBinding(). Adding the element names to HTML does not automatically supply content or connection settings.
For details, a URL such as post.html?id=entry-id can retrieve a single entry by ID. Handle missing content, request failures, and body rendering before adding links from the list. The HTML tutorial explains pagination and the related runtime behavior.
When do published announcements appear on the site?
The fetch implementation requests content whenever the page loads. Under the normal direct-fetch setup, publishing an announcement does not require uploading the HTML again or rebuilding the site. A tab that is already open will keep its current content until reloaded; this example does not poll for changes.
Build-time fetching behaves differently. Updating the CMS does not alter files already deployed to a static host. You need a rebuild mechanism, often a webhook connected to the host's build hook. A plain HTML file cannot itself receive a webhook because it has no server-side request handler.
Additional API or HTML caches need their own invalidation policy. If you later move to Next.js, see webhooks and cache revalidation. If you prefer generated pages, building a CMS blog with Astro covers that direction.
How should I handle SEO for announcement pages?
With browser fetching, the announcement data is absent from the initial HTML response. Build-time generation or server rendering makes the content available to tools that do not execute JavaScript. Consider that approach when individual announcements need to be discoverable and readable outside an interactive browser.
A useful compromise is a browser-loaded home-page summary with generated article detail pages. Give each detail page its own URL, title, and description. Also decide whether old notices remain available or disappear after their useful life. These choices matter more than replacing the entire site's framework just to add a list.
FAQ
Can editors update a static HTML website without editing code?
Yes. Once the API integration is in place, editors can publish announcements in the CMS. Browser fetching retrieves them on a subsequent page load.
Do I need WordPress to add a news section?
No. You can keep the existing HTML and use a headless delivery API. For broader site-management tradeoffs, see headless CMS versus WordPress.
Why is the announcements list empty after publishing?
Check the workspace, endpoint, key permissions, and key expiration. Confirm that the entry's published status was actually saved.
Can I count article views without cookies?
Yes. genko can associate view counts with entry IDs. See cookieless article page views for the distinction between page paths and article counts.
Sources
Checked October 20, 2026.