<p>I finally redesigned my site and moved it over to a static site generated using <a href="http://middlemanapp.com/">Middleman</a> and hosted using <a href="http://pages.github.com/">Github pages</a>. I thought I would share a little bit about my process in case it helps anyone else going through the same thing.</p>
<p>You can find <a href="https://github.com/juliepagano/juliepagano.com">the repository for my project on Github</a>. Feel free to use it as a detailed reference for what I did, but don't judge too harshly for the code quality. This was something I slapped together during some spare time, and it is not a good example of best practices.</p>
<h2 id="background">Background<a aria-hidden tabindex="-1" class="anchor before" href="#background"><i class="fas fa-link"></i></a></h2>
<p>Previously, my site lived on a locally hosted server with WordPress and a poorly hacked up custom theme. This was annoying to maintain, so I rarely made changes to the design or page layouts. My server got very sad (my ultra-technical way of saying it couldn't handle the load) any time I wrote a remotely interesting blog post that got some traffic. This was probably due to my lack of a decent server, my configuration of WordPress, or some combination thereof.</p>
<p>I admit to being a WordPress novice, so this is probably on me. The thing is, I didn't really need WordPress for what I was doing. It didn't seem worthwhile to spend a lot of time learning how to configure it correctly and create a complex theme, when what I really wanted to do was quickly manage my design and focus on writing. Enter static site generators.</p>
<h2 id="picking-a-static-site-generator">Picking a static site generator<a aria-hidden tabindex="-1" class="anchor before" href="#picking-a-static-site-generator"><i class="fas fa-link"></i></a></h2>
<p>A static site generator is pretty much exactly what it sounds like. It's a tool that assists you with creating a static site. The appeal of a static site for me was keeping things very simple. No databases. No complex framework I needed to learn. I just wanted to do some simple design work, write a little front-end code, and then focus on my writing. Another appeal of a static site was that it simplified hosting requirements.</p>
<p>There are approximately <a href="https://github.com/pinceladasdaweb/Static-Site-Generators">a bazillion different static site generators</a> out there. Below is a rough prioritized list of what I was looking for.</p>
<ul>
<li>Support for blogging functionality</li>
<li>Easy setup</li>
<li>Configuration in a language I am familiar with or can pick up quickly</li>
<li>Support for my favorite front-end tools, particularly SASS and Compass</li>
<li>Decent documentation</li>
<li>Actively maintained</li>
<li>Easy to deploy to Github Pages</li>
</ul>
<p>Both <a href="http://jekyllrb.com/">Jekyll</a> and <a href="http://octopress.org/">Octopress</a> (a framework on top of Jekyll) are pretty popular and incredibly easy to to deploy on Github Pages because <a href="https://help.github.com/articles/using-jekyll-with-pages">Jekyll support is built-in</a>. I played with Octopress briefly in the past and found myself fighting the built-in theming way too much. I had ok experiences with Jekyll in the past, but I vaguely recall being annoyed with some parts of the configuration, including setting it up to use SASS and Compass. Jekyll was a reasonable option, and my plan was to use it unless I found something more compelling.</p>
<p>I found <a href="http://middlemanapp.com/">Middleman</a> to be that something compelling. It met all my guidelines (see notes below), and I had pleasant memories of working with it in the past for some rapid prototyping work.</p>
<ul>
<li><a href="http://middlemanapp.com/basics/blogging/">Support for blogging functionality</a></li>
<li><a href="http://middlemanapp.com/basics/getting-started/">Easy setup</a></li>
<li>Configuration in a language I am familiar with or can pick up quickly - in this case Ruby, ERB, Markdown</li>
<li><a href="http://middlemanapp.com/basics/asset-pipeline/">Support for my favorite front-end tools, particularly SASS and Compass</a></li>
<li><a href="http://middlemanapp.com/">Decent documentation</a></li>
<li><a href="https://github.com/middleman/middleman/commits/master">Actively maintained</a></li>
<li>Easy to deploy to Github Pages - done using the <a href="https://github.com/neo/middleman-gh-pages">Middleman Github Pages gem</a></li>
</ul>
<h2 id="setting-up-middleman">Setting up Middleman<a aria-hidden tabindex="-1" class="anchor before" href="#setting-up-middleman"><i class="fas fa-link"></i></a></h2>
<p>You need to set up a recent version of Ruby before you get started. I used Ruby 2.0.0.</p>
<p>###Install Middleman</p>
<pre><code class="language-shell">gem install middleman
</code></pre>
<h3 id="create-your-project">Create your project<a aria-hidden tabindex="-1" class="anchor before" href="#create-your-project"><i class="fas fa-link"></i></a></h3>
<p>I generated my project using the <a href="http://middlemanapp.com/basics/getting-started/#toc_7">HTML5 Boilerplate project template</a>, which sets up a bunch of basic things you will need using <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>. There are several other template options for you to choose from, if HTML5 Boilerplate doesn't strike your fancy.</p>
<pre><code class="language-shell">middleman init my_project --template=html5
</code></pre>
<p>The majority of the code you will work with is in the <code>source</code> directory.</p>
<h3 id="configuration">Configuration<a aria-hidden tabindex="-1" class="anchor before" href="#configuration"><i class="fas fa-link"></i></a></h3>
<p>The configuration for your middleman project lives in <code>config.rb</code> in the root directory. They do not have full documentation on all the things you can set in there. You can explore the settings <a href="https://github.com/middleman/middleman/blob/master/middleman-core/lib/middleman-core/application.rb#L53">in their code</a> and take a look at my configuration <a href="https://github.com/juliepagano/juliepagano.com/blob/master/config.rb">on Github</a>.</p>
<h3 id="start-the-server">Start the server<a aria-hidden tabindex="-1" class="anchor before" href="#start-the-server"><i class="fas fa-link"></i></a></h3>
<pre><code class="language-shell">cd my_project
middleman
</code></pre>
<p>Go to <a href="http://localhost:4567">http://localhost:4567</a> (or whatever port it specifies). If it works, you've got the basics set up now!</p>
<h3 id="generate-a-static-site">Generate a static site<a aria-hidden tabindex="-1" class="anchor before" href="#generate-a-static-site"><i class="fas fa-link"></i></a></h3>
<p>You can try building a static version of your site.</p>
<pre><code class="language-shell">middleman build
</code></pre>
<p>The built static code goes into the <code>build</code> directory.</p>
<h3 id="switch-to-sass">Switch to SASS<a aria-hidden tabindex="-1" class="anchor before" href="#switch-to-sass"><i class="fas fa-link"></i></a></h3>
<p>I modified the CSS files I planned on working with from .css to .scss, so that I
could use <a href="http://sass-lang.com/">SASS</a> for my stylesheets.</p>
<h3 id="use-pretty-urls">Use pretty urls<a aria-hidden tabindex="-1" class="anchor before" href="#use-pretty-urls"><i class="fas fa-link"></i></a></h3>
<p>Add the following to <code>config.rb</code> to use <a href="http://middlemanapp.com/basics/pretty-urls/">pretty urls</a>.</p>
<pre><code class="language-ruby">activate :directory_indexes
</code></pre>
<h3 id="relative-links-and-assets">Relative links and assets<a aria-hidden tabindex="-1" class="anchor before" href="#relative-links-and-assets"><i class="fas fa-link"></i></a></h3>
<p>I initially had some annoyances getting links to pages and assets working properly
both locally and up on Github Pages because the directory structure was a little different. I was
able to get it working with the configuration below and sticking with using the <a href="http://middlemanapp.com/basics/helpers/">helpers</a>
for internal links and assets.</p>
<p>I set the following in <code>config.rb</code>:</p>
<pre><code class="language-ruby">set :relative_links, true

# Build-specific configuration
configure :build do
  activate :relative_assets
end
</code></pre>
<p>The default HTML5 Boilerplate code did not use the helpers for some of the asset
links, so I changed that in <a href="https://github.com/juliepagano/juliepagano.com/commit/7c0dea6ab1b706452dcf3b4008218246f878bce2">this commit</a>.</p>
<h3 id="add-blogging">Add blogging<a aria-hidden tabindex="-1" class="anchor before" href="#add-blogging"><i class="fas fa-link"></i></a></h3>
<p>You can add blogging functionality to Middleman
using the <a href="https://github.com/middleman/middleman-blog">middleman-blog</a> gem. I
recommend reading and following the <a href="http://middlemanapp.com/basics/blogging/">instructions in the Middleman documentation</a>.</p>
<p>Once you get things set up, you can generate new articles with <code>middleman article</code>.</p>
<pre><code class="language-ruby">middleman article "The Name of My Article"
</code></pre>
<p>This will generate the file <code>source/blog/2013-11-11-the-name-of-my-article.html.markdown</code> (or some other path if you configured things differently). You can then
add tags, modify the title, and write the content of your post.</p>
<pre><code class="language-markdown">---
title: The Name of My Article
date: 2013-11-12T03:31:00.000Z
tags: middleman, blogging
---

The body of my blog post.
</code></pre>
<h3 id="add-syntax-highlighting">Add syntax highlighting<a aria-hidden tabindex="-1" class="anchor before" href="#add-syntax-highlighting"><i class="fas fa-link"></i></a></h3>
<p>I added syntax highlighting using the <a href="https://github.com/middleman/middleman-syntax">middleman-syntax</a> gem. This allowed me to add the code blocks to this post.</p>
<h2 id="deploying-to-github-pages">Deploying to Github pages<a aria-hidden tabindex="-1" class="anchor before" href="#deploying-to-github-pages"><i class="fas fa-link"></i></a></h2>
<p>If you want to use <a href="http://pages.github.com/">Github Pages</a> for hosting, you need to put your project on <a href="https://github.com/">Github</a>. Github Pages will
host static site files (e.g. html, css, js) placed in a branch named <code>gh-pages</code>.</p>
<h3 id="set-up-middleman-github-pages">Set up Middleman Github Pages<a aria-hidden tabindex="-1" class="anchor before" href="#set-up-middleman-github-pages"><i class="fas fa-link"></i></a></h3>
<p>I use <a href="https://github.com/neo/middleman-gh-pages">Middleman Github Pages</a> to handle deploying Middleman changes to my <code>gh-pages</code> branch. Follow the instructions in the readme and you should be good to go.</p>
<p>It gives you some simple rake tasks to take care of everything for you.</p>
<pre><code class="language-shell">rake build    # Compile all files into the build directory
rake publish  # Build and publish to Github Pages
</code></pre>
<h3 id="setup-up-custom-domain-name">Setup up custom domain name<a aria-hidden tabindex="-1" class="anchor before" href="#setup-up-custom-domain-name"><i class="fas fa-link"></i></a></h3>
<p>Create a file named <code>CNAME</code> in the <code>source</code> directory and put the domain (or subdomain) into the file.</p>
<pre><code>juliepagano.com
</code></pre>
<p>You will need to <a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages#setting-up-dns">configure your DNS</a> to point to Github. As of the time I wrote this, you should set up an <strong>A record</strong> pointing to <code>204.232.175.78</code>.</p>
<h2 id="designing-the-site">Designing the site<a aria-hidden tabindex="-1" class="anchor before" href="#designing-the-site"><i class="fas fa-link"></i></a></h2>
<p>Disclaimer: I am not a designer by trade, so I kind of <a href="http://knowyourmeme.com/memes/i-have-no-idea-what-im-doing">have no idea what I'm doing</a>.</p>
<h3 id="logo">Logo<a aria-hidden tabindex="-1" class="anchor before" href="#logo"><i class="fas fa-link"></i></a></h3>
<p>The only major element I carried over from the previous design of the site is the logo (designed using Adobe Illustrator). I like it as a visual representation that breaks me down to two basic characteristics: hair and glasses.</p>
<p>In this iteration of the site, I modified the logo to be sharper. I also created a 2x version of the logo that is used on retina devices. Below is a quick snippet of <a href="https://github.com/juliepagano/juliepagano.com/blob/master/source/css/styles.scss">the code</a>.</p>
<pre><code class="language-scss">$logo-img: 'logo.png';
$logo-img-2x: 'logo-2x.png';

header {
  h1 {
    background: image-url($logo-img) no-repeat;
    background-size: image-width($logo-img) image-height($logo-img);
    height: image-height($logo-img);

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      background-image: image-url($logo-img-2x);
    }
  }
}
</code></pre>
<h3 id="basic-design">Basic design<a aria-hidden tabindex="-1" class="anchor before" href="#basic-design"><i class="fas fa-link"></i></a></h3>
<p>My design process was pretty basic. I wanted something flat and simple. I redesigned the site to focus on my writing, so it was important that my design made it easy to read longform text.</p>
<p>I worked with <a href="https://kuler.adobe.com/">Kuler</a> and <a href="http://colorschemedesigner.com/">Color Scheme Designer</a> to select the basic color palette for the site. The starting color I worked from was the red shade of the hair in the logo.</p>
<h3 id="responsive-design">Responsive design<a aria-hidden tabindex="-1" class="anchor before" href="#responsive-design"><i class="fas fa-link"></i></a></h3>
<p>A lot of people get links to blog posts on their phones and other devices, so it was important to me that my writing was readable on a variety of screen sizes. I used some very basic responsive design techniques to make this happen.</p>
<p>You can see some examples of what I did by looking for the <code>@media</code> queries in the <a href="https://github.com/juliepagano/juliepagano.com/blob/master/source/css/styles.scss">primary stylesheet</a>.</p>
<h3 id="fonts">Fonts<a aria-hidden tabindex="-1" class="anchor before" href="#fonts"><i class="fas fa-link"></i></a></h3>
<p>I used <a href="https://typekit.com">Typekit</a> to provide my text fonts. The site is currently using <a href="https://typekit.com/fonts/proxima-nova">Proxima Nova</a> for regular text and <a href="https://typekit.com/fonts/source-code-pro">Source Code Pro</a> for code snippets.</p>
<p>I used <a href="http://fontawesome.io/">Font Awesome</a> for the icons on the site. It is an icon
font that is super-easy to set up and use. I <a href="http://fontawesome.io/get-started/">set up Font Awesome</a> using the <strong>Pro: Custom SASS</strong> option.</p>
<ol>
<li>Download Font Awesome</li>
<li>Extract and copy the <code>font-awesome</code> directory to <code>source/css</code></li>
<li>Set the <code>$fa-font-path</code> variable in <code>font-awesome/scss/_variables.scss</code> to point to your font directory where you put the Font Awesome font files.</li>
<li>Import Font Awesome in your stylesheet: <code>@import "font-awesome/font-awesome";</code></li>
<li>Use the icon-fonts via custom classes. There are a bunch of helpful <a href="http://fontawesome.io/examples/">examples</a> for how to do this in their documentation.</li>
</ol>
<h2 id="conclusion">Conclusion<a aria-hidden tabindex="-1" class="anchor before" href="#conclusion"><i class="fas fa-link"></i></a></h2>
<p>It was a lot of fun to play around with a little design and a somewhat new framework. I was able to get things up and running fairly quickly once I actually sat down and worked at it. It is easy to update and work with, so I feel validated in the choices that I made based on my original goals. Hopefully, you will see a lot more writing from me now.</p>
<p>I shared a somewhat random smattering of my process above. I might try to write up some additional pieces later, but I wanted to get something out now. Feel free to <a href="/about">contact me</a> or <a href="https://github.com/juliepagano/juliepagano.com/issues">file an issue</a> if you have any questions or want me to cover additional topics.</p>

/vercel/path0/content/blog/2013-11-10-site-redesign-using-middleman.md

Redesigning my site using a static site generator.

Site Redesign Using Middleman