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 config.toml etc
A few points -
themes folder.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.
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!