Static Website With Hugo

Hugo is one of the most popular open-source static site generators out there.

Bare Bones Setup

Basic Templates

Base Layout

This is used as starting point for pretty much all other pages and should take care of the most generic boilerplate. The template below includes basic responsiveness configurations and very minimal styling.


<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode  }}" dir="ltr">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="{{ "favicon.ico" | relURL }}" type="image/x-icon">
	<title>{{ .Title }}</title>
	<meta name="description" content="{{ default .Summary .Description }}">
	<style type="text/css">
		html { padding-left: calc(100vw - 100%); }
		body {
			margin: 40px auto;
			max-width: 800px;
			line-height: 1.6;
			font-size: 18px;
			font-family: 'Inter', Roboto, Arial, sans-serif;
			color: #444;
			padding: 0 10px;
			overflow-wrap: break-word;
		h1, h2, h3 { line-height: 1.2; }
		p { text-align: justify; }
		img { display: block; margin: auto; max-width: 100%; height: auto; }
	{{ block "head" . }}{{ end }}
  {{ block "main" . }}{{ end }}

Adding Web Sign-In

Using RelMeAuth for basic verification with e-mail and IndieAuth for OAuth token negotiations.


<link rel="me" href="">
<link rel="authorization_endpoint" href="">