Neocities Brutalist Bento

A starter personal site for Neocities: uneven bento boxes, retro-brutalist CSS, and a tiny blog that reads markdown from /blog.

No build step. No npm. Upload the folder and edit the files.

Quick start

1. Replace every YOURNAME with your Neocities username (and fix the email links).
2. Edit the About / Links / Now / Projects boxes in index.html.
3. Tweak colors at the top of css/style.css.
4. Upload everything to Neocities (drag-and-drop or the CLI).

Places that still say YOURNAME:

• index.html (title, meta, Open Graph, JSON-LD)
• post.html (same)
• js/blog.js (SITE_ORIGIN and AUTHOR near the top)
• robots.txt
• sitemap.xml

Change colors

Open css/style.css and edit the :root block:

:root {
  --bg: #d4cfc4;
  --ink: #0a0a0a;
  --paper: #f3efe6;
  --accent: #c43c00;
  --odd: #1a3a2a;
  /* ... */
}

That's enough for a whole reskin.

Add or remove a bento box

1. In index.html, copy a <section class="box box--something">...</section> (or delete one).
2. In css/style.css, under BOX SIZES, set how wide/tall it is:

.box--something {
  grid-column: span 4; /* 1-12 columns */
  grid-row: span 2;    /* how many row tracks */
}

Also add matching rules in the @media (max-width: 800px) and @media (max-width: 520px) sections so it doesn't break on phones.

The grid is 12 columns on desktop. Boxes are intentionally different sizes, not a tidy equal grid.

Blog posts

1. Create a file like blog/my-post.md (markdown).
2. Add it to blog/posts.json (newest first works well):

[
  {
    "file": "my-post.md",
    "title": "My post title",
    "date": "2026-08-21"
  },
  {
    "file": "hello-world.md",
    "title": "Hello from Bento",
    "date": "2026-08-20"
  }
]

3. Optional: add a <url> entry in sitemap.xml for the new post.

The homepage list and post.html?p=my-post.md are powered by js/blog.js. If JavaScript is off, visitors can still open the raw .md files under /blog.

Supported markdown: headings (# ## ###), paragraphs, bold, italic, code, links, lists, fenced code blocks, blockquotes, horizontal rules.

SEO

Already included:

• Semantic HTML landmarks
• Unique titles + meta descriptions
• Canonical URLs, Open Graph, Twitter cards
• JSON-LD (WebSite + Person on the home page; BlogPosting updated on post pages)
• robots.txt and sitemap.xml

After you set your real domain, submit the sitemap in Google Search Console if you care about that.

File map

index.html      bento homepage
post.html       single post view
css/style.css   theme + layout
js/blog.js      post list + markdown render
blog/posts.json post index
blog/*.md       your writing
robots.txt
sitemap.xml

License

Do whatever you want with this starter. It's your site now.