Hi there,
I’m moving my static page from Revel to Hugo + nginx.
Revel already uses go templates so it shouldn’t be complicated but still…
So in the Revel project I have:
The site is finished so I guess I don’t need any themes.
What do I have to generate those static pages with hugo?
Thanks!
Jan
Hello @janekolszak,
it shouldn’t be to difficult to migrate your blog to Hugo. In general, you need your website to make it compatible with Hugo. Mainly, this means to structure your templates. They also need to be changed slightly for common things like setting the title etc.
I don’t know how familar you’re with Hugo but I would suggest you to follow this tutorial. It should show you how all your templates and partials could be structured.
How do you actually store your content? Do you use a database or something like a file-based cms?
If you struggle at some point, feel free to ask.
Thanks for your reply @digitalcraftsman !
I’m new to Hugo.
My page consists of:
So I would call this a file based CMS.
Right now Revel handles generating templates in the runtime and serving CSS, js and images, but I need to change this to ngnix.
Thank you!
Jan
If I understood you right you only want to move the static parts of your website to Hugo while running the restful api as before, right?
Do I have to create a theme to render HTML pages from templates?
Well, this depends on how you want to structure your page. For example, let’s take a look at the structure of Hugo’s documentation. Themes normally reside in a folder called themes. But as you can see this isn’t the case here. Instead, everything is stored in the root directory. The templates and partials can be found in layouts and assets like css files and images are stored in the static folder. You can place your files there if you want.
Alternatively, you could create a theme (preferable as seperate repository). A theme is just a way to make your templates reusable, so that others can use it just by placing the theme as subdirectory in themes. Let’s take a look at one of my themes. That looks very familar since we have the same folder structure. This way we would just need to clone the repository into themes and then specify in the configs that Hugo should use a theme with the name xyz aka your folder that would have you copied a few moments ago.
Knowing this, you can decide if you want to create a theme or if you store everything directly in the root-folders.
Do you know any example project that doesn’t use themes?
I think the Hugo docs would be an example. Themes just decouple your layout from your website.
Could you add the link to the tutorial you mentioned?
My fault. I forgot to add it. It’s linked now and should help you to port your current templates to Hugo.
Thanks @digitalcraftsman
Yes, that’s right. I only move static parts to Hugo.
I just:
This works (YAY!), but only for /layouts/index.html. Other files don’t get rendered.
What am I missing?
Where can I define variables?
In Revel I set a variable, like {{set . “title” “About”}}, in the “main” template and it propagates to “partials”. The syntax doesn’t work here. I see something similar, but I don’t get where to define those variables.
Thank you,
Jan
Great to hear that. Now we need to let the content and templates work together.
I assume, you’ve copied your files into the content folder. How you structure the depends on you (and maybe on your current one). Each subfolder in content is a so-called section, e.g. posts.
So far, Hugo supports Markdown natively and restructured Text / Asciidoc with third party tools as file formats. However, each content file has to have a frontmatter at the beginning. The frontmatter stores metadata about your pages/posts likethe date of creation, a title etc. I don’t know your data structure but, if necessary, you would have to add these information yourself.
Now, let’s handle the templates. Within layouts you can create a subfolder called _default.
A template called single.html will specify how your content pages should look like by default. It will be used for the generation of a single blog post.
Furthermore, Hugo uses the list.html template to generate an index page for a section. For example, this template will be shown if you enter www.example.com/post/index.html. Here you can list all the files of that section if you like.
Setting variables works with the standard Go template syntax:
{{ $var := 42 }}
But setting a title this way isn’t that elegant. As I mentioned above, usually each content file has a title variable in it’s frontmatter. Within a template you can call it by
{{ .Page.title }}
This works also with every other variable of the frontmatter. .Page gives you access to information that are related to the current page.
If you want to set a global title for pages we could define it in the config file. In an example config file we can set:
title = "Jan's website"
Within the templates we can access this variable with the .Site object which contains all informations about the website itself (mostly variables from the config file). You can access the title in the template by
{{ .Site.Title }}
Optionally, you could combine both to generate a nice title:
<title>{{ .Page.title }} - {{ .Site.Title }}</title>
If this doesn’t fit your needs tell me what the variable should represent or what should be stored.
OK @digitalcraftsman, so far so awesome,
I understand the variables now!
To clarify: I’m not writing a blog, I’m writing a webapp. Static HTML gets filled with javascript on client side. Each page needs a different template.
So let’s say I want a.html to be under http://localhost:1313/a. This is what I’ve done to do this:
Created /content/a.md, with frontmatter only.
Created /layout/page/single.html with a template.
Success, it works. 
But now I need another page under http://localhost:1313/b to use a different template than /layout/page/single.html.
How do I do that?
Thank you!
Jan
I used the blog post’s just as an example to illustrate the relations between templates and content files.
To have better understand of your content structure: do you have many content files that should use the layout of a.md? Or do want touse for a.md, b.md and maybe c.md everytime a different layout?
Hi,
Is this possible?
Each content has only frontmatter inside.
Does this mean that you don’t have to render any Markdown?
Majority of content is filled in the runtime by js
Does this mean that Javascript will load some data dynamically if I visit a site?
I’m asking because this could change your requirements for the setup.
Thanks for the clarification.
Your layout works a bit against the concepts of Hugo. I assume you want to include some logic into your templates (e.g. inserting variables, using if else).I’ve did some testing. If you place html files somewhere in the content folder, they will be rendered, but they will NOT be processed. This means you can’t work with variables etc.
Putting the html files into the layouts folder will also not work because Hugo will not display layouts/a.html under example.com/a.html as Hugo does it with the index.html.
Therefore, you would need to have a content file in the right section if you want Hugo to force the rendering, even if you don’t use the content files and this approach seems counter-inituitive.
How exactly should Revel and Hugo work together? When Javascript fills the page dynamically with content why would you need Hugo?
Revel and Hugo don’t know about each other. Javascript is hosted as a static file and queries restful api provided by Revel app. So a web server and an app server are separate and the proxy decides what gets called.
I need to process go templates into HTML. Javascript will then fill the right divs with data.
Hugo seems easy to work with and I haven’t found any alternatives.
I have no problem with creating spearate /content/a.md for each example.com/a.html, but how do I specify a separate template/layout for each a.md b.md etc?
You would need to create a new content section for each file in conent:
Within layouts you’ve to add the corresponding templates:
One problem could be, that you files appear under the url example.com/type1/a/index.html.
You can change this path by overwriting it with a new relative url in the frontmatter of the content files.
url = "new/url/to/file.html"Thank you Sir, it works like a charm!
It would be nice to have something like:
+++ ... layout = "a.html" ... +++
And then:
to simplify development.
Thanks!
I’ve found a thread in the forum that should fit your needs.