Arcweb’s New Website: Octopress, Bootstrap, S3 and Cloudfront

Share this:

We recently launched our completely redesigned website and wanted to share some of our experiences with the technologies used to build it. While WordPress is the king of the blogging world, it has some disadvantages, most notably that it requires a database. After a bit of researching, we decided to use Octopress.

What is Octopress?

Octopress is a ruby-based blogging platform that generates a completely static website and/or blog. They market it as a ‘blogging platform for hackers’. Now what self-proclaimed hacker wouldn’t at least try it out?

Advantages

  • It’s fast! Since everything is static, serving web pages is no problem. There is no database to query leading to reduced page load times and happier customers.
  • it uses rake For command line gurus and rubyists you know that rake executes scripts to make common tasks simple. Here’s an example:

To generate a new blog post just run the following command:

1
rake new_post["Hello World"]

After a little bit of ruby magic a new post will appear in the /source/_posts directory with some pretty yaml metadata…

1
2
3
4
5
6
7
8
9
10
---
layout: post
title: "Hello World"
date: 2013-06-06 9:00
comments: true
categories: 
author: Jimmy Lien
published: false
sharing: true
---

…and a jekyll based route /2013-06-06-Hello-World

  • Mobile First:
    We happen to be big fans of twitter bootstrap for a quick and economical responsive web layout. For most use cases, bootstrap works well with its 12 grid responsive system.
  • Markdown Support: Since we are developers, we are used to writing markdown for our github pages, generating documentation for our consulting engagements and other general geekery. Octopress is markdown-friendly making writing inline code blocks awesome! This post is written completely in markdown and I’m overflowing with delight.
  • Partials: Useful for breaking components of the site into maintainable and reusable portions of single responsibility.
  • Development Server: Running a development server is a snap. Simply run rake generate to start the development server (default development url is localhost:4000). The server listens for changes to your codebase and updates your site any time you save a file.
  • Site Generation: Once again rake shows up. Once a the site is ready to go we head to the command line and run rake preview to preview any unpublished posts. The act of running rake preview takes the code in the /source folder and generates a /public folder that can be copied
    into Amazon S3 or your choice of servers.

Disadvantages

  • Ugly HTML: This is a common problem among HTML generating apps and WYSIWYG editors. The generated HTML is not clean. Of course if you use the developer tools in your browser it’s a little bit easier, but I found myself writing a lot of tags like <!-- begin page.html --> and <!-- end page.html --> to identify where different partials started and left off, especially where there were loops and conditionals.
  • No Server: Sometimes it is nice to have a server supporting your site, but with the proliferation of APIs, you can typically find third party services to handle most things that you would hand-code on your site or you can code your own API hosted on another server that supports the site.

That is pretty much it for disadvantages. Overall, writing and maintaining the site is pretty simple. We just place the project’s contents in a git repo and run Octopress from the command line. After that we just upload the public folder contents into Amazon S3.


Amazon S3

Amazon’s Simple Storage Service provides some nice features that allow you to upload and serve a static website in minutes provided you have the content. Since Octopress generates a public folder with all of the content necessary for the site, deploying a website is really just a matter of uploading the contents of the public folder to S3. There are command line tools for S3, which I would like to configure to make deployment a single command:

s3cmd sync /public s3://your.s3.bucket/

We used the java file uploader in S3’s web interface to load all of the files for the site which was relatively painless. Just be sure to make your files public using the ‘set details’ button before starting the upload. This just ensures that the files are available for public consumption.


Cloudfront

Latency issues are a huge but often unknown problem for companies. Every second of latency can lead to reduced conversion. Thankfully, Amazon provides an easy to use solution called Cloudfront to easily cut down latency that takes just a few minutes to integrate if you have a static site running on S3. Amazon’s instructions for running CloudFront using content in your S3 bucket are very easy to follow.

Cloudfront Magic

The thought process behind cloudfront is simple. They place servers throughout the world and route requests based on the requester’s location. If you are in Europe, your request is routed to a European server rather than a North American server, massively improving latency.


Arcweb: Octopressed, Boostrapped, S3’d and CloudFronted

Combine Octopress’ static site generation and mobile first responsive web design along with Amazon’s scalable distributed storage and you get Arcweb’s site that is now much more visually appealing, responsive, and lightning fast. Have any questions to get up and running on any of these technologies? Hit us up on arcweb’s twitter account!

 

Share this:

Leave a Reply