Site Re-launch in Octopress - RC Central V3

I had a bit of a journey in relaunching Rick Cogley Central, this time creating it in a static site generator over my previous tool RapidWeaver. Read on to hear the gory gory!

Screenshot showing pages unavailable in previous version of site.I’d watched the second version of this site deteriorate over a couple of years, cobwebs proliferating and junk piling up in the corners, so it was really time for a bit of a “spring cleaning”. I decided to take steps to deploy a static or “baked” style of website this time, over anything dynamic, such as a server-hosted CMS. Static site generators generally involve you writing site content as text files in your local drive in a format such as textile or markdown, where you use simple markup to simulate things like bold or italics by surrounding the words thusly: *bold* and _italics_. Then, you use a terminal command to generate the site locally while merging in the stuff that appears on every page, such as sidebars and menus and footers. Once you generate, you next deploy the site to your server, via various means, such as rsync, ftp or a git push.

The deployment step copies the static HTML, CSS and Javascript files up to the server. There are scads of static site generators these days, but due to the popularity of Github, Jekyll is a well-supported one, written in the popular Ruby language. After a lot of examining and waffling, I decided on a wrapper around Jekyll called Octopress.

Polish Needed and Found, in Octopress

You really need to be a bit of a hacker to use a static site generator, but I’m a manager these days. Luckily Octopress was complete and polished enough that I could bone up on the related technologies at my own pace. An ulterior motive was that I wanted to learn how to use git, as all the cool kids are using it. The workflow of writing a post or page in markdown, adding it to my local git repository, committing it, pushing it, and deploying it to the site, has now become second nature. Since we use them for some other reasons, I am hosting and deploying my git repository using Atech Media’s CodebaseHQ and DeployHQ services, and the site hosting proper is being done over at the rock-solid Webfaction.

I hired Paul Serous, a web developer from Ukraine, to coach me in not only the git basics and the other technologies I need to know, but also to do the heavy ruby programming that I have no time or need to learn. Paul did an exemplary job not only on those things, but really went the extra mile to adapt and apply a responsive HTML5 and CSS3 theme based on the famous and somewhat ubiquitous Twitter Bootstrap, to the site. Thank you Paul; I really appreciate your quality work, help and patience.

Parts and more Parts

A lot goes into the visual look of a site, namely leveraging CSS for visual styling, and javascript such as JQuery or what Twitter has written into Bootstrap for effects. We started with a basic theme as I mentioned, but there are a truly lot of actors playing on the stage you see now, and the current files don’t resemble what we started with at all. I’m using Adobe TypeKit webfonts, namely Freight Text Pro for the body text, Adelle for the headings, and Source Code Pro for monospace code blocks, primarily because they look good, and it means a consistent look to the site for most viewers with modern browsers (i.e. not IE 6). Also, because Font Awesome icon fonts and Glyphicons are included with Twitter Bootstrap, those too are taken advantage of in this design.

As you poke around, you might spy some Semantic HTML, while I’m using some now-well-accepted Microdata such as the Person schema, and Microformats such as hCard, with rel-tag sprinkled in around the site to keep Google’s “rich snippets” checker happy.

As I did this work, I felt more and more that we truly stand on the shoulders of giants, who did so much work in the past that we benefit from today. Thank you one and all!

Comments?

Join the discussion at my Google+ post.

—by Rick Cogley