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.

Header

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.

Directory

In most cases, you want to hide this part of the template. It shows the raw structure of your site, and it will be used for many of the tweaks covered later, but it is bit more “techie” than most people want to deal with. Just for fun I put a JavaScript button on the sidebar for this site that will show you any page's corresponding file listing; go ahead and give it a try if you'd like.

Footer/Readme

This is where I put the actual content-content of what I want a page to be. It's the blog article itself or, for category pages, the JavaScript that gathers up and displays multiple other articles (more on that later). And in the cases where I cannot be bothered to put a file (e.g., the navigation categories), I do show the directory so that people aren't just given an otherwise empty page.

CSS

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:

IndexStyleSheet "/is.css"

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.

JavaScript

Here's where things really get interesting. Go ahead and turn off JavaScript (assuming you don't have it off by default) and see what is still left to see on the site. For the most part, individual articles will display just fine, but I made extensive use of JavaScript to improve navigation. Not extensive server-side solutions like Node.js, either, but very specific pieces of code to add dynamic content. Let's start by looking at the Apache config that adds it to the header of all pages:

IndexHeadInsert "<script type=\"text/javascript\" src=\"/scripts/Control.js\"></script><script type=\"text/javascript\" src=\"/scripts/DirectoryManager.js\"></script><script type=\"text/javascript\" src=\"/scripts/IS.js\"></script>"

Control.js

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.

IS.js

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.

DirectoryManager.js

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.

File Listing

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.

Metadata Assignments

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.

So, for example, I set a tag for this article by creating an empty file named tags=play. I can then use that information when I display the article to show a link to all the other articles that share the same tag. It's a very flexible way to supply simple data, and then you can do whatever you want with it via JavaScript.

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.

Additional Details

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.

Cross references

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!