WORKFLOW #1: Hugo Themes Do Not Render On Local Host

support
1

Dear Hugo Community,

I am very new to Hugo, as I come from Jekyll. I like it so far, but now I got into a BUG.

So far I have been following quick start instructions & youtube tutorial https://www.youtube.com/watch?v=L34JL_3Jkyc

It teached me how to host a hugo theme locally. But my themes are not rendering correctly.

I learned:

  1. That I need to ADD an extra line with config.toml

    baseURL = "http://localhost:1313/"
    languageCode = "en-us"
    title = "My New Hugo Site"
    theme = “theme_name”

  2. That I need to to ADD -D to the command hugo server

I have tryed 3 THEMES so far without noticing any css.

expected: rules applied from the CSS file
actual: default style as without any CSS

Is there anything else I forgot I need to get in check with?

Thanks greatfully!!!

2

when you look at the site in Chrome and open the inspector and look at the console what does it say? file not found for your css I’m sure, but what is the url it is looking for it at?

I’m new to hugo also (from jekyll as well) but when working locally maybe you need the baseurl to be empty - “” or “/”?
Mine is set to:
baseURL: "/"
though I am not using a theme.

3

The command I use to show local changes is hugo server --theme=theme-name. But if your config isn’t working properly, it can cause problems. First of all, make sure the base URL is set to the address of the site you want. Don’t include a port number. That might fix it.

1 Like
4

Hellow Fellow Dev,

I used inspector in Chrome and it does show a css file

cssmissing
cssmissing.PNG1133×721 44.6 KB

Yet it should look like this https://themes.gohugo.io/theme/hugo-darkdoc-theme/

As far As I know every THEME has a diversed mix of stylesheets in

And most of them include baseURL

However in this THEME it is like this:

  <link rel="stylesheet" href="/css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" href="/css/custom.css">
    <link rel="stylesheet" href="/css/pygments.css">
    <!-- Add fancyBox -->
    <link rel="stylesheet" href="/css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <link rel="stylesheet" href="/css/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
5

I want to host locally so it’s a pretty standard adress

I assume it is:

baseURL = "http://localhost:1313/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "theme_name"

based upon

test1

6

Do you have content in your site? Or layouts? Because it doesn’t seem like a CSS issue, if the difference between what you see and the site is the content part of the site.

If you have a public repo, link to it.

7

Hi there,

So far I have followed the standard instruction installing a THEME in a project.

That means that I UNZIP a CLONED Repository from GITHUB in the THEMES folder of the desired project, BUILD with hugo new site “name_site”

The project in question is situated in C:\Hugo\sites.

As for any THEME you download, there is no content & no files in the PARENTfolder, in other words, these folders are EMPTY by default. Unless you mean the content & file folder inside the THEME folder. (Look picture below)

I am using this repo in the EXAMPLE of this POST https://themes.gohugo.io/theme/hugo-theme-bootstrap4-blog/
CLONED from https://github.com/alanorth/hugo-theme-bootstrap4-blog

To make it CLEAR: There is no other standard instruction given to new users! The FOLLOWING things I am trying to figure out.

  1. Do I need to copy the files from the THEME into the PARENTfolder?

  2. In the README file it states:

         ## Usage
     Clone the repository to your site's `themes` directory. Refer to [`exampleSite/config.toml`] ... for recommended configuration values.

It is not very clear what they mean by "Refer"

  1. As I explore a bit further: I have found another config.toml file inside the THEME folder > exampleSite.

I copied all the lines from config.toml (PARENTfolder) into the config.toml (THEMEfolder) But no result

Watch EXAMPLE of this POST:

config toml
config toml.PNG1279×911 97 KB

9

I have small CLUE coming from https://themes.gohugo.io/theme/after-dark/post/creating-a-new-theme/

Skins are the files responsible for the look and feel of your site. It’s the CSS that controls colors and fonts, it’s the Javascript that determines actions and reactions. It’s also the rules that Hugo uses to transform your content into the HTML that the site will serve to visitors.

You have two ways to create a skin. The simplest way is to create it in the layouts/ directory. If you do, then you don’t have to worry about configuring Hugo to recognize it. The first place that Hugo will look for rules and files is in the layouts/ directory so it will always find the skin.

Your second choice is to create it in a sub-directory of the themes/ directory. If you do, then you must always tell Hugo where to search for the skin. It’s extra work, though, so why bother with it?

The difference between creating a skin in layouts/ and creating it in themes/ is very subtle. A skin in layouts/ can’t be customized without updating the templates and static files that it is built from. A skin created in themes/, on the other hand, can be and that makes it easier for other people to use it.

The rest of this tutorial will call a skin created in the themes/ directory a theme.

Note that you can use this tutorial to create a skin in the layouts/ directory if you wish to. The main difference will be that you won’t need to update the site’s configuration file to use a theme.

How to tell HUGO to look for layout in THEMEfolder?

10

Is there anyone in the HUGO community that can provide step-by-step GUIDE?

I am sure other new users will encounter the same ISSUE.

MAIN Question: How to HOST any sort of THEME locally? So Editing the THEME is an EASE.

11

A small update:

I have unzipped a repo straight into the root directory: C:\Hugo\sites\name-site
Just so i could possibly bypass hugo’s search for the layout & content files, but no result.

In this POST i used a very simple THEME

DEMO view:

ex1
ex1.PNG1599×773 18.4 KB

LOCAL HOST view:

ex2
ex2.PNG1598×771 11.1 KB

In the meanwhile I gave up working with an existing THEME, and work from the ground up following these instructions: https://themes.gohugo.io/theme/after-dark/post/creating-a-new-theme/

12

If you find a theme called “Awesome Blog”, and you download it and it creates a directory called awesome-blog, then you need put that directory in the Hugo site theme directory.

If your site is at C:\Hugo\sites\example, the theme should be at C:\Hugo\sites\example\themes\awesome-blog.

Then in your config.toml, you set theme with theme = "awesome-blog".

Then it should work when you run hugo or hugo server.

13

Dear Maiki,

The classic method you describe from the hugo tutorial (of which I explained that i applied it step-by-step) is not working for me, so far.

Thank you for your help, but according to this method I am now able to host it locally, yet I need to use: hugo server --theme="theme_name" --buildDrafts

It was this tutorial that helped me figuring this out:

Why is the command hugo server not working?

14

Put your site online somewhere, such as a public git repo, and share the link to it. We can’t see what you are doing, so no one can assist you.

Don’t post any more messages in this thread until you’ve shared the code for your site. You are sending too many messages, and to receive help you need to show the code you are working with.

15

I am very new to this. Before I was using github & jekyll and everything seemed to be easy. With github desktop for example.

The reason I asked so much was because I was under the pressure of a deadline. My apologies.

Yet, the criteria to be able to share my commits, I am not able to accomplisch so easily.

Is there a guide on how to this?

I only know of github desktop so far. If I ask this on google I dont get significant search results.

Thank you.

16

If you host a Jekyll website on GitHub, you’ll need to create a private or public GitHub repository for that. So just do the same as you’d normally do when you create a repository for a Jekyll website with GitHub desktop. (Except, of course, setting the repository to a Jekyll website on GitHub.com).

Once you have a repository set up, you can share the link here for others to inspect.

For more, see Create a repo - GitHub Docs.
And here’s how to make a commit with GitHub desktop: https://services.github.com/on-demand/github-desktop/add-commits-github-desktop.