arnabocean

— by Arnab Gupta

Website Rebuild — using Octopress

June 20, 2013

I’d originally designed and built this website in the summer of 2011, and I had made it a point that I myself did all the hard yards of learning the technology and developing (and finding how others had implemented a feature) the HTML and CSS code. I stayed completely away from Javascript, mostly because I basically had no idea about Javascript. I wasn’t sure how resource-hogging Javascript was, and that was a factor, yes—but it was mostly because I didn’t want to use something I didn’t know, and I knew next to nothing about Javascript.

So that was then.

For a while now, though, I’ve been pondering a rewrite and rebuilding of the website, for a number of reasons.

  • The website was not responsive to different screen sizes. It had a certain minimum width that it required, and it always served the same webpage. In today’s world of smartphones and tablets, while it was passable, it wasn’t elegant by any means.

  • As written, it was a pain to make changes to the website. I was dealing with separate HTML pages, and making any changes meant going in manually and make changes to every single page. Tedious, and prone to error.

    I needed a way to make a change once and have it propagate throughout all my HTML pages.

  • I needed to consolidate my writing options. Let me elaborate, and let’s see how convoluted it gets.

    I already have my wordpress blog–GlobeTrekker–which I like and want to continue to maintain—not least because I have certain Google pagerank on there that I don’t want to lose.

    I had started a new blog, a self hosted wordpress blog, on this website, that I had planned would be a “science and technology” blog, separate from ‘everything else’ that I write at GlobeTrekker. But this blog was not the face, so to say, of my website.

    In trying to think of what I could/should write on my “home” page, I decided that I’d use that space to write tutorials about the stuff that I know best about—composite materials, health monitoring, and eventually, even transportation research that I work on at VTTI. I was very excited with this prospect, and managed to write three—count’em, three!—posts, in two years. (There was a reason for this, which I’ll come to.)

    The problem was that I was increasingly finding it inconvenient to write on either of my wordpress blogs. (The reasons for that are for another post altogether.) So I started yet another blog, hosted at Tumblr, that I’ve been using much more productively in the past few months.

    As you can probably start to guess, it was getting tedious and completely inefficient.

  • There was a problem with trying to write tutorial posts (mentioned above) on my home page. The problem was, every time I wrote a new post, there was quite some amount of work neeeded to just post that new material. The previous post had to find a new webpage all to itself. This page had to have links to earlier and later posts. The new homepage had to add new links to the new webpage just created.

    On top of that, every time I did this, Google’s search results went crazy. People searched on Google and found links to my home page, but of course that old content was now at a new webpage. Bad for the person searching, bad for my Google pagerank.

    Tedious, cumbersome, inefficient.

    See a pattern here?

So, in short—I needed some answers. And then recently, and finally, I stumbled upon Octopress.

In short, Octopress is a website building tool. It’s basically a Ruby program that does a number of things right out of the package.

  • Assembles pieces of code to create the required webpages and support files to build an entire website. This straightaway solves my problem of having to make the same changes across all my pages. With Octopress, I make the changes in the one place where I need the change, and Octopress incorporates that change into all the web pages.
  • Creates a blog, which is completely self-contained and self-hosted. Since it assembles everything locally, there’s no need for wordpress-style php pages on the server that handles collating pieces of content to serve a webpage.

    Octopress does it all, once, on my machine, and thereafter it’s just there, available for use.

  • It provides a default theme of its own, but of course I am free to modify the code and designs as much or as little as I want.

    This is excellent, because now I can have all my web pages, including blog pages, with a consistent design. Getting this done with wordpress-hosted blogs is a pain, and while Tumblr is much better with this, it’s still infinitely more convenient to just have to do everything once.

    The website it creates is built to be responsive to different screen sizes. I’d been reading up on @media screen CSS usage, but having this built-in of course helped a lot.

So here we are, with Octopress. What you see now is the result of the redesign and the rebuild. Here’s what has happened:

  • The front page now hosts a blog. This single blog will host the mechanics tutorials that I had mentioned (see here), and also host other pieces that I will hopefully (and am planning to) write.
  • The Tumblr remains the best place to share content that I find interesting on the internet, and I will continue using that, but mostly for sharing with the odd comment. I will try not to write longer pieces on Tumblr. However, I’ll probably cross-post whatever I write on this website on Tumblr, just to reach a wider audience.
  • GlobeTrekker, of course, remains—with the same mission statement. I don’t know how frequently I will write there, though.
  • The self hosted blog will be deprecated. I haven’t removed the files themselves yet, but the posts there have almost all been mirrorred on the new website, and I will remove the old files over time.

So that’s it. New website, new technologies.

And I’ve become much more comfortable with including Javascript on my website since before, now that I’m more confident that I know the basic HTML and CSS technologies well. There are some excellent specialized Javascript tools (such as the brilliant Modernizr and jQuery), that I’d be foolish to not use—and which Octopress, of course, uses out-of-the-box.

How do you like it? There still are improvements to be done, of course—and more of Octopress’s built-in code to be dug into, but that’ll happen over time. I’ve disabled comments for now to make for a cleaner interface, so please use twitter or email to respond.

Welcome to my new website—and happy surfing! :)