Building a personal website from scratch has several challenges, especially when you have decided not to use any blogging platform. This means that you are starting with a bare skeleton HTML file and building every post from it. You have to decide every aspect of the blog since you are quite far from the comfort of using the blogging platforms. Choosing appropriate fonts, font size and color, background color, contents of the header and footer, page width is challenging. Though using different HTML and CSS for every web page or blog post seems to be a flexible option hearing it for the first time, it's not as easy to manage as it seems. Every important design lesson learned necessitates some or the other modification to a lot of web pages. Fortunately, since this site aims to have long, elaborative posts instead of multiple small posts, it's much easier to make these modifications than otherwise.
A general and natural tendency is to use absolute URLs for hyperlinking every other post written on a blog. It becomes difficult while moving the blog posts from one domain to the other. All the URLs need to be rewritten to point to the new domain. Scripts can be written to update all the posts and dynamic approaches can also be made use of. Instead relative URLs have been used in the blog since the beginning. Thus the blog can be hosted on any domain supporting HTML pages.
Several of the design decisions are subjective and quite often momentarily-made. CSS styles, usage of paragraphs or enumerated lists, use of identifiers for hyperlinking in reference section, color choices, font sizes are some such example design decisions to name a few.
As briefly described above, although per-page styles seem to be a lot more flexibile than site-wide uniform themes, it's comparatively ver hard for content management and therefore requires proper care. Any new important lesson learned amounts to changing the styles on a lot of web pages. Therefore to support this evolving design changes, (responsive1 and minimalistic2) template HTML files with inline CSS for various themes like programming, research, linguistics have been created. These template files form the basis for every article belonging to the specific category and the style is thereafter changed based on the need and the story of the post.
Internet browsers have started offering reader view3 so that the readers of a blog or website can concentrate on the main content of the site instead of being distracted by sidebars, menubars and other oft-ignored content. On one side it shifts the whole role of replacing the distracting content to internet browsers (or ultimately the end-users), this feature also shows the growing need on the part of content producers to produce web pages with non-distracting content. To achieve distraction-free reading, sidebars have not been used on this blog at all. The menu-bars are restricted to link pointing to the homepage as well as link pointing to the other articles belonging to the same category as that of the actual one. Concerning references, instead of hyperlinking articles in the main content, enumerated links are provided at the end and numeric hyperlinked superfixes are used to point to the associated links. In addition to this, certain paragraphs are highlighted with bold faced text to support speed-reading. Sometimes pictures speak more than a very long text. Pictorial diagrams (using SVG) are also used for quick reading in addition to the hightlighted text.
Blogs and websites have replaced manuscripts, journals, personal diaries, magazines and newspapers to a very large extent. On examining ancient manuscripts, we often come across side-notes, notes crossed-over and color-highlighted text. Most of these characteristics are missing in the current generation websites. Through the use of version control, I am trying to achieve an experience similar to reading ancient books and manuscripts. Version control retains every change documented as well as timestamped. Frequent writing and commits with appropriate commit messages document the corrections as well as simulate side-notes.
Books have become integral part of our everyday lives for the last couple of centuries. Everyone is familiar with the terms associated to a book: books consisting of several chapters, every chapter consisting of several sections and subsections. Every (sub) section consisting of several paragraphs. Even though HTML doesn't have specific tags for specific tags for specifying books, chapters, sections and subsections, all of them have been simulated since the inception of HTML. Paper-printed books are limited in nature since once published and sold, one cannot add new content to it (to make it ulimately available to the purchaser) until a new edition is published with the desired content. Content has been created in this blog keeping a book-like format in mind. Every post (also referred to as a story) is like a chapter. Several chapters around a similar topic are coupled together to form a book. Both chapters and books can evolve. New chapters are added. Chapters or post form evolving story format, i.e., content is added, removed or modified based on the new developments of the story. All these changes are tracked by the version control.
I am using basic text editor instead of HTML-specific editors that can auto-correct and auto-suggest various HTML tags. Using just a basic text editor often gives surprising HTML pages arising out of human-errors usually taking place by omission of closing HTML tags. Sometimes these errors don't pop-up on the resulting page, thanks to the modern internet browsers that can auto-correct these errors.
Working on this site has been a very long ongoing lesson. A very great deal has been learned while building the site primarily from the mistakes.
More information
References