vertner.net

Learning How to Octopress

Watch out! I’m armed and dangerous!Watch out! I’m armed and dangerous!

I haven’t updated this blog in a few days because the first few posts were – to an extent – about giving me some content to play around with. Frankly, I have very little idea what I’m doing and I wanted to see what different colors and layouts would do; something that’s pretty hard with no posts or pictures. So far, I have been pretty impressed with Octopress and all of its capabilities. Brandon’s initial set-up instructions and basic how-tos are a great start without providing a lot of hand-holding. Building and uploading a site via rsync commands couldn’t make it any easier to get a full blog up and running in under twenty minutes – with some caveats.

What is Octopress, really?

Most modern web sites are actually dynamic pages – meaning that the content presented is not written that way. Many older web sites ran on older hardware and serving through small pipes; efficiency meant everything. They were very similar to newspapers, where the whole thing is pre-generated and sent to you in a simple static format. Most modern sites serve up a basic framework that calls upon multiple other files (stylesheets, scripts, databases, etc) to actually present what appears to be a static page. It takes a lot more server muscle and a bit more bandwidth, but generates some fantastic interfaces. Octopress, and its parent project, Jekyll, actually create a series of fast-loading static pages that look and interact similarly to the dynamic sites built over popular frameworks like WordPress. Since Octopress is all static pages, it doesn’t need PHP scripting or a SQL database. This speeds up access and allows the server to run quickly on more limited systems. As an added bonus for this simplicity, it’s that possible fewer security holes to patch! The only installation you really do for Octopress are the few things you install on the computer(s) you’ll be editing on.

A wealth of information!A wealth of information!

Getting started

Brandon’s Octopress Documentation is a really great start. He covers everything from installation to several hosting options. He appropriately emphasizes that it’s a platform for hackers. This doesn’t mean that it’s not approachable, but you should feel at least a little comfortable in a Linux/OS X terminal running shell commands and prepared to do some of your own exploration into the various files that make Octopress’ magic work. If you normally run Windows, an easy way to get around this is to set up a persistant bootable Linux (elementaryOS, Ubuntu, or Mint are all consumer-ready and user-friendly variants) thumb drive and store all of your Octopress files there. Install Git, Ruby, and a couple of dependencies then tweak a couple of settings and you’re ready to deploy your site to your host. I use rsync and it couldn’t be easier.

Now what?

To really edit and modify Octopress’ default them, you need to understand how it builds your static pages. If you recall that Octopress takes all of the dynamic building blocks of your page and smashes all of the right parts together before uploading them to the server as static pages. There are two main directories: sass and source. sass contains all of your stylesheets using Sass, a derivative language of the popular CSS. source contains all of your HTML, javascript, blog posts, etc. To make it extremely easy, all of your actual content is stored (by default) in simple Markdown, making it extremely quick to write and upload new pages. Both of these directories will have a custom folder that – when changed – will supersede any defaults in the layout and design. Sass keeps its custom folder right inside of the main sass directory, while source/_includes/custom will house the other. Most of the files contained within have a lot of great commented-out files to investigate and experiment with. As I learn more, I hope to discuss them in greater detail!

Comments