Where to Discuss?

Local Group

Preface

This article is intended for beginner.

Goal: Explain How to Use Bootstrap in Hugo


1: Preparation

Consider make an ecosystem for bootstrap first.

Create Theme

To avoid messed-up with previous tutorial, consider make a new theme.

$ hugo new theme tutor-02
Creating theme at /media/Works/sites/tutor-hugo/themes/tutor-02
$ cat config.toml
theme        = "tutor-02"
$ cd themes/tutor-02 

Copy CSS and JS

Copy bootstrap dist to themes/tutor-02/static.

$ tree
static
├── css
├── dist
│  ├── css
│  │  ├── bootstrap-grid.css
│  │  ├── bootstrap-grid.min.css
│  │  ├── bootstrap-reboot.css
│  │  ├── bootstrap-reboot.min.css
│  │  ├── bootstrap.css
│  │  └── bootstrap.min.css
│  └── js
│     ├── bootstrap.bundle.js
│     ├── bootstrap.bundle.min.js
│     ├── bootstrap.js
│     └── bootstrap.min.js
└── js

Hugo Bootstrap: Tree

Note that, you might still need map files, while debugging using object inspector.

Source: gitlab.com/…/themes/tutor-02/static


2: Add Bootstrap

Adding bootstrap is straightforward. Just add the stylesheet to site-head.html.

However, there are these artefacts, to make sure, we have the same copy.

Partial: HTML Head

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>{{ .Page.Title | default .Site.Title }}</title>
  
    <link rel="stylesheet" type="text/css" href="{{ "dist/css/bootstrap.css" | relURL }}">
</head>

Layout: Homepage

No change, very similar to previous tutorial. You can just copy from tutor-01 to tutor-02.

{{ define "main" }}
{{ .Content }}
{{ end }}

Default: Baseof Template

I’m trying to have this file, as simple as possible.

  • layouts/_default/baseof.html
<!DOCTYPE html>
<html lang="en">
{{ partial "site-head.html" . }}
<body>
  {{ .Content }}
</body>
</html>

Server Output: Browser

Open in your favorite browser. You should see, white background, by now.

Hugo Bootstrap: White Minimal


3: Layout

I put colors so you can get the idea, about this responsive layout clearly. I also put grid, just as an example.

Consider refactor by layout

Default: Baseof Template

Consider using semantic HTML5 tag.

  • themes/tutor-02/layouts/_default/baseof.html
<!DOCTYPE html>
<html lang="en">
{{ partial "site-head.html" . }}
<body>
  <header>
    <nav class="bg-dark text-light">
      <a href="{{ .Site.BaseURL }}" class="text-light">Home</a>
    </nav>
  </header>

  <div class="container-fluid">

    <div class="row layout-base">
      <main role="main" class="container-fluid col-md-8 bg-primary">
        <section>
          <h4>{{ .Title | default .Site.Title }}</h4>
        </section>

        <article class="bg-light">
          {{ .Content }}
        </article>
      </main>
      
      <aside class="col-md-4 bg-info">
        Side menu
      </aside>

    </div><!-- .row -->

  </div><!-- .container-fluid -->

  <footer class="container-fluid bg-dark text-light text-center">
    &copy; {{ now.Year }}.
  </footer>

</body>
</html>

Server Output: Browser

Open in your favorite browser. You should see, layout in color, by now.

Hugo Bootstrap: Colored Layout


4: Refactor

After minimalist bootstrap above, the next step is to create the layout. We are going to refactor

  • layouts/_default/baseof.html

Into:

  • layouts/_default/baseof.html

  • layouts/_default/single.html

  • layouts/index.html

  • layouts/partials/site-header.html

  • layouts/partials/site-footer.html

Default: Baseof Template

<!DOCTYPE html>
<html lang="en">
{{ partial "site-head.html" . }}
<body>
{{ partial "site-header.html" . }}

  <div class="container-fluid">

    <div class="row layout-base">
      {{- block "main" . }}
      {{ .Content }}
      {{- end }}

      {{- block "aside" . }}{{- end }}
    </div><!-- .row -->

  </div><!-- .container-fluid -->

{{ partial "site-footer.html" . }}
{{ partial "site-scripts.html" . }}
</body>
</html>

I put the header/footer, outside main block. So we do not need to repeatly writing header/footer in every main block.

Default: Single

Both these two artefacts.

$ cat layouts/_default/single.html

{{ define "main" }}
  <main role="main" class="container-fluid bg-light">
    <section>
      <h4>{{ .Title | default .Site.Title }}</h4>
    </section>

    <article>
      {{ .Content }}
    </article>
  </main>
{{ end }}

Partial: Header

  • themes/tutor-02/layouts/partials/site-header.html
<header>
  <nav class="bg-dark text-light">
    <a href="{{ .Site.BaseURL }}" class="text-light">Home</a>
  </nav>
</header>
  • themes/tutor-02/layouts/partials/site-footer.html
<footer class="container-fluid bg-dark text-light text-center">
  &copy; {{ now.Year }}.
</footer>

Partial: Javascript

It is just an empty template.

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

Server Output: Browser

Open in your favorite browser. You should see, non-colored homepage, by now.

Hugo Bootstrap: Layout Homepage

Default: List

We should also change the list

{{ define "main" }}
<main role="main" class="container-fluid bg-light">
  <section>
    <h4>{{ .Section }}</h4>
  </section>

  {{ .Content }}
  
  <ul>
    {{ range .Data.Pages }}
    <li>
      <a href="{{ .URL }}">{{ .Title }}</a>
    </li>
    {{ end }}
  </ul>
</main>
{{ end }}

Server Output: Browser

Open in your favorite browser. You should see, simple index with article list, by now.

Hugo Bootstrap: Layout List


Summary

So far here are artefacts for our layouts.

$ tree
layouts
├── _default
│  ├── baseof.html
│  ├── list.html
│  └── single.html
├── index.html
└── partials
   ├── site-footer.html
   ├── site-head.html
   ├── site-header.html
   └── site-scripts.html

Hugo Bootstrap: Artefacts Summary in Tree


What is Next ?

There are, some interesting topic for using Bootstrap in Hugo, such as Navigation, Header, and Footer. And also exotic page Blog and Landing Page. Consider continue reading [ Hugo Bootstrap - Components ].

Thank you for reading.