[SOLVED] Using HTML for content pages instead of Markdown

Hi!
I LOVE Hugo and am trying to convert my site which is currently in Jekyll. In Jekyll all of my content is HTML, not markup. I’ve tried the same approach in Hugo, but haven’t been able to tackle it.

For example, let’s say I’m using the “single” content type in a section called “foo.”

/foo/single.md

That works fantastically, but not if I’m using…

/foo/single.html

The result is getting the HMTL in the single.html, but nothing for the respective template is being brought in.
Does Jekyll support markup in the /content/ folder, or do I need to author all files in markdown?

Or maybe I need a configuration change that links the .html file to the template.
Any ideas?

The trick here is to add frontmatter. Even just the empty start and end of a front matter will do.

3 Likes

And BOOM, that was the answer!
Many thanks!

Do you have a source repository to take a look at? Trying to figure out the same issue myself.

Hi dedles,
Surprisingly, I don’t yet. Are you trying to put HTML in your content instead of formatting as markdown? You have several options:

  1. You can put a .html file in content. You just need to make certain that you’re using frontmatter. As bep said, it can be empty, just add this up top:
+++```
2. You can also put HTML in a markdown file and use the .md extension.  The Blackfriday markdown standard used in HUGO allows HTML to be placed in the markdown.  It just ignores the HTML when converting the markdown, assuming that it's already ready for primetime.  In fact, you can just put HTML in a markdown file and you'll be good.

**But, also consider this...**
More static site generators are using (encouraging) markdown as the means of content entry.  This scared me at first, but after thinking about it, I concluded that using markdown actually may strengthen the quality of the content. Markdown is easy to learn and can be actually easier to read than HTML (though mileage may vary).  My point is, using markdown encourages you to concentrate more on your content, which can make a stunning difference on your site.

If you do have markup and need more complex items like a YouTube vid, twitter card, etc..., you can use shortcodes. They're almost exactly like the ones used in Wordpress and Hugo comes packaged natively with a handful of them.  Check the docs, though. They are extremely simple to write and can allow you to functionally componentize your presentation tier, keeping it dry and less complicated.

Hit me if you have questions, but HTML isn't a problem at all.
2 Likes

In the content directory:

+++
title = "test"
date = "2017-12-29T12:15:02-00:00"
categories = ["test"]
tags = ["test"]
layout = "hyde-master"
+++
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
		styl
		/>
		</head>
	<body>
	<h1>
		Welcome
	</h1>
		<p>
			test html content
		</p>
	</body>
</html>

The resultant web page viewed (command uzbl http://localhost:1313)

test
Fri, Dec 29, 2017
Welcome test html content

Then changed the test content file:

+++```
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
		styl
		/>
		</head>
	<body>
	<h1>
		Welcome
	</h1>
		<p>
			test html content
		</p>
	</body>
</html>

The web browser shows:

Mon, Jan 1, 0001
+++``` Welcome test html content

How to fix please?

The request is to write content in html only, not markdown.

You do not need to insert the head again.

You just type the html you need on that particular page directly below the front matter.

The element ‘head’ was removed, but the elements ‘h1’ and ‘p’ are ignored. The web brower shows plain text without formatting.

Without posting a link to your repo it’s impossible to know what you’re trying to do…

Sorry, don’t know what repo (repository?), this is being tested only on a personal machine. Now the result using only ‘test.html’ in the content directory is a blank web browser page.

+++
title = "test"
date = "2017-12-29T12:15:02-00:00"
categories = [“test”]
tags = [“test”]
layout = “hyde-master”
+++
<!DOCTYPE HTML>
<html>
	<body>
	<h1>Welcome</h1>
	<p>test html content</p>
	</body>
</html>

Unable to show the code, so removed the right angle bracket:

+++
title = "test"
date = "2017-12-29T12:15:02-00:00"
categories = [“test”]
tags = [“test”]
layout = “hyde-master”
+++
<!DOCTYPE HTML
<html
	<body
	<h1
		Welcome
	</h1
		<p
			test html content
		</p
	</body
</html
+++
<!DOCTYPE HTML
<html
	<body
	<h1
		Welcome
	</h1
		<p
			test html content
		</p
	</body
</html>

Also produces a blank (empty) web page in the web browser

Directory structure:

ls
archetypes config.toml config.toml~ content data layouts static themes

Config.toml

languageCode = "en-gb"
title = "My New Hugo Site"
theme = "hyde-master"
[params] DateForm = "1.2.1970"
{{ .Date.Format "Mon, 2 Jan, 2006" }}

ls archetypes/
default.md

---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
draft: true
---

ls content
test.html

data, layouts, static directories are empty. Themes contains the ‘hyde-master’ unpacked directory from hugo themes web site.

First of all. Read the Forum rules on Sharing Code in the forum.

I had to edit every single post you made because you do not use the code block button </> properly.

Second a repo is short for repository.

Third you need to read the Docs. Read the Quick Start tutorial.

You do not need to set you theme in the layout parameter. You need to delete the following line:

layout = “hyde-master”

Also delete the above. You do NOT need to declare DOCTYPE again or open the html and body tags. These should be set by the templates of the theme you use.

Once again. You only type the HTML you need on that page directly below the front matter like so:

 +++
 <h1>
Welcome
</h1>
<p>
	test html content
	</p>

And one last thing read about HTML tags.

The syntax is like this <h1></h1> not <h1 </h1

1 Like

test file is now:

+++
title = "test"
date = "2017-12-29T12:15:02-00:00"
categories = ["test"]
tags = ["test"]
+++
<h1>
	Welcome
</h1>
<p>
	test html content
</p>

the layout line was deleted from the file test.html

The elements h1 and p are not recognised.

Is your site generated when you run hugo server? Are there any errors in the console?

Is the test file located under /content/test.html?

hugo -D serve
ERROR 2017/12/29 15:12:10 No ‘baseURL’ set in configuration or as a flag. Features like page menus will not work without one.
Started building sites …
Built site for language en:
0 draft content
0 future content
0 expired content
1 regular pages created
10 other pages created
0 non-page files copied
0 paginator pages created
1 tags created
1 categories created
total in 20 ms
Watching for changes in /home/…/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

ls content/
test.html

uzbl http://localhost:1313

You must set a baseURL in your config to test a Hugo site locally.

Also the command is hugo server -D

uzbl http://localhost:1313

hugo -D serve -b http://localhost
Started building sites …
Built site for language en:
0 draft content
0 future content
0 expired content
1 regular pages created
10 other pages created
0 non-page files copied
0 paginator pages created
1 tags created
1 categories created
total in 16 ms
Watching for changes in /home/…/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Web browser fails to render the html elements.