[SOLVED] How to create a one page site?

support
1

I want to create a minimal one page site with no posts. I just want it to have 2000 words of content and images on the homepage and a link to the privacy policy and about page. Nothing else. How do I go about creating this using hugo?

2

This is mad easy to do. Seems like you didn’t take the time to look at the hugo themes at all. There are multiple one page themes you can use as reference for how to do this. You can do it all with the main index.html file and an about.md with a privacy.md simple stuff.

check out the themes

2 Likes
3

I went through the themes end to end couldn’t find it.

Could you link one such one page theme?

I could only find themes which were either one page portfolio style or centered and linked out to posts

4

The “split” theme seems to be a one-page theme.

https://themes.gohugo.io/tags/onepage/

1 Like
5

also check out: https://themes.gohugo.io/theme/hugo-fresh/

easy to customize to your liking

6

Install Hugo

https://gohugo.io/getting-started/installing/

Create framework

hugo new site example.com

cd into static directory and create index.html

Run Hugo server from base directory and view site with browser from localhost.

Refer to numerous markdown examples.

https://gist.github.com/jonschlinkert/5854601

I hope this gets you started!

7

If you are comfortable styling it yourself with CSS, then the minimal layout below will get you started.

Create a base template at layouts/_default/baseof.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{{ .Title }} | {{ .Site.Title }}</title>
  </head>
  <body>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about/">About</a></li>
            <li><a href="/privacy-policy/">Privacy Policy</a></li>
        </ul>
    </nav>
    {{ block "main" . -}}{{- end }}
  </body>
</html>

Create a single page template at layouts/_default/single.html

{{ define "main" -}}

{{ partial "pagecontent.html" . }}

{{- end }}

Create your index.html at layouts/index.html

{{ define "main" -}}

{{ partial "pagecontent.html" . }}

{{- end }}

Create a page content partial at layouts/partials/pagecontent.html

<h1>{{ .Title }}</h1>
{{ .Content }}

Create Home page with hugo new _index.md

---
title: "Home"
date: 2018-09-16T08:53:47-05:00
draft: true
---

Home page content goes here (your 2000 words of content, and images).

Create About page with hugo new about.md

---
title: "About"
date: 2018-09-16T08:53:51-05:00
draft: true
---

About page content goes here.

Create Privacy Policy page with hugo new privacy-policy.md

---
title: "Privacy Policy"
date: 2018-09-16T08:53:57-05:00
draft: true
---

Privacy Policy page content goes here.

Now your project folder structure will look something like this

│   config.toml
├───archetypes
│       default.md
├───content
│       about.md
│       privacy-policy.md
│       _index.md
├───data
├───layouts
│   │   index.html
│   ├───partials
│   │       pagecontent.html
│   └───_default
│           baseof.html
│           single.html
├───resources
├───static
└───themes
1 Like