Skip to content
Codexa
Framework: Static HTML/CSS/JSDifficulty: beginner

Multi-page blog

A plain HTML and CSS blog with a post index, two example posts, and an about page. No build step.

Four HTML pages sharing one stylesheet: a post index, two posts under posts/, and an about page. Typography-first styling with automatic dark mode via prefers-color-scheme, semantic article markup with dates, and a tiny script that marks the current page in the navigation. Adding a post is copying a file.

  • html
  • css
  • blog
  • multi-page
  • static
Use this templateMore websites templates

This preview is the template's actual file tree and source code — exactly what is copied into a new project. Codexa does not publish screenshots or mock-ups of templates; run the project to see it rendered.

Files7 files

posts/getting-started.html41 lines
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Getting started with a static blog — Field Notes</title>
    <meta name="description" content="A simple multi-page blog built with plain HTML and CSS." />
    <link rel="stylesheet" href="../styles.css" />
  </head>
  <body>
    <header class="site-header">
      <a class="brand" href="../index.html">Field Notes</a>
      <nav aria-label="Primary">
        <a href="../index.html">Posts</a>
        <a href="../about.html">About</a>
      </nav>
    </header>
    <main>
      <article>
        <p class="meta"><time datetime="2026-04-18">18 April 2026</time></p>
        <h1>Getting started with a static blog</h1>
        <p>A static blog is a folder of HTML files. There is nothing to install, nothing to build, and every page loads instantly.</p>
        <h2>Adding a post</h2>
        <ol>
          <li>Duplicate this file inside <code>posts/</code>.</li>
          <li>Change the title, date and content.</li>
          <li>Add a link to it from <code>index.html</code>.</li>
        </ol>
        <pre><code>posts/
  getting-started.html
  writing-tips.html
  your-new-post.html</code></pre>
        <p><a href="../index.html">← All posts</a></p>
      </article>
    </main>
    <footer class="site-footer">
      <p>Built with plain HTML and CSS. Edit the files in the Codexa editor and deploy to static hosting.</p>
    </footer>
    <script src="../app.js"></script>
  </body>
</html>

Dependencies

This template has no dependencies and no build step; files are served as-is.

How it runs

Framework
Static HTML/CSS/JS
Dev command
codexa-static
Build command
none (static files)
Output directory
.
Port
5173
Opens at
/
Difficulty
beginner

Projects run in an isolated sandbox with a live preview. Read the projects documentation for details on settings, snapshots and deployment.

More websites templates

View all
  • Framework: Static HTML/CSS/JSDifficulty: beginner
    Featured

    Static website

    Plain HTML, CSS, and JavaScript with no build step. Ideal for simple sites and learning.

    • html
    • css
    • javascript
    • static

    4 files

    Use templatePreview

Need the raw data? GET /api/v1/templates/static-blog returns this template with its files.

Build on Multi-page blog

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Start Building FreeAll templates