How to create a static website with Mynt and Bootstrap?

📅 Saturday, October 24, 2015

 ✒ posts tags: 

You are maintaining a website for your business or club? You need a little more than a simple html page but you don’t need all the functionalities of a CMS such as Drupal or Joomla? Or you’re fed up with the vulnerabilities of most CMSs? If your website does not require exensive user interaction for contribution to then a static one can be a simple and effective alternative. My personal website de-brouwer.com is generated with the “Mynt” and to allow a responsive design I used Twitter’s Bootstrap framework.

This tutorial will help you getting started.

Of course we assume that you’re using Linux, and for this tutorial we will use a Debian repositories to install the necessary software.

The nice thing of working with Mynt is that you don’t have to install a webserver such as Apache on your box in order to test the website, mynt will be able to show the webpage via the command mynt serve DIR, but more about that later.

  1. first you will have to install mynt (which will will need pip)

    1
    2
    3
    sudo apt-get install python-pip
    pip install mynt
    mynt --version
    
    The last line should show output similar to mynt v0.3.1. If you would not see this, then something went wrong and you will have to refer to the relevant websites mentioned above.

  2. Second you will need a copy of Boostrap. Simply go to the download page and select the package that suits best your needs.

Open a terminal and go to the location where you want to create the website. We assume that the website is called my-site.com and that the source code will reside in the sub-directory src and the result (html) files will go in a directory docroot.

The init command will generate the structure that you need to generate the website (with some simple content), the gen command will generate that website.

In order to see the result (ope a second terminal window by typing ++. In that second window we start the built-in webserver of Mynt.

Then open any browser and go to 127.0.0.1:8080 in order to see the result. It should look like this:

This terminal window (and browser window) can be left active and next time we simply update the code, run gen and refresh the page in the browser to see the update

Now, we can go back to the first terminal window and first explore what files were created there by the init command:

These files are the following

  • archives: this directory hols an template for the blog archives.
  • _assets: this directory will hold all impages, and CSS files … and hence also our bootstrap code. In this directory you can use any structure that you like (but note that this structure will be replicted in the docroot directory).
  • config.yml: this file is in yaml-format and holds the configuration of the website.
  • feed.xml: this xml template will generates an Atom feed for your site’s blogs.
  • index.html: this is the home-page for your website
  • _posts: here you can put all the blogs that you want to publish in Markdown format.
  • _templates: this directory holds all the layout templates are. All html pages will typically declare “extend layout.html”, this will ldoad the “layout.html” that sits in this directory. There are also templates for individual blog-posts (“post.html”) and an archive page (“archive.html”).

As you will have notice Mynt assumes that you create a website that is geared towards a blog-website. While this might seem a limitation, it is actually very flexible. The other –static– parts can be generated in a simple way, and the only part that needs to be updated frequently (with automatic generation of overview pages, pages per topic, tag-clouds, etc.) is the blog-section. Of coure the logic for blogs can be re-used to function with “news” for your website.

You will also have seen that the content of the html files is in a specific format: those files are Jinja templates. Refer to the Jinja Template Designer Documentation to learn more.

Step one is of course to download Bootstrap.

  1. Go to the http://getbootstrap.com/getting-started/#download
  2. You will get a zip-file that should be extracted in the _assets directory (so that you have _assets/bootstrap/css, _assets/bootstrap/fonts and _assets/bootstrap/js)

The next step is making sure that your website uses Bootstrap. Mynt provides a flexible framework that is easy to modify. Simply edit the file _templates/page.header.html and replace the line refering to the css file with the two following lines:

Now, your website should look like this:

You will notice that this is the same content as in previous section but that the layout is dramatically different. Already now you have a website that is using Bootstrap. Now you can start experimenting and changing the content of the pages, creating new blogs, etc. However if you like a website that is less oriented towards a blog, then it is probably worth reading on.

If you indeed left the second console (with the mynt serve docroot open, it is now sufficient to recompile the website (run the command mynt -f gen src docroot in the first console) and go to the browser that has the page open and refresh the display (press F5) in order to see the results of your latest modifications.

At this point we need to make a few design choices. If you want to make a blogging site, then you can start adding blogs to your site and all is ready to go. However if you make a more general site, there is still some work. For the rest of the tutorial we will assume that we make a more general website where we will keep the blogs to be a flexible section for “news”.

The root index.html will be a showcase for the blogs. This is probably not what you need, so we move this file to a subdirectory and create another intex.html file.

Create now a new index.html file and add the following content

The menu of the website that we will build now will be simple: only contain the following items:

  1. Home
  2. News
  3. Value Offer
  4. Proof of Concept
  5. More
  6. Contact
  7. About Us

For illustration purposes, we will have all of those items referring to the main page (index.html) except News, Proof of Concept and Press. Here the power of a tool such as Mynt becomes clear: in stead of copying the menu on all pages, we simply create it once and include it in other pages: when we then compile the website, Mynt will add it to all pages. To make it even easier to maintain, we will create a variable to store the menu and its URLs. Doing so, it will be easier to make changes.

First, create a new file in _templates, that you will call nav.html and give it the following content:

Now replace the content of the file _templates/layout.html with the following content:

Then add a new file _templates/footer.html with the following content:

This footer file can contain whatever you like (you can leave it blank if you wish). Note that this file will take the author form the src/config.yml file. So if you want to use it in this shape, you will need to update the config.yml file at this point.

Of course you will have noticed that this footer contains buttons for some popular social media to share your web-page.

Now create a few files:

Of course, the precise content of these files will have to suit your own needs, but here is some inspiration.

For the index.html file:

Now, your website should look more or less like this:

Try to resize the browser window and you will see that the layout changes as the screen gets wider or narrower. For example a narrow screen will make the menu collapse in to the “hamburger” icon.

The index files in more,about and poc should have a similar setup as the index.html file in the root directory.

The minimal setup would be (for the src/about/index.html-file):

Secondary files in those sub-directories should look almost the same (although you might want to adapt the breadcrumbs). For example the src/about/philippe.html could look as follows:

This is of course just the start, all the content and many other whistles and bells might be desired/needed. You will want to add something like Google Analytics (to gain insight in how many people are reading your pages), a search functionality that is limited to your websites, a favicon.ico file, etc. Naturally, you will want to use the power of Bootstrap in each and every page, but since that is the reason why you started reading this tutorial in the first place, I assume that you know where to find information about this.

I hope that this is a good start!

Good luck!


I hope that this tutorial is helpful. Please let me know if you find inaccuracies or if you think that it can be improved.