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).