Hugo

Using my own theme through hugo

I have downloaded a theme from another site. it contains, these folders “css, js, images, webfonts,” and an “index.html” file. I want to put this into hugo.

I used this command “hugo new theme [name]” from this link https://gohugo.io/themes/creating/ and it generated and it has got these folders archetypes, static, layouts, theme,toml and license files…

Now how can i add my 1st folder (theme) to the 2nd (hugo)? Anyone please help me

1 Like

Welcome to hugo! Building a hugo theme based on another site is a great project to work on. From my experience, you’ll need to get stuck in to the docs and spend some digging around in the source code of other themes to see how they’ve been built.

As a start, you’ll most likely want to put things like css, js, images, and webfonts into the static directory, and index.html into the layouts directory. Then it’s time to start getting into the power of hugo - working out what settings or content you want to have configurable through config.toml etc

5 Likes

A few points -

  • to use the downloaded theme you can simply copy it into your themes folder.
  • you can use git to install themes, cloning them from their repository to within your project folder. This lets you update easily when the theme author updates the theme.
  • no matter how you install your theme, you can override parts of the theme you selected by copying the files from the theme, to the equivalent location in your project.
  • you can also not install any theme, and simply build the site up naturally, however you want

When you use hugo new theme somename it makes a folder for your new theme “somename” to live in. You need to make a hugo site, and copy your theme into themes in your working folder (project folder). Then of course, you have to build up the theme adding whatever templates and components you need. The easier way, is to simply look at how themes are being built so you understand how that works, and how they are installed, and how you can override parts of them, and then make your own.

1 Like

Thanks a lot!. Will try it out

after copying the css, js, images, webfonts, etc to static folder, and index to layouts folder. I must push the hugo new theme to github and then clone from git as i do for other hugo inbuilt themes. Am i right?

If you mean, you want to make a repo for your theme, then clone it into your themes folder like other themes in the theme site, then yes, you could do it that way. You could have one repo for your project, and one repo for your theme.

1 Like

Hi RickCogley,

Thanks, i did the same. Now i tried putting css and js files inside static folder. but i’m not able to link it

If it’s in the /static folder (or /theme/static) then when hugo builds your site they will end up in the root/public folder.

and in the head of my HTML say baseof.html, I’m not able to link it. Can you explain this line,

when hugo builds your site they will end up in the root/public folder.

Attached the screenshots

Go for <link rel="stylesheet" href="style.css"> (assuming your CSS file is named style.css).

Referencing the static directory is wrong as hugo simply copies all the files and folders in the static directory straight into /public (or whatever directory you set it to publish too) without any processing or changes.

tried the same. Doesn’t work. I’m quite unclear about how this statement works

link rel=“stylesheet” href=“style.css”

Kindly let me know how do i connect css and js…

The project is in this link,

https://drive.google.com/drive/folders/1PqbIC5cT-z6dhCPpIYoBxa_DuRj4ZOA_?usp=sharing

If you want your site to load the file static/css/style.css then in the baseof.html file, you’ll want to put the line

<link rel="stylesheet" href="css/style.css">

Somewhere between the <head></head> tags.

This is the way you load CSS styles sheets. See: https://www.w3schools.com/Tags/tag_link.asp

For loading Javascript libraries use <script src="js/bootstrap.js> See: https://www.w3schools.com/Tags/tag_script.asp

Got it using this a small change in your answer, one backward slash before /css

link rel=“stylesheet” href="/css/style.css"

Thank you!

1 Like