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

index.html39 lines
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Posts — 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>
      <h1>Posts</h1>
      <p class="lead">A multi-page blog with no build step. Add a file under <code>posts/</code> and link it here.</p>
      <ul class="post-list">
        <li>
          <time datetime="2026-04-18">18 April 2026</time>
          <a href="posts/getting-started.html">Getting started with a static blog</a>
          <p>Why a handful of HTML files is still a great way to publish.</p>
        </li>
        <li>
          <time datetime="2026-04-25">25 April 2026</time>
          <a href="posts/writing-tips.html">Writing tips for technical posts</a>
          <p>Short paragraphs, real examples, and a clear takeaway.</p>
        </li>
      </ul>
    </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