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
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
-
- themes/tutor-02/layouts/partials/site-head.html
- gitlab.com/…/layouts/partials/site-head.html
<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.
-
- themes/tutor-02/layouts/index.html
- gitlab.com/…/layouts/index.html
{{ 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.
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">
© {{ now.Year }}.
</footer>
</body>
</html>
Server Output: Browser
Open in your favorite browser. You should see, layout in color, by now.
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
-
- themes/tutor-02/layouts/_default/baseof.html
- gitlab.com/…/layouts/_default/baseof.html
<!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.
-
themes/tutor-02/layouts/index.html (homepage)
-
- themes/tutor-02/layouts/_default/single.html
- gitlab.com/…/layouts/_default/single.html
$ 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>
Partial: Footer
- themes/tutor-02/layouts/partials/site-footer.html
<footer class="container-fluid bg-dark text-light text-center">
© {{ now.Year }}.
</footer>
Partial: Javascript
It is just an empty template.
-
- themes/tutor-02/layouts/partials/site-scripts.html
- gitlab.com/…/layouts/partials/site-scripts.html
<!-- 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.
Default: List
We should also change the list
-
- themes/tutor-02/layouts/_default/list.html
- gitlab.com/…/layouts/_default/list.html
{{ 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.
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
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.