Installing Jekyll on Windows [Update]

Here are some documented notes on getting Jekyll installed and running with Ruby 2.0 on Windows.

Initial Setup

1. Install Ruby. I recommend installing to C:\Ruby to avoid having a path with spaces (otherwise you'll get errors later in the setup process).
2. Grab the DevKit and extract to somewhere permanent with no spaces in the path (Ex. C:\DevKit). Make sure to get the correct version for your system's architecture (32 or 64 bit).
3. Update your system path to include the DevKit build tools (Control Panel > System > Advanced system settings > Environment Variables > [Edit] Path).
4. Add the path to both /bin directories like so: C:\DevKit\bin;C:\DevKit\mingw\bin; otherwise Ruby will throw an error when building native gems.

Setup the Ruby DevKit (Wiki)

5. Open a terminal (PowerShell recommended in Windows) and cd to the DevKit directory.
6. Run ruby dk.rb init to generate the config.yml file.
7. In config.yml you need to add the path to your Ruby install like so (yes, with the dash character and forward slash!): - C:/Ruby
8. Run ruby dk.rb install

Install and run Jekyll

9. Run gem install jekyll. This will build some native gems on the fly and should return successful.
10. Run jekyll new my-site. This will build a new, default Jekyll site in a new directory called 'my-site'.
11. The default .markdown file (located in /my-site/_posts) has a bit of syntax highlighted content. This will break the build process if you don't have pygments.rb installed, although, I have this gem installed and it still throws an error. Remove this bit of code in the default .markdown file for now.
12. Run jekyll build. This should build the default site without error after removing the syntax highlighted code mentioned in the previous step.
13. Run jekyl serve then go to http://localhost:4000/. You should see the following:

Jekyll default install

I've read downgrading to Ruby 1.93 solves some issues. Give that a shot if so inclined. I'm going to try and get syntax highlighting working as I can see myself using this feature quite a bit. I'll update this as I go.

I hope this helps you get Jekyll up and running!

---

Update

To get everything up and running you need the following versions of software installed:

• Ruby 1.9.3
• Python 2.7

Since Ruby 1.9.3 isn't available for Windows x86_64 I spun up an Ubuntu VM in order to build the site 100%. I'll probably use this until all the gem dependencies are met for the latest Ruby (2.0) and Python (3.3).

If you're building on Ubuntu you can safely run sudo apt-get install ruby ruby-dev to grab the appropriate versions from the Ubuntu software repos. Python 2.7 is installed by default.

Minor Browser Support

It's okay if a web site doesn't look 100% the same across all browsers.

Say whaat?!

Yes, it's true. CSS3 properties available in modern browsers will never be supported in older browsers that clients still request for support. Things like rounded corners, box shadows, gradients, custom web fonts, etc. All these things were once accomplished by non-semantic HTML and multiple HTTP requests for background images. Modern browsers today can draw these stylistic effects to the canvas easily via CSS.

Donate to a device lab near you!

There's a movement happening in cities around the world: people are donating their mobile devices, cell phones and tablets, to web/app development firms. These companies collect phones and tablets to form what is known as an "open device lab".

Clearly, Oakley doesn't care about performance

Check out this performance report on moto.oakley.com. Tested in Chrome Incognito mode (to rule out extension lag):

466 requests, 89.5 MB transferred, 51.53 s onload

To be fair, after it's fully loaded it's aesthetically pleasing, but the underlying design is poorly executed. 11 CSS requests, 19 JavaScript requests, 287 image requests! Go outside, jump on to your 3G and see if you're still interested in this product. The fact that there's even a loading screen would likely be enough for users to lose interest.

This is the absolute opposite of what we should be delivering as web developers. UX, design, front-end, back-end, architecture, we all play a part in performance in order to achieve a successful and engaging client experience.

Lazy-load AddThis, asynchronously

For some reason clients love AddThis. Yeah, it's easy to add to the page and saves time on fiddling with custom API calls, but it totally destroys page performance! Here's a trick to lazy-load it asynchronously.

Check out this Pen!