CodeCalculated Web Site Launch!

For the launch of CodeCalculated, I have built an entirely new web site.  I wanted to throw together a blog post that goes in depth on the technologies that were used and a little bit about the development workflow.

The web site was built using Docpad, a fantastic, node based static site generator that I am growing to love.  Docpad takes a set of template files, static content and HTML documents which it combines to create a full fledged web site.   Your template contains all of the repeating information on your site, such as navigation, footer and stylesheets.  A document file represents each page of your site.  You just tell Docpad which template to use, provide the page content in your document and the output is a set of flattened pages ready to be pushed out to your web host.  I keep an instance of Docpad running with a web server pointed to the output directory so that I can view my changes instantly.

The front end is much more basic.  I chose Bootstrap, with some slight style modifications to achieve my look.  I tend to waver back and forth between Bootstrap and Foundation, but now I’m back to Bootstrap.  I find it much easier to customize and it contains much more of the visual elements that I like to use, such as the glyph icons.  With either framework you get a set of scaffolding components that make responsive design a piece of cake.

At the moment I do not have any true back end functionality on the web site, so I can host it easily on Amazon S3.  The process for setting up a bucket for hosting static web sites on Amazon S3 is very easy.  You can check that out here if you are interested.  In the end, it’s the most affordable static hosting solution available and you only pay for what you use.

The web site was coded entirely using Atom on the Mac.  Some graphics work was done using Paint.net.   That’s it.  A very simple tool chain for development.

Take a look at the web site at codecalculated.com and let me know if you have any feedback.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s