hashbloge - single-page blogging script for static websites

[rolypolyphonic]

I figured this would be the best place to share it. Link to hashbloge 

hashbloge is a JS script that lets you create a single-page blog. What this means is that you have your blog index, which serves as a 'container' and contains all your template/design, and all your blog entries are dynamically injected into it. This means that you only ever need to change your template in one place and don't need to copy-paste any templates across blog entries or use iframes.

It uses hash links (#1, #2, etc.) so that you can permalink to your blog entries and it keeps links short and sweet.

Maybe it will be useful for somebody

[Dan Q]

That's cute; I like it.

If anybody's looking for a no-JS solution, I've sometimes used the :target trick to achieve a similar thing with only CSS:

Code

/* Show only the targeted article: */
article {
  display: none;
  
  &:target {
    display: block;
  }
}

/* When we haven't clicked a link, show the index article: */
body:not(:has(:target)) article#index {
  display: block;
}

Here's a playable demo.

[rolypolyphonic]

That's cute; I like it.

If anybody's looking for a no-JS solution, I've sometimes used the :target trick to achieve a similar thing with only CSS:

I really like using this method too! In fact, I used to use the same for my blog but I found it unwieldly over time since I'd have to put all entries on a singular webpage.

The reason hashbloge is structured the way it is is precisely so I wouldn't need to change the way my blog posts were linked back when I used this method but now lets me separate blog posts into separate HTML files so that it's easier to organise them over time

[Dan Q]

I really like using this method too! In fact, I used to use the same for my blog but I found it unwieldly over time since I'd have to put all entries on a singular webpage.

Yeah, if I were to use the CSS-only approach for a blog with lots of entries, I'd definitely want to use some kind of static site generator to do the "combine them all into a single file" step.

Just for funsies, before I started work this morning I threw together a tool that does exactly that. Here's the source code, and here's the site it outputs.

All of the posts are stored in separate files, each with metadata to provide its ID, title, and date (the dates are used for sorting, but also it doesn't-include future posts, allowing it to be used for drafts or for scheduled posts). Posts can be written in HTML or Markdown. It works without JS, and it's perfectly usable even without CSS (all the posts appear in a long page, but there are links at the top to jump to each one as well as links that go back to the top at the end of each post).

Sites can be built locally with one command (and then uploaded anywhere, e.g. Neocities) or if it's stored on GitHub then it'll automatically rebuild itself every time a page is changed.

It's ugly as hell, of course, because the CSS I provided above is the entirety of the CSS I included. But it works and might provide a basis for somebody's future experiments!

Thanks for the inspiration!