Your Linux Data Center Experts

Quick Start: A Static Site with Bootstrap and Mynt

By  Sean Reifschneider Date February 13, 2013

We've recently rebuilt our site and after a lengthy review and selection process, I ended up going with the Mynt static site generator.

Their provided quickstart guide is a good introduction, but it is definitely targeted toward publishing a blog rather than building a static site (which may or may not contain a blog). Hence this guide.

The Initial Virtualenv

The first step is getting an environment set up to create the site in. A search for "mynt" on our public mirror server doesn't return any packages, so it currently is going to be something you need to install by hand. In my case, I set up a self-contained virtualenv and installed it there. Here are the steps:

/tmp$ virtualenv new-website
/tmp$ cd new-website
new-website$ bash
new-website$ . bin/activate

#  For the development version:
#  (2013-02: Currently recommended by Mynt author)
pip install git+https://github.com/Anomareh/mynt.git

#  For the stable release:
pip install mynt

(new-website) new-website$ mynt init src
(new-website) new-website$ cd src

I start a new bash shell because the "activate" line updates the shell environment and I want to be able to undo it by doing an 'exit". The shell prompt changes to reflect that. We then install mynt and create the site directory called "src".

Overview: The Website "src" Directory

Let's take a look at what is in the website source directory:

(new-website) src$ ls
_assets/  _posts/  _templates/  archives/  config.yml  feed.xml  index.html

HTML files that you place in this directory will be processed as Jinja2 templates, and the static results written to the output directory.

Here is what these items mean:

The first thing we'll do is modify the configuration.

Configuration

Edit the "config.yml" file to set the configuration. In particular, we will want to set the following values:

domain: www.example.com

#  Fill these in as appropriate:
author:
description:
email:

subtitle: All Examples, All The Time
title: Example Website

#  Place blogs under /blogs/ directory
archives_url: /blogs/archives/
posts_url: /blogs/<year>/<month>/<day>/<title>/
tags_url: /blogs/tags/

Jinja Templates

If you aren't familiar with Jinja templates, you will likely need to review their Template Designer Documentation. You're going to need it soon.

Default Theme

Mynt includes a default theme, with a default "index.html" that generates a blog. That index includes blog posts, so we will want to move that off into the "blogs" sub-directory:

(new-website)[2] src$ mkdir blogs
(new-website)[2] src$ mv index.html blogs

So now let's create a few simple page templates. Edit a new "index.html" and modify it to read:

{% extends 'layout.html' %}

{% block content %}
   <h1>Example Website</h1>
   Please read about <a href="services/">Our Services</a>.
{% endblock %}

Now create a directory named "services" and create the file "services/index.html" which reads:

{% extends 'layout.html' %}

{% block content %}
   <h1>Our Services</h1>
   Read about our services here, or return to
   <a href="/">Our Homepage</a>.
{% endblock %}

Page Generation

Now we need to generate the static site. Go into the top level "new-website" directory and run:

mynt gen -f src docroot

Now, if you publish the resulting "docroot" directory to a web server, you should see simple pages that link between each other. The pages should look slighly fancier than just simple HTML pages, because they are picking up the Bootstrap style:

Initial Website

These simple pages create a top page that is wrapped by the Mynt default theme. This includes a footer and a header with a menu, a site title, etc... It should look like this:

Note that the "Blog" menu item doesn't work, because it is expecting the blogs to be in the top directory. If you wanted to fix this, you could edit the "_templates/layout.html" file and change the line which builds the "Blog" menu entry to read:

<li><a href="/blogs/">Blog</a></li>

Since we are going to theme the site with Bootstrap, we're going to create a completely new layout to resolve this.

Getting Bootstrap

Bootstrap is a CSS web framework which you can use to get a nice style to your website, without having to completely develop and debug the CSS and Javascript for the theme. Additionally, there are many website themes available that use Bootstrap, and can also give you "responsive" elements so that your site behaves well on desktop, tablet and phone browsers.

To get Bootstrap, download it from the Download Bootstrap link in their documentation. This will provide you with a .zip file, which you should extract under the "_assets" directory, producing a "bootstrap" sub-directory.

Simple Bootstrap Theme

Mynt doesn't really provide a way of managing themes. This also means that it doesn't get in the way.

Let's use the Bootstrap simple template from their Getting Started Guide, and plugin a place for our page content. Edit "_templates/layout.html", and change the contents to read:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="{{ get_asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
    <link href="{{ get_asset('bootstrap/css/bootstrap-responsive.min.css') }}"
        rel="stylesheet">
  </head>
  <body>

    <!-- Header will go here eventually -->

    <div class="container">

    {% block content %}{% endblock %}

    <!-- Footer will go here eventually -->

    </div>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="{{ get_asset('bootstrap/js/bootstrap.min.js') }}"></script>
  </body>
</html>

In particular note the "get_asset" references, which are Mynt references that provide the path to the "assets" directory in the generated pages.

This "layout.html" gets applied to all pages you create in the "src" directory, which declare that they "extend layout.html" as we did in our example pages.

Bootstrap and extract the zip file in the "_assets" directory with "unzip bootstrap.zip" from the "_assets" directory.

Site Pages

This will produce a very simple looking page, though it does include the Bootstrap theme, it just isn't very apparent at the moment. It will look like this:

A Little Fancier

Now let's add a bit of a menu and footer... Go back and edit "_templates/layout.html". Before the "div", where the HTML comment about the header is, add this:

<div class="navbar navbar-inverse">
   <div class="navbar-inner">
      <div class="container">

         <button type="button" class="btn btn-navbar" data-toggle="collapse"
                  data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>

         {#  Site title  -#}
         <a class="brand" href="{{ get_url('/') }}">{{ site.title }}</a>

         {#  Menu  -#}
         <div class="nav-collapse collapse">
            <ul class="nav">
               <li><a href="{{ get_url('blogs/') }}">Blogs</a></li>
               <li><a href="{{ get_url('services/') }}">Services</a></li>
            </ul>
         </div>
      </div>
   </div>
</div>

Then, before the "</div>", where the HTML comment about the footer is, add these lines:

<footer>
   <p class="pull-right">
      <a onclick="scrollToTop();return false;" href="#"><i
      class="icon-arrow-up"></i></a>
      <a href="#">Back to top</a>
   </p>
   <p>&copy; {{ none|date('%Y') }} example.com, All Rights Reserved
      &middot;</p>
</footer>

Now, rebuild the pages with "mynt gen -f src docroot", copy the docroot to your web server and you should see results like:

Now, all pages on the site have this menu and footer, they adapt in size to mobile and tablet sites, include a copyright that includes the year dynamically updated when you regenerate the site, and has a javascript link to the top of the page. For example, on a tablet the menu or phone the menu is hidden until you click on the boxes to reveal it:

Where To Go From Here

Now that you have a basic template, you probably want to expand it. You could either look for an existing free template and plug it in to the layout.html like we have done here, or you may wish to start expanding the site contents by creating pages and formatting them. To do this, you will probably need to read the Bootstrap tutorial and learn about what it provides for styling the content of your sites. There are also examples in the documentation which demonstrate some options for page layout.

Shameless Plug

tummy.com has smart people who can bring a diverse set of knowledge to augment your Linux system administration and managed hosting needs. See the menu on the upper left of this page for more information about our services.

comments powered by Disqus