arona/website
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Switch to Hugo from Jekyll #1

Merged
arona merged 16 commits from hugo into master 2020-07-15 10:14:26 +00:00
Conversation 0 Commits 16 Files Changed 604 +88 -92
9 changed files with 88 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 01c7818803 - Show all commits

1
content/about.md
View File

@@ -3,6 +3,7 @@ title: "About This Website"
menu:
main:
name: "About Site"
weight: 130
---
# Technology

4
content/blog/2020-07-14-go-hugo.md
View File

@@ -11,3 +11,7 @@ I've just moved the site over from Jekyll to Hugo. Why? Because I have a growing
This all spiraled from trying to finish my build system, as these things do. Now every time I push to master in my git repo, the site will be automatically built and copied in place, which was the last piece missing for a self-hosted equivalent to GitHub Pages. Win! And I only totally FUBARed Docker once in the process...
Still very much working on the webdesign and have taken a bit of a step backwards for now, but it is functional, at least. I've ditched a theme and am handmaking the CSS, which is obviously the high effort way of doing things, but if I wasn't invested in that I would still be using Github Pages!
Here's some useful posts I used in the process (as much for my reference as yours!):
* https://alligator.io/css/collapsible/
* https://barilaro.me/posts/automatic-static-site-with-docker/

17
layouts/_default/baseof.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en-GB">
{{ partial "head.html" . }}
<body>
<div class="container">
<header>
<h3><a href="/">Arona Jones</a></h3>
{{ partial "nav.html" . }}
</header>
<main aria-label="Content">
{{ block "main" . }}
{{ end }}
</main>
{{ partial "footer.html" . }}
</div>
</body>
</html>

49
layouts/_default/list.html
View File

@@ -1,34 +1,15 @@
<!DOCTYPE html>
<html lang="en-GB">
{{ partial "head.html" . }}
<body>
<div class="container">
<header>
<h3><a href="/">Arona Jones:</a> {{ .Title }}</h3>
<nav id="main-nav">
<a href="/">Home</a>
{{ $currentNode := . }}
{{ range .Site.Menus.main }}
<a href="{{.URL}}">{{.Name}}</a>
{{ end }}
</nav>
</header>
<main aria-label="Content">
<article>
{{.Content}}
</article>
<div class="contained">
<h3 style="color: black;">Posts:</h3>
<ul>
{{ range .Pages }}
<li style="padding-top: 1em;">
<a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
</li>
{{ end }}
</ul>
</div>
</main>
{{ partial "footer.html" . }}
</div>
</body>
</html>
{{ define "main" }}
<article style="padding-top: 2em;">
{{.Content}}
</article>
<div class="contained">
<h3 style="color: black;">Posts:</h3>
<ul>
{{ range .Pages }}
<li style="padding-top: 1em;">
<a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
</li>
{{ end }}
</ul>
</div>
{{ end }}

30
layouts/_default/single.html
View File

@@ -1,24 +1,6 @@
<!DOCTYPE html>
<html lang="en-GB">
{{ partial "head.html" . }}
<body>
<div class="container">
<header>
<h3><a href="/">Arona Jones:</a> {{ .Title }}</h3>
<nav id="main-nav">
<a href="/">Home</a>
{{ $currentNode := . }}
{{ range .Site.Menus.main }}
<a href="{{.URL}}">{{.Name}}</a>
{{ end }}
</nav>
</header>
<main aria-label="Content">
<article>
{{.Content}}
</article>
</main>
{{ partial "footer.html" . }}
</div>
</body>
</html>
{{ define "main" }}
<article>
<h1 style="padding-top: 2em; padding-bottom: 1em;">{{ .Title }}</h1>
{{.Content}}
</article>
{{ end }}

41
layouts/blog/single.html
View File

@@ -1,30 +1,11 @@
<!DOCTYPE html>
<html lang="en-GB">
{{ partial "head.html" . }}
<body>
<div class="container">
<header>
<h3><a href="/">Arona Jones</a></h3>
<nav id="main-nav">
<a href="/">Home</a>
{{ $currentNode := . }}
{{ range .Site.Menus.main }}
<a href="{{.URL}}">{{.Name}}</a>
{{ end }}
</nav>
</header>
<main aria-label="Content">
<article>
<h1 style="padding-top: 2em; padding-bottom: 1em;">{{ .Title }}</h1>
<p>Tags:
{{ range (.GetTerms "categories") }}
<a href="{{ .Permalink }}" style="background: black; border-radius: 0.5em; padding: 0.5em; margin: 0.4em">{{ .LinkTitle }}</a>
{{ end }}</p>
{{.Content}}
<small>Published on {{ .Date.Format "2006-01-02" }}</small>
</article>
</main>
{{ partial "footer.html" . }}
</div>
</body>
</html>
{{ define "main" }}
<article>
<h1 style="padding-top: 2em; padding-bottom: 1em;">{{ .Title }}</h1>
<p>Tags:
{{ range (.GetTerms "categories") }}
<a href="{{ .Permalink }}" style="background: black; border-radius: 0.5em; padding: 0.5em; margin: 0.4em">{{ .LinkTitle }}</a>
{{ end }}</p>
{{.Content}}
<small>Published on {{ .Date.Format "2006-01-02" }}</small>
</article>
{{ end }}

2
layouts/partials/head.html
View File

@@ -3,6 +3,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{if .IsHome}}{{ $.Site.Title }}{{else}}{{.Description}}{{end}}" />
<link rel="stylesheet" type="text/css" href="/css/custom.css">
<link rel="stylesheet" type="text/css" href="/css/screen.css">
<script defer src="/js/fontawesome.js"></script>
</head>

7
layouts/partials/nav.html Normal file
View File

@@ -0,0 +1,7 @@
<nav id="main-nav" class="contained">
<a href="/">Home</a>
{{ $currentNode := . }}
{{ range .Site.Menus.main }}
<a href="{{.URL}}">{{.Name}}</a>
{{ end }}
</nav>

29
static/css/custom.css → static/css/screen.css
View File

@@ -24,9 +24,6 @@ ul, ol { margin-left: 30px; }
li > ul, li > ol { margin-bottom: 0; }
/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
/** Links */
a { color: #2a7ae2; text-decoration: none; }
@@ -75,6 +72,9 @@ header, footer {
header > * {
padding-top: 0.5em;
}
header {
box-shadow: 0 0 25px 0 black;
}
footer {
color: white;
}
@@ -174,6 +174,7 @@ a.button {
}
nav {
display: flex;
/* Looks crap, but better than broken nav */
flex-wrap: wrap;
align-items: center;
width: 70%;
@@ -181,4 +182,26 @@ nav {
nav > * {
padding-left: 2em;
padding-right: 2em;
border-left: 2px solid black;
}
nav :first-child {
padding-left: 0;
border-left: none;
}
nav a:hover {
color: white;
}
@media only screen and (max-width: 800px) {
nav {
flex-direction: column;
}
nav > * {
margin-right: auto;
padding-bottom: 0.5em;
}
nav :first-child {
padding-left: 2em;
border-left: 2px solid black;
}
}