Some people’s websites are static HTML files edited manually. Others use an SSG to generate the pages for them. And then there are CMSes.
For those of you using a method other than editing all the HTML by hand, what do you do? Are you an SSG user? What kind of SSG? Perhaps you’re user of a CMS? Tell me about it! Maybe you have some other crazy setup?
I started off with a Jekyll setup, but after wanting to automate and experiment with some things I built an experimental CMS. That turned out to be a glorious disaster, but I was able to quickly make a static archive of that site (which is what it’s running on now). Now I’m searching for other options. I really don’t want to hand-edit HTML because it’s a lot to copy-paste. But I also don’t really like the interfaces of SSG and having everything be textual. I have my “ideal” conception of what I’d like to do but I have no idea if that’s something I can accomplish within a reasonable amount of time.
Some people will definitely hate this, but recently I’ve been playing with throwing all my data into CSV spreadsheets, and just fetching the ones I need via ajax on the page so I can render my content with Vue.js. I kind of love it.
Each CSV file replaces a database table, so there’s one for gallery image data, one for posts, bookmarks, etc. Each row contains a reference to where the full post/image is, so that my JS can create navigation links and gallery thumbnails, and contains the title/description/creation date of each one as well. All the actual content is stored as individual files on the host / elsewhere.
There are downsides to this though. For one, it’s a JS-reliant solution, so anyone without it enabled is screwed unless you offer an alternative page. It also means downloading the entire post index to access the post list at all; you can’t easily just fetch the first 10 results. A file with 1000 rows could be ~75KB if you have a few data columns, so it’s kind of wasteful.
On the plus side, those files can be cached indefinitely so future pageloads are pretty much instant.
Couldn’t you periodically generate a smaller CSV containing the ten most recent posts from your main CSV file? On a Unix-like system, head -n 10 "${FILENAME}" would do the job.
Yeah not a bad idea at all, there’s lots of ways to optimise it I guess depending on how much you want to put into it. I’m also tempted to have a summary.json and featured.json with some handpicked favourites and extra commentary (feels like JSON is better for that stuff).
I’m also curious if I could just partially-fetch the CSV file (say, the first 1000 bytes, and then I parse as much of it as possible) but I’ve never tried that before and I’m unsure how many servers and hosts support that operation Range - HTTP | MDN
I’ve recently started using https://www.11ty.dev/ for some smaller projects, and I love it!
It helped that my previous set up was mostly based around node.js and templates, so the migration was super straightforward.
And I like how Glitch lets you host 11ty projects for free, making this a great setup for making some of my work open-source without needing for people to learn a complicated setup. (I just configure the project, and make it easy to update the content.)
I use the Zola SSG, because it requires no extra dependencies. I crafted my site’s style by copying bits and pieces from the provided themes, and I’m pretty happy about it.
This solution lets me write my posts quite easily and then build/deploy the site blazingly fast. Since I use no JS except for webring code, I need nothing more
I implement similar functionality in TSV (tab-separated values) files that I parse with awk. Using that format allows me to include post titles summaries without worrying about whether a comma in the title/summary will break the parser.
The risk of grabbing the first kilobyte of a CSV file is that you risk trying to parse a partial record.
here is where i will yet again shill for the astro framework, which is maybe the only development in web software technology in the last ten years worth being excited about
it does require some familiarity with mainstream web development environments (npm, vite, etc.), but the setup process is extremely easy, and once you’re done you’re basically off to the races. it has all the benefits of a traditional raw HTML/CSS approach but it allows you to pull components from basically any js framework (react, vue, angular, svelte, etc.) on an as-needed basis, and it makes it very easy to control exactly when and how the js on your page loads.
i use it for literally every frontend project i can. my personal site, blog, and newsletter are all astro-based, as are many of the projects i do for my clients. if you’re someone who has a site that is mostly just static html and css, astro is going to be a pretty huge productivity boost with very, very little cost. you can even just slap your existing html files in there and load them as pages (or as components within other pages) with virtually no adjustment. it’s wild.
(p.s. i am more than happy to walk folks through the process of converting their site to an astro project if they’re intimidated)
Good to know you are an Eleventy user too! We have quite a few Eleventy users, myself included, here in 32-Bit Cafe. I love Eleventy and have used it to build all my static websites since I discovered it back in April.
The fact that Eleventy is written in JavaScript means it is easy for web developers who are already familiar with JavaScript to switch to. All you need to start using Eleventy is installing Node.js.
My current setup is jekyll-admin which runs on a local server and publishes to a remote server. Setting it up the way I like was a bit of a hassle and there are a few bugs so I wouldn’t recommend it.
SSG and CMS are decoupled by “headless CMS” which emerged a little later. You can mix and match but I think the headless CMS are generally targeting organizations with IT teams and not individuals.
What is it about the SSG interface that you don’t like?
I use Hugo for my blog. It’s fast and anything I wanted to do can be done… until most recently. I got tired of looking up workarounds to the limitations of its templating system and started look into alternatives. If you’re not such a customization freak like I am and want to use an existing theme (or a simple custom one), Hugo is a great choice though.
For my newer projects I use Lume. But for my site, there are some design decisions I strongly disagree with in Lume (again, this will likely not affect you, but on my site I have some special needs) so I’m currently writing my own SSG from scratch in Deno. This is my second attempt with a custom SSG though, so maybe it won’t work. Either way I would most likely be writing a post on my blog about all this some time.
Lume also has a CMS of its own. It’s pretty sick, but I personally write drafts in Obsidian and use the live-reloading server afterwards.
SSGs have quite the overhead in terms of having to learn not just template syntax, but also learning configuration, how it expects files to be structured and that stuff. And then I often discover that I want to have features that SSGs don’t have (multiple collections, URL != file path, etc.), not to mention each templating engine is basically like a whole new programming language that may or may not have everything you need.
I’m also very image and video heavy (because I’m an animator), and having to use a text editor kinda punishes that. I recently figured out that I could hypothetically use Obsidian for editing and then just parse the whole vault through an SSG, but I found out that I need image and video elements created a very specific way, and I’d still need a good way to edit templates for things like galleries.
To be honest, I’m not wholly certain what I want right now.
I looked at Hugo briefly and it seemed interesting. I tried it for a small project, and got so frustrated with it that I just went to manually editing all the HTML pages. That was perfectly alright for that particular project since there weren’t many pages, but my website is a much larger project and could certainly use a little automation.
Just want to point out you can actually do these two features you mentioned you want in Eleventy. (See: Collections and Permalinks on Eleventy’s official documentation)
Interesting. I know multiple collections is something you can do on Jekyll, for instance.
My problem with Eleventy is that it’s Node.js. Personally I can’t stand that ecosystem for numerous reasons. However, I’d rather use that than other popular options for websites, and I think it’s perfectly okay that other people are using it.
Makes sense. My approach was to start with a minimal theme and layer some extra CSS on top of it, and so I skipped past learning the underpinnings. I also find it’s often more expedient just to write some inline HTML when there’s something I don’t know how to do in the included flavor of markdown.
I will use CLI and shell scripting if I absolutely have to. I don’t like it, but I do use it for some things (like running build commands, git clones, or using ffmpeg).
That’s fair. In my situation I have a fully custom theme simply because I like knowing the entirety of how my site is put together, which lets me make pretty much whatever changes I need to.