What's All This, Then?
Now that things have settled in the new site setup, it may be helpful to go over exactly what I'm doing to run a blog (or at least blog-like) site without doing a lot on the server side of things. I'm calling the whole concept RAGtag: Retro Avant-Garde (using HTML tags). The central idea of a RAG approach is to take things that have either become discarded or forgotten and create new things with them. RAG is particularly interesting in technology areas, where changes happen so quickly that people get swept up in the new fads without stopping to think whether or not it's actually better than the old technology that was around 2 or 3 generations back.
What that meant for Impossibly Stupid, my RAGtag approach, was to get down to just the essential technologies behind the modern web: a server for publishing files and a client for showing and manipulating them. No deep “stack” necessary on either side. Just the raw info, and a few tweaks to make things a bit nicer to get around and read things. You have to be willing to meet the technology half way, but if you do you'll find things can be greatly simplified compared to maintaining an overblown CMS. Here's the path I followed.
Apache + autoindex
Of course, you must start with a server. Apache is often the default, but you can select from a number of alternatives. If it just came down to serving only files, the choices wouldn't matter much. For the modern web, though, most people expect a site to have a brand or theme or visual structure that ties everything together. Often times, this is accomplished by adding extra server-side software that creates templates for pages and fetches their content from a database; all that overhead I'm specifically looking to avoid, but I'd still like the site to have a cohesive look.
Enter the autoindex feature of Apache (or similar features with Lighttpd or other popular servers). How autoindex helps us here is this: if a request is made for something that is not a file, but rather a directory/folder in the filesystem hierarchy, the server constructs a response page using a very basic type of template. It comes in 3 parts (a favorite number of Impossibly Stupid): A header HTML file, the directory file listing, and a footer/readme HTML file.
The trick, then, to get a basic template is to configure Apache to look for a header file that is common to all directories, and a footer file that contains the information specific to the “page” the directory represents. Here is a simple Apache config that accomplishes that:
Options +Indexes HeaderName /HEADER.html ReadmeName README.html
Apache even allows directories to have their own
.htaccess config files if you want to give parts of a site their own unique flavors. That wasn't needed for Impossibly Stupid at this point, but it's nice to know that there is still room to grow if necessary. Where you put things in the header and footer files is entirely up to you.
What I did for this site is to put the “frame” of pages in the header file. That means the top navigation bar, the right side bar, and actual page footer are all in that one file. It also includes the comments section, even though not every page supports commenting.
There's really little special these days about using CSS to style a web page. The main point of interest is the configuration setting that tells Apache to add it to the header of all pages:
If you bother to go looking at what I did for Impossibly Stupid, there are only a few things of particular interest. One is how the directory is hidden from (most) pages. The other is how the page footer is placed below the actual content of the page, despite being before it in the HTML itself. All and all, nothing should be too shocking here in how I've used CSS.
This just contains an old wrapper of mine for AJAX calls. Many of the other functions use it when they need to fetch additional information from the server.
This is the dumping ground object/namespace used for the site-specific code. It handles things like:
- Showing the directory if needed when the page loads or the button is clicked.
- Displaying the section/category navigation items in the header.
- Displaying the breadcrumb navigation under the header.
- Loading in individual articles for displaying in groups (like on the home page and for categories).
- Callback functions for the DirectoryManager to display some of its info in a site-specific manner.
This is my workhorse object for a RAGtag site. The idea is simple: you don't have anything running on the server side of things except Apache, so any extra data you want to exchange can be supplied by the directory information which is handily passed to the client via our use of autoindex! By convention, DirectoryManager extracts information in a few different ways.
Since the site structure mirrors the filesystem structure, the basic list of files that makes up a directory serves as a navigation path for the content on the site. If you look in IS.js, you'll see that the navigation links at the top of the page are supplied by a simple use of the DirectoryManager.
Once you start working with a list of files, you can think about interpreting them to provide additional information. For example, I have DirectoryManager set up so that if it encounters filenames in the form of key=value, it collects up all the value items under a
key property, and adds them to the
info property of the DirectoryManager object.
File Contents (info.json)
For more complex data, the natural next step is to start reading some of the files that are in the directory. For now, DirectoryManager only does that itself for one special file: info.json. As you might expect, it also takes the values it finds in that file and adds them to its
info property. For Impossibly Stupid, the only thing I'm sticking in there right now is the creation date of articles, which is displayed in the heading of their individual page.
That's the overview of the major technical bits of how this RAGtag site is put together. Here are some additional conventions that make for a better user experience.
Pages with groups of articles
For the site's home page and for articles grouped by tags (including the named categories shown at the top of the page for site navigation), I wanted a handy way to show a collection of article content all at once, but in a limited fashion by using a “pager” control. This is accomplished by using the DirectoryManager (all the articles to be displayed are in one directory) along with a function to load 5 additional articles from the list every time the View More button is clicked. I suppose I could create a more advanced pager control, but this'll do for Impossibly Stupid for now.
You'll also notice some additional styling for articles displayed in groups. The heading/title is turned into a link that goes to the individual page for the article. Comment counts are given at the bottom. Behind the scenes, relative URLs are turned absolute.
Comments and/or Polls
As discussed previously, I use Disqus for comments on individual articles. I get few enough comments, and there are definitely blogs that don't allow commenting at all, so I felt that this was an auxiliary enough feature that it was best offloaded to a secondary site.
Similarly, my use of polls is quite limited, lending to offloading that additional bit of dynamic content to another service, too. The goal of RAGtag is not to eliminate server-side processing completely, but simply to make this blog easier to maintain when it comes to the core task of putting up articles on the web.
For historical reasons, posts are organized by an assigned “node ID”, which at this point is just an arbitrary increasing number. Because these articles all exist as real items in the filesystem, though, they need to actually be referenced as such rather than as just numbers in a database. So in order to have items show up in multiple places via tagging, we need a mechanism to do that. My solution was to change the Apache config to:
Options +Indexes +FollowSymlinks
This allows me to use the Unix concept of symbolic links to take care of the cross referencing at the filesystem level. That way, you can use DirectoryManager to just handle the file lists directly. If that were not available, an alternate method might be to use one of the methods that updates the
info property, and then use that data to locate the article nodes in their main resting place.
End of the Beginning
And that's where things stand today, a little more than a month into my year long experiment in running this blog without special blogging software. Even at this point, I can already see that what I have is a lot more sensible than maintaining the nightmare that was Drupal. I have no doubt I'll stick with it for the whole of 2015, and probably even add some new tweaks every now and then to make it even better. Thinking of going RAGtag with a blog of your own? Let me know and I'll do what I can to help you out!