Easily create static pages using custom hard-coded HTML

support
1

Hi,

I’m creating an open source shortstories publisher website using Hugo.

You can check my project here: https://github.com/jonathanlinat/deuxmillemots-website
And the associated theme: https://github.com/jonathanlinat/deuxmillemots-theme

I have shortstories written in Markdown located in content/ folder:

content/
  scifi/
    lastname-firstname_shortstory-title_1.md
    lastname-firstname_shortstory-title_2.md
    lastname-firstname_shortstory-title_3.md
  horror/
    lastname-firstname_shortstory-title_1.md
    lastname-firstname_shortstory-title_2.md
    lastname-firstname_shortstory-title_3.md
  thriller/
    lastname-firstname_shortstory-title_1.md
    lastname-firstname_shortstory-title_2.md
    lastname-firstname_shortstory-title_3.md
  etc...

…and I have the idea to have a page called “Discover” where I list the shortstories in a specific order.

But, meanwhile, I want to create a page, using a custom HTML template, called “Quickstart”. An other one called “Terms and Conditions”, etc… They are static HTML pages. Maybe one of them will retrieve the content shortstories in a different way…

My first question is: is it necessary to create a Markdown file located in a “quickstart” content/ folder in order to generate the canonical URL?

So my theme has this files/folders structure:

layouts/
  _default/
    baseof.html
  index.html

baseof.html includes all of my basic HTML structure from HTML, HEAD, BODY (header, footer and main). In main DIV, I created a new block named “main” that I define in index.html file.

Could I use this structure in order to create my static pages?

layouts/
  _default/
    baseof.html
  index.html
  quickstart.html
  termsandconditions.html
  discover.html
  etc...

I want them to use the _default/baseof.html HTML structure in order to be rendered. Is that possible? If not, what are the best alternatives?

2

Yes. But if you want to use a special template for the quickstart page, you should make put the template in the layouts/page directory, so:

layouts/page/quickstart.html

and then in your content (content/quickstart):

---
title: Quickstart
layout: quickstart
---

Hope that helps

1 Like
3

I think am using a similar setup. You can see it working here: https://brunoamaral.eu/categories/

First, my blog has a content section of type “Story” Configured in config.toml with a taxonomy.

[taxonomies]
tag = "tags"
category = "categories"
story = "stories"

Each story has it’s own page, hardcoded also.

Here’s what it looks like:

/
/content/stories
/content/stories/crypto/
/content/stories/crypto/_index.md
/content/stories/crypto/chapter01.md
/content/stories/crypto/chapter02.md
/content/stories/crypto/ also contains images+javascript

_index.md includes some customizations for the story:

---
story_featured_image: "/stories/crypto/DeathtoStock_IntotheLight-10.jpg"
story_title: "CryptoNovel"
story_subtitle: "A story to test your wit"
story_description: ""
story_color: "#1A1A1A"
story_header_height: "450px"
story_published: true
unlisted: false
---

and below this frontamatter I have the description of that story, or quickstart like you would say.

Then, I have a file to display all this in theme/layouts/taxonomy/story.html

Here is a slim version of what it does:

{{ partial "header.html" . }}
	<body class="page">

		<!-- Wrapper -->
			<div id="wrapper">

				{{ partial "top_navigation.html" . }}

				<!-- Main -->
					<div id="main">					
						<article class="post">
						<header style="background-color: {{ .Params.story_color }}">
							<div class="title">
								<h2>{{ .Params.story_title }}</h2>
								{{ with .Params.story_subtitle }} <p>{{ . }}</p> {{ end }}
							</div>
						</header>
						<section>
							<div class="row">
								<div class="12u 12u$(medium)">
								{{ .Params.story_description }}
								{{ .Content }}
								</div>
							</div>
						</section>
						</article>

					<div class="row">
						<div class="12u$">
							<section id="category-list">
								<div class="mini-posts">
										{{range (.Paginate ( where .Data.Pages "Type" "stories")  9).Pages}}
											{{ .Render "summary"}}
										{{ end }}
								</div>
							</section>
						</div>
					</div>

						{{ partial "pagination.html" . }}
					</div>

		</div>
	{{ partial "footer.html" . }}

And last, to show a list of all the stories:

						{{ $stories := where (where .Site.Pages "Section" "stories") ".Params.unlisted" "!=" true | intersect (where .Site.Pages "Params.story_published" "=" true)  }}

						{{ range $stories }} 
														<article class="mini-post stories">
							<header>
								{{ with .Params.story_subtitle }} <p>{{ . }}</p>{{ end }}
							
							</header>
							<a href="{{ .Permalink }}" class="image mini-featured-image" style="background-image: url('{{ .Params.story_featured_image | replaceRE ".jpg|.jpeg|.JPG" "_500.jpg" }}'); background-position: 40% 40%;"><h3 style="background-color: rgba(255,255,255,0.7)">{{  .Params.story_title }}</h3></a>
						</article>

						{{ end }}

Hope this helps! :slight_smile: