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
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
A few points -
- to use the downloaded theme you can simply copy it into your
- 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.
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.
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
<link rel="stylesheet" href="style.css"> (assuming your CSS file is named
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,
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
This is the way you load CSS styles sheets. See: https://www.w3schools.com/Tags/tag_link.asp
<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"