Each Field Notes post is a regular HTML file sitting in the blog/posts/ folder. Adding a new post is a two-part job: create the post file, then add a card for it on the index page. Both steps take about five minutes once you've done it once.

Step 1 of 4

Duplicate the sample post

Go to your blog/posts/ folder. You'll see sample-post.html (and this file). Make a copy of sample-post.html and rename it to describe your post. Use lowercase letters and hyphens instead of spaces — for example: 

blog/posts/cape-breton-autumn.html
blog/posts/trichrome-technique-explained.html
blog/posts/new-gear-2024.html
Tip: The filename becomes part of the URL on your live site (yoursite.neocities.org/blog/posts/cape-breton-autumn.html), so pick something short and descriptive.
Step 2 of 4

Edit the post file

Open your new file in any text editor (Notepad, VS Code, Notepad++ — anything works). Find and update these four things:

1. The page title and description (near the top of the file, inside <head>):

<meta name="description" content="YOUR SHORT DESCRIPTION HERE.">
<title>YOUR POST TITLE — Joshua Hearn Photography</title>

2. The article header (find the <header class="article-hero"> block):

<span class="label">Process</span>   ← change the category label
<h1 class="article-title">
  YOUR POST TITLE HERE
</h1>
<p class="article-meta">June 2026 · Joshua Hearn</p>   ← update the date

3. The header image (optional — remove the <img> line if you don't want one):

<img class="article-hero-img"
     src="../../images/blog/YOUR-IMAGE.jpg"
     alt="Description of your image">

4. The body text — find the <article class="article-body"> block and write your post there. The building blocks are:

<p>A paragraph of text.</p>

<h2>A section heading</h2>

<img src="../../images/blog/your-photo.jpg" alt="Caption">

<blockquote>A pull quote that stands out.</blockquote>
Tip: Images inside posts go in images/blog/. Name them something descriptive, e.g. cape-breton-fog.jpg. Recommended width: 1400px or wider.
Step 3 of 4

Add a card on the Field Notes index

Open blog/index.html in your text editor. Find the <div class="blog-grid stagger"> section. Copy this block and paste it above your existing cards (newest first): 

<a class="blog-card" href="posts/YOUR-FILENAME.html">
  <div class="blog-card-thumb">
    <img src="../images/blog/YOUR-THUMB.jpg"
         alt="Post thumbnail"
         loading="lazy"
         onerror="this.closest('.blog-card-thumb').style.background='var(--clr-surface-2)'">
  </div>
  <div class="blog-card-body">
    <span class="blog-card-date">June 2026</span>
    <h2 class="blog-card-title">Your post title here</h2>
    <p class="blog-card-excerpt">
      A short sentence or two that summarises the post.
      Readers see this on the index before clicking through.
    </p>
  </div>
</a>

Update the four highlighted values:

  • YOUR-FILENAME.html — the post file you created in Step 1
  • YOUR-THUMB.jpg — a thumbnail image (16:9, ~800×450px works well)
  • The date, title, and excerpt
No thumbnail? No problem — the onerror attribute automatically fills in a dark grey placeholder if the image is missing. You can always add the image later.
Step 4 of 4

Upload to Neocities

Upload the following files to Neocities (drag them into the file manager or use the Neocities desktop app if you have it):

  • blog/posts/your-new-post.html
  • blog/index.html (updated with the new card)
  • Any images you added to images/blog/

That's it. The post is live as soon as the files finish uploading.

Quick reference — folder structure

blog/
  index.html              ← the Field Notes listing page (edit this to add cards)
  posts/
    your-post.html        ← each post is its own file here
    another-post.html

images/
  blog/
    your-post-hero.jpg    ← header image used inside a post
    your-post-thumb.jpg   ← thumbnail used on the index card

Deleting or hiding a post

To remove a post from the index, delete its <a class="blog-card"> block from blog/index.html and re-upload that file. The post file itself will still exist on Neocities (anyone with the direct URL can still reach it) — to fully remove it, delete the file from the Neocities file manager too.

To temporarily hide a post without deleting it, you can comment out its card block by wrapping it in <!-- ... -->.

Changing the category label

In each post file, the <span class="label"> above the title is the small gold tag that says things like Process or Location. Change it to whatever fits your post — there's no fixed list.