Building a website in 2012

With the recent addition of our Wish List, our new website is now complete. As mentioned in this earlier post, from an architecture standpoint, it looks nothing like the 50+ websites I’ve built over the past two decades. It took us about one person-week to develop it, from A to Z, and we learned a ton of things along the way. Here is how we did it.

Web server
The first thing that makes this website interesting is that it’s being served directly from GitHub by using GitHub Pages. To make it work, all we had to do was to create a repository with two branches, add a CNAME file at the root of our directory, and configure our DNS for the stoic.com domain through which the website is accessed. Pretty much anyone can do that, and it should not take more than 10 minutes. After that, you have a website up and running, without paying a cent more than your regular GitHub subscription. Pretty sweet deal if you ask me…

Editor
To edit the content of our pages, we’re using a local text editor (Coda in my case) and commit to GitHub using GitHub for Mac. We also added an invisible “Edit” link at the top right of our navigation bar (mouse over to make it appear). If you’re logged onto GitHub and have access to our private repository, it will take you to GitHub’s web-based file editor (powered by Ace), which is proving to be really convenient for making simple editing updates.

Static HTML
Unlike most of the websites I have developed in the past, this one is totally static. HTML5 has gotten so good (especially the CSS and JavaScript parts) that you don’t really need any server-side processing anymore for doing most of what a website should do.

Mardown
HTML is nice, but plain English is better, and this is where the Mardown syntax comes into play. And since it is directly supported by GitHub, there is no reason not to use it. In a nutshell, all our content is written using Markdown and saved into .md file which are automatically compiled into .html files by Jekyll when we commit to GitHub. It does not get any simpler than that.

Templates
Whenever we need to design layouts or add some conditional logic to be executed during the Markdown-to-HTML compilation phase, GitHub gives us the Liquid templating system, with some basic template data. It’s rather primitive (I wish tags were available for pages, not just posts), but it allowed us to do pretty much everything we wanted.

Theme
For scaffolding and theming, we used Twitter Bootstrap. This saved us a ton of time by not having to write any CSS code and allowing us to focus on content rather than presentation. Granted, the default theme we used is a bit boring, but it works, and we could build a custom one in no time by using BootTheme. We’ll do it when we have nothing better to do.

Fonts
For the fancy fonts of the logos of our open source projects, we used Google Web Fonts.

Icons
Very soon, we will also add a few icons here and there. For that, we will use Font Awesome

Maps
For maps on our Contact Us page, we’re using Google Maps. Not very original, but it works. 

Presentations
For presentations (eg. Story), we’re using Speaker Deck. It’s like a junk-free SlideShare.

Slideshows
For our slideshows, we could have used Twitter Bootstrap’s Carousel, but we decided to go with Camera instead. It has a few more options and looks awesome. And to be perfectly honest, we discovered Carousel only after we were done with integrating Camera…

Blog
As you must be realizing by now, GitHub Pages is essentially a basic Content Management System built on top of the GitHub Version Control System. And any respectable CMS must offer some kind of blogging engine, which is something that GitHub gives us through Jekyll. There again, features are rather limited, but plenty enough to get you started. This is how we built our blog.

Comments
For comments, we decided to use DISQUS, because it’s so easy to integrate, and because it’s not blocked (yet) by corporate firewalls (unlike Facebook Connect). We use it to let visitors discuss features (eg. STOIC Activities) or blog posts (eg. Welcome).

News
For managing our announcements, we went minimalist again and simply put a Twitter widget on our News page. Our Twitter account itself is syndicating news from a few sources including the sutoiku.com blog, by using dlvr.it.

Polls
For polls and ratings (like those used for our Connectors), we use the excellent Polldaddy

Registration form
For our mailing list registration form, we’re using MailChimp. Quick and easy.

Search
For indexing and searching our website, we used Google’s Custom Search Engine. It took us about five minutes to configure it and integrate it into our site. Here is what search results look like if you search for “activities” from the search box located at the top right of our navigation bar. We could get rid of the ugly ads by paying Google $100 per year, but we figured that nobody will really care, and we’d rather invite a few friends for lunch instead.

Social buttons
For all the social buttons we use at the bottom of every page for following and alongside the DISQUS box for the sharing of features or blog posts, we’re using AddThis. That way, we have support for 340 social networks with just a few lines of HTML. Can’t beat that…

Analytics
Like everybody else, we’re using Google Analytics for measuring traffic and AddThis for tracking sharing and following on social networks. We will then use AngularJS to create custom dashboards, especially for monitoring our Wish List.

Domain
To manage the stoic.com domain, we’re using Hover. This is the only thing we had to pay for…

So here we are: a week worth of work, over 80 pages, 17 great services integrated, all 100% free. No web server to manage. No complex code to write. No angle brackets to fight with. Of all the websites I built, this is by far the best, yet it was the easiest and quickest.

I love the web circa 2012!

blog comments powered by Disqus