patrickcullen.com

Blog

Create a Blog with Middleman

Middleman is a static site generator. Static sites are fast. Static sites are harder to hack. This post explains how to create a static blog using Middleman and Casper. The following instructions assume you are working on a Mac with Ruby installed. If you run into trouble, detailed documentation for installing can be found at https://middlemanapp.com/basics/install.

Install Middleman

gem install middleman

Create a middleman project with the Casper theme:

middleman init -T danielbayerlein/middleman-casper casper

What is Casper? Casper is the default theme for a fancy node.js blogging platform called Ghost. An industrious German fellow ported it to Middleman. Danke. His terse instructions for tweaking are here: Middleman Ghost Theme README.md.

Run the development server with:

middleman server

and connect to it in your browser with http://localhost:4567

Configure Casper Theme for Middleman

Change the blog name and author. Add a couple pages

Open casper/config.rb:

config[:casper] = {
  blog: {
    url: 'patrickcullen.com',
    name: 'patrickcullen.com',
    ...
  },
  author: {
    name: 'Patrick Cullen',
    ...
  }
  ...
}
Add a new font

Head over to Google Fonts and find yourself a font. Update the layout to load the font. Open source/layouts/layout.rb and add:

%link{
    rel: :stylesheet, 
    type: 'text/css', 
    href: '//fonts.googleapis.com/css?family=Special+Elite'}

Style page-title to use new font in stylesheets/application.css.scss

h1.page-title {
  letter-spacing:1px;
  font-family: Bangers;
}
Update the header background color.

Add the following to application.css.scss to create a red yellow gradient instead of the light blue.

.no-cover.main-header {
  background: blue; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, blue , yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, blue, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, blue, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right bottom, blue , yellow); /* Standard syntax */
}

Use header site-wide

The Ghost theme only uses the header on the index page, so we will add it to a partial and use it on the posts page. This will break the ‘cover’ functionality.

Create source\shared\_header.haml and add

%header.main-header{cover}
  %nav.main-nav.overlay.clearfix
    - if blog_settings.logo.present?
      %a.blog-logo{href: home_path}
        = image_tag blog_settings.logo, alt: blog_settings.name
    - if blog_settings.navigation
      %a.menu-button.icon-menu{href: '#'}
        %span.word Menu
  .vertical
    .main-header-content.inner
      %h1.page-title= blog_settings.name
      %h2.page-description
        %a{href: "/"}= "Blog"
        |
        %a{href: "/projects"}= "Projects"

  %a.scroll-down.icon-arrow-left{href: '#content', data: {offset: '-45'}}
    %span.hidden Scroll Down

Open source\index.html.haml and replace the above with:

= partial('shared/header')

Add the same to source\layouts\post.haml

%body{class: "#{page_class} nav-closed"}

  = partial('shared/navigation')  # <--- ADD

  .site-wrapper
Add your first post
Add a Projects Page
navigation: {
  "Blog" => "/"
  "Projects" => "/projects" # add source/projects.html.haml
}
Add an icon
Build the site
Deploy the site using the middleman-deploy gem and rsync over ssh.

Add the following line to Gemfile

gem 'middleman-deploy', github: 'middleman-contrib/middleman-deploy', branch: 'master'

And run bundle install to update your installed gems.

Next, add deployment info to config.rb:

  activate :deploy do |deploy|
    deploy.deploy_method = :rsync
    deploy.host          = 'socrates@example.com'
    deploy.path          = '/var/www/example.com'
    deploy.clean = true 
    ...
  end

Issues to be aware of at the time of writing (2016-03-20):

  • Issue 115 - The most recent version of Middleman (4.1) isn’t compatible with the most recent version of middleman-deploy gem. However a fix has been added to the middleman-deploy code which use by telling our Gemfile to pull from the master branch instead of looking for a published gem (see above).

  • Issue 79 - There is also a bug, the 'deploy.user’ parameter is ignored. The work around is to add your user to the host paramater (see above).