Using custom css files with Hugo CMS

support
1

I am an orthodox html developer. I like to use my custom CSS, JS and fav icon files with Hugo project. I placed them under “Static/” folder. But it is not working.

Here is my tree:

├───archetypes
├───assets
│   ├───css
│   └───js
├───content
│   └───posts
│       └───post-3
├───data
├───i18n
├───layouts
│   ├───partials
│   │   └───head
│   └───_default
└───static
    ├───css
    ├───fav
    └───js

Here is my code from “layouts/partials/head.html”

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>

<!-- Include favicon links -->
<link rel="apple-touch-icon" sizes="180x180" href="{{ "fav/apple-touch-icon.png" | relURL }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "fav/favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "fav/favicon-16x16.png" | relURL }}">
<link rel="manifest" href="{{ "fav/site.webmanifest" | relURL }}">
<link rel="mask-icon" href="{{ "fav/safari-pinned-tab.svg" | relURL }}" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

<!-- Include custom CSS files -->
<link rel="stylesheet" href="{{ "css/tailwind-csss-3.4.1.css" | relURL }}">
<!-- Add more custom CSS file links here -->
{{ partialCached "head/css.html" . }}
<!-- Include custom JavaScript files -->
<script src="{{ "js/script.js" | relURL }}"></script>
<!-- Add more custom JavaScript file links here -->
{{ partialCached "head/js.html" . }}
2

I don’t know what that means.

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

2 Likes