A propos

Making Of

This website is generated with Hugo, a static website generator.

Bluesky is a simple theme for Hugo (can’t find the link again). It focuses on very light HTML/CSS/JavaScript structure and minimal features:

A simple full-screen slide show with back and forth buttons
Support for galleries of images, and captions under each image. Captions being detailed in the front matter of each page. My galleries are implemented as a shortcode.
Display of a Gravatar in a circle.
Use of a specific layout for the About section.

The theme was nearly what I was looking for, but in the end, I started customizing it… and then more and more.

To support French accents, I added <meta charset="UTF-8" /> to themes/bluesky/layouts/partials/head.html

To display a gallery of images:

Put all the images in a subdirectory of ./content
At the same level of images, create an index.md to create the gallery page
In this index.md, specify this to have the gallery appear. clearfloat is necessary to recover a normal layout after the gallery.

{{< gallery >}}
{{< clearfloat >}}

NB. To escape a shortcode, you need to write {{</* gallery */>}}

In the frontmatter of index.md, specify the caption of images you need a caption for

---
draft: false
date: "2013-08-25"
title: "Toulouse - Pyrénées aout 2013"
resources:
  - src: "IMG_0182.JPG"
    title: "Néouvielle"
---

To display only a few images (one small image, with a link to the bigger image, and a caption), I use my oneimg shortcode.

{{< oneimg src="img/trace-trecolpas.png" >}}
{{< clearfloat >}}

The captions of the images are automatically taken from the resource section.

I used the code from Roneo:

{{< columns >}}
First column
{{< column >}}
Second column
{{< endcolumns >}}

I added to baseof.html a Table of Contents section, based on the presence of a toc field:

        <div class="toc">
        {{ if (.Params.toc) }}
            {{ .TableOfContents }}
        {{ end }}
        </div>

The CSS is simple to center the TOC:

.toc {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 0px 0px 0px;
}

In the page we want a TOC:

---
toc: true
---