FORMAT UNDER CONSTRUCTION

How did I create my blog and poems pages?

Most people recommend using static site generators, linking to an external blog, or using an iframe to embed your blogs. However, these solutions felt like they ruined the "spirit" of Neocities for me personally. I felt like this wasn't too challenging of a problem to solve myself, plus I'm always doing it the right and easy way at work (libraries) - so I wanted to just do my own implementation, even if it's a bit scuffed. You'll notice I did use an iframe for my Guestbook, because that just seemed too annoying to implement myself. So I'm not a purist or anything. I wanted something I could write myself, that's somewhat easy to maintain. I didn't want to have everything just typed into the HTML file, or manually import each file from a folder.

Ideally I will implement my own pagination and filtering at a later date. But here's what I currently have to load my blogs on to the page. For my poems, all I did was duplicate and change file names.

Pre-requisites:

Some Markdown knowledge to format your blog post (it's very easy, don't worry).
Optionally, some CSS knowledge to style your blog. The basics are very simple, but it can become complicated when it comes to positioning. You likely won't be doing anything too advanced for this tutorial though.
In order to render Markdown nicely on my site, I used Zero-md to create a custom element to contain it. At the bottom of your HTML file, but within the body, add this script tag:
```
<script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script>
```
On your HTML page, add a div with id="blog" so that our JS has somewhere to select and insert our blogs into.

Instructions:

To start, some organization. I created a folder called js, another folder called blog, and if you don't already have one, a css folder
Next, I created a couple test blogs in the blog folder, such as filename.md and filename2.md. Be sure to fill them with some random content for testing!
In the blog folder, I created a file called blogList.json. This is because JS doesn't have access to scan a directory (security reasons), we will use this file to maintain a list of all our blogs and their locations. We'll use this file as a reference for our JS script. Also, if you're wondering what a JSON file is, it's just a universal format to store data. Here's what blogList.json looks like:
```
[
    {
      "title": "Blog Title",
      "location": "blog/filename.md",
      "date": "2025-06-25",
      "tags": ["growth", "life", "whatever you want"]
    },
    {
      "title": "Blog Title 2",
      "location": "blog/filename2.md",
      "date": "2025-06-25",
      "tags": ["whatever you want"]
    }
]
              
```
Note: The main thing we require in this is the location, but you can see there's some extra metadata I've added. This is because I hope to add sort/fitlering by date or category at some point, so it's better to plan ahead and maintain this data early and not need to add it in later.
I wanted to style the Markdown to my own style, so I added a new stylesheet in my css folder called blog-markdown.css. This step is optional, as zero-md comes with some default styles, but if you do not create a stylesheet you should remove the link to it in the JS code I post next.

Next I added file in the js folder, called loadBlog.js. This will add the blogs to our HTML page. I wrote this code:


(function () {
  'use strict';
  
  // gets a list of my blogs within the blog folder, then loops through them
  fetch('../blog/blogList.json')
    .then(response => response.json()).then(data => {
      // sorts the blogs to show the newest first
      data.sort((a, b) => new Date(b.date) - new Date(a.date))
      // creates the html elements we want to render
      // one of which is the special one for rendering Markdown files
      // additionally adds a css stylesheet specifically for the Markdown 
      var blogs = ""
      data.map((blog) => {
        blogs += `<div class="blog-container"><zero-md src="${blog.location}"><template><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown.min.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css" /><link rel="stylesheet" href="../css/blog-markdown.css" /></template></zero-md></div>`;
      });
      // gets a div that we've given the id of 'blog' to
      // then sets the interior of that div to the html elements we generated above
      document.getElementById('blog').innerHTML = blogs;
    })
    // if there's an error during any of the process above, log it to the console
    .catch(error => console.error('Error parsing blogs', error));
})();

Note: See where I've added class="blog-container"? Use that in your stylesheet to change the look of your entries in combination with the Markdown elements.

Finally, add this script tag above the zero-md script we added before (bottom of the HTML file, but within the body)
```
<script src="js/loadBlog.js"></script>
```

Hope you found this useful!

If you ran into any trouble, or something didn't work - don't hesitate to leave a comment in my guestbook and I'll update the page or help you troubleshoot. Some of the formatting or copy/pasting may have caused issues, but I think I have everything fixed.

Welcome to my home

FORMAT UNDER CONSTRUCTION

How did I create my blog and poems pages?

If you ran into any trouble, or something didn't work - don't hesitate to leave a comment in my guestbook and I'll update the page or help you troubleshoot. Some of the formatting or copy/pasting may have caused issues, but I think I have everything fixed.