Grain Clean Blog Theme

Clean Blog is a fully-responsive blogging theme with easily managed Markdown-driven posts, customizable home and about pages, and PHP-driven contact form.

DOWNLOAD
Fork on GitHub

How to

Customize the Navigation Bar

By default, the navigation bar contains links to four pages: Home, About, Sample Post and Contact. The user can either edit/remove the existing navigation links by modifying the /content/_site/header.yml file or add a new one. The latter can be done by creating a new page using the built-in create-page command and configuring a link to it:

 ./grainw create-page "/my-page.html" "My Page Title"

In order to add a link to the navigation bar, the name (link title) and the link (link URI) properties have to be added to the site header configuration which is located in the /content/_site/header.yml file:

1
2
3
4
5
6
7
8
9
10
# ...
 sections:
    - name: Home
      link: /
    - name: About
      link: /about.html
    - name: Sample Post
      link: /blog/posts/sample-post/
    - name: Contact
      link: /contact.html
Add Blog Posts

The Clean Blog theme provides the built-in create-post command for adding a new blog post entry:

./grainw create-post "My Post Title"

As a result of executing the create-post command, the file with a name like 2017-04-10-my-post-title.markdown will be added to the /content/blog/posts/ folder. The create-post command only takes care of setting default values in the post header. Open the file to provide the blog post content and customize its metadata in the YAML header. You can specify the author name/email/link, header image, post creation date, etc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
layout: post # Layout name (should not be changed)
title: "My Post Title" # Post title
subtitle: "My Post Subtitle"
image: post-bg.jpg # Background image for post header
date: 2017-04-02 15:27 # Post creation date
author: John Doe # Post author name
author_email: johndoe@somemail.com # Author email
author_link: www.johndoe.com # A link to the author's website
# Indicates whether the post is displayed
# in the generated HTML.
published: false
---
Markdown content goes here...
Customize Pages

Every page of the theme corresponds to the html file in the /content folder. The exception are blog posts which are represented by Markdown and Asciidoc files in the /content/blog/posts folder. For example, in order to change the heading of the "About" page, the user has to edit the heading value in the /content/about.html file:

1
2
3
4
5
6
 ...
 # Updating this one will chage the heading
 heading: About Me
 # And this one will change the text that goes below
 subheading: This is what I do.
 ...

Also, the theme has a global configuration stored in YAML files in the /content/_site folder. The configuration is shared among all the site pages, so you can set site-wide properties there. You can find an example of how this can be done in the "Customizing the Navigation Bar" section of this page.

Configure the Contact Form

The contact page that allows to send emails to the website owner. This page can be accessed via the "Contact" navigation link. The source code of the PHP script for sending emails can be found in the /theme/mail/contact_me.php file. The recipient email address can be set in the blog.contact_email configuration property of the SiteConfig.groovy:

1
2
3
4
5
6
7
 blog {

     /**
      * An email, where a mail from a contact form will be sent.
      */
     contact_email = "your@email.com"
 //...

Please note that some web hosting providers do not allow emails to be sent via the contact form to the mailboxes hosted by public mail providers like Gmail or Yahoo. So it's recommended that you configure your site with a mailbox hosted on the private domain. In order to send emails via contact form, your site must be deployed to a web hosting, with the PHP ecosystem properly installed and configured. By default, the /theme/mail/contact_me.php script have to be available under the {site.url}/mail/ URL.

To find out how to open, preview and deploy the theme please read the documentation.