How I built my Academic Website Using Emacs Org-mode
Table of Contents
How I built my Academic Website Using Emacs Org-mode
Now that I'm starting as an Assistant Professor at IIT-M (Dept. of Aerospace Engg.), I feel it makes sense for me to have a personal/lab website.
As a student I always appreciated it when my professors had a decently updated website online that I can use to read about his/her work. More than anybody else, my website is aimed primarily to attract prospective students. I will try to consciously maintain the website and keep it up to date so students can get an idea of the research/teaching I'm involved in.
An interesting design-thought
Don't we sometimes feel that images are a little distracting while reading something serious?
I contest that the side-margin is the best place to put images and other content that can be viewed/read without affecting the flow of the rest of the document.
Exceptions, of course, exist and this is not a universal rule, but proper utilization of margin spaces, at least on a web-interface, looks like it can improve information presentation. I plan to test this idea out on this blog!
This short blog post is not intended to be a tutorial of any merit since there are more than enough out there already. This is merely meant to be a verbose description of the thinking and process that went behind the site.
Some background
You can safely skip this section if you're only here for the technical content.
Being an Emacs user of ~8 years, I am now completely convinced of using Org-mode for "seamless" web development. Although I have decent programming skills, all of these have so far been oriented towards scientific programming and I have never cared to learn much in the way of web-development.
I started learning the basics of html-css-javascript and realized there's really nothing to learn, as far as my purposes go (hosting a simple static website) and I could just get started already. The first thing I had to understand was the whole html-css-javascript framework. Learning a little bit of vanilla javascript was helpful. And <f12> on modern web browsers (I use firefox) gives basically all we need in terms of an interactive environment for development.
A Brief Overview of my Static Site Creation Process
On top of the Makefile, being in the Emacs environment affords me so many more luxuries:
- Building the site is just two key strokes away (I've bound the
compileelisp function) - I can add images, tables, etc., and refer to them consistently (links go to the appropriate lines of the source in emacs, and to the approprate portion of the page on the browser);
- Math formatting, source code blocks, etc. etc., the list goes on.
Using the 'html5' doctype for the export lets me insert new class divs using #+begin_ and #+end_ macros.
The best part is that everything is free (as in freedom)! I don't need to outsource the maintenance of the website and it's easy enough that I can do it myself.
Since I'm not really interested in creating completely new css-javascript styling, I am using the amazing work by user fniessen on Github as a springing board. I specifically love the Bigblow theme and decided to modify the css to suit my needs appropriately.
I followed this tutorial by David Wilson (who I discovered online from his System Crafters Youtube channel) to create a basic build system using emacs. Since I ended up having to do a bunch of css and javascript editing, I wrapped up everything in a GNU Makefile that simplifies my build process even further.
I was also told that using javascript frameworks is the way people develop fancy websites these days. I didn't feel a need for this in my workflow and with the interest of keeping things simple, both for development and maintenance, I've decided against it. The only "framework" I'm using is jquery and a few plugins.
Modification of the CSS ended up being the most frustrating part of the process - thankfully a good highschool friend of mine, Arjun Ram (who works at Carmen Automotives pvt ltd.), gave me a hand at this. This is the part that felt like it really requires "knowledge" - most of everything else can be hacked at quite simply. I must also mention that I made liberal use of the LLM search perplexity which I found quite helpful for javascript. For CSS however, I got nearly nothing of value from the LLM searches.
Once this was done, I was able to use javascript quite easily to put together the features I needed. Bigblow uses jquery and a few plugins by default, so I'm sticking with this. I also found BibTeX-js, a javascript library that parses bib files to create organized and searchable lists of publications (see the output here).
The main additions I've added are:
- Some javascript code to underline occurrences of my name in the publication list;
- "lmargin" and "rmargin" classes to put content in the left and right margins (an inspiration from Edward Tufte);
- Setting up a "profile card" for students (this possibly requires more tuning);
- Transient highlighting of the target of a link once clicked.
Outro
Obviously what I have so far is very rudimentary in terms of styling, but I have a pretty organic feel about it. I hope I continue maintiaining it and it really serves the purpose I want it to.
I've created a lab website and this personal website. I hope to keep the former updated with my academic activities and use this for personal blogs and writing in general.
Last but not the least, I'm hosting the source files for the website on Github here. I hope it will help at least one more person! :-)