Any good getting started with Hugo resources

stacksofplates

How they want you to do it works like this:

mkdir -p mysite/themes
git clone theme into themes
cp -R themes/theme/examplesite/* .

#3 is obv assuming you're in the site directory. You're done. Now just edit your config.

You can also do hugo new site and it gives you a directory structure but if you're using the themes example folder it's not really needed.

stacksofplates

@Obsolesce said in Any good getting started with Hugo resources:

@stacksofplates said in Any good getting started with Hugo resources:

That's 100% false. I know you're using meghna and it's had 22 commits this year the newest being 11 hours ago. Idk what you're looking at but it's not what you think.

That's old, I don't use that anymore even though it's still running.

The Hugo themes list is default sorted by last updated. I had to scroll down 151 themes before I found one that wasn't updated in 2020 and the next was December 30 or 31. The themes are constantly updated.

Sure you can find one that someone let die, but you can do that with anything.

Obsolesce

Oh man i was looking at the wrong shit. There are active updates to it, like you said.

I'll give that a go, then, as now it looks beneficial. But looking at it, it seems as if updates to the theme will break things.

I'm not convinced of the theme update process. If I have modified files in a higher directory, the updates won't apply? How does that work?

stacksofplates

@Obsolesce said in Any good getting started with Hugo resources:

Oh man i was looking at the wrong shit. There are active updates to it, like you said.

I'll give that a go, then, as now it looks beneficial. But looking at it, it seems as if updates to the theme will break things.

I'm not convinced of the theme update process. If I have modified files in a higher directory, the updates won't apply? How does that work?

No you would have to change those since they are custom.

There only way to not update the themes is to never update Hugo. Theyveade templating changes in the past and the themes have to follow that.

Obsolesce

@stacksofplates said in Any good getting started with Hugo resources:

How they want you to do it works like this:

mkdir -p mysite/themes

git clone theme into themes

cp -R themes/theme/examplesite/* .

#3 is obv assuming you're in the site directory. You're done. Now just edit your config.

You can also do hugo new site and it gives you a directory structure but if you're using the themes example folder it's not really needed.

Yes, that worked. Thanks! Up and running "proprly" now.

Could you explain how the theme updates work then? So whenever there's a theme update to, for example, config.toml, my site isn't going to use the new one since it's copied above, same with other files... Do I have to manually updated this stuff after finding out somehow there was an update?

stacksofplates

@Obsolesce said in Any good getting started with Hugo resources:

@stacksofplates said in Any good getting started with Hugo resources:

How they want you to do it works like this:

mkdir -p mysite/themes

git clone theme into themes

cp -R themes/theme/examplesite/* .

#3 is obv assuming you're in the site directory. You're done. Now just edit your config.

You can also do hugo new site and it gives you a directory structure but if you're using the themes example folder it's not really needed.

Yes, that worked. Thanks! Up and running "proprly" now.

Could you explain how the theme updates work then? So whenever there's a theme update to, for example, config.toml, my site isn't going to use the new one since it's copied above, same with other files... Do I have to manually updated this stuff after finding out somehow there was an update?

No the override fills always override. It's just any Hugo specific changed would need to be added.

Obsolesce

@stacksofplates said in Any good getting started with Hugo resources:

@Obsolesce said in Any good getting started with Hugo resources:

@stacksofplates said in Any good getting started with Hugo resources:

How they want you to do it works like this:

mkdir -p mysite/themes

git clone theme into themes

cp -R themes/theme/examplesite/* .

#3 is obv assuming you're in the site directory. You're done. Now just edit your config.

You can also do hugo new site and it gives you a directory structure but if you're using the themes example folder it's not really needed.

Yes, that worked. Thanks! Up and running "proprly" now.

Could you explain how the theme updates work then? So whenever there's a theme update to, for example, config.toml, my site isn't going to use the new one since it's copied above, same with other files... Do I have to manually updated this stuff after finding out somehow there was an update?

No the override fills always override. It's just any Hugo specific changed would need to be added.

I see. Still better than not at all. So I'll take it.

Anyways, need to make the changes to other sites. Luckily it's all simply laid out and only takes a minute.

stacksofplates

I haven't had a theme that broke from something like the config.toml or a css change. It's more things like this: https://gohugo.io/news/0.57.2-relnotes/

So I think if I remember right that .Pages gave you everything if you were on the home page. They changed that to only immediate children and .Site.Pages now gives you everything.

I had that break a theme. But updating the theme fixed it and I didn't have to touch any of my override files.

So it's really only if you are extensively modifying the theme at those kind of levels. And you'd see it break if you are using the dev server when you do your local work.

Obsolesce

I'm having trouble with overriding css. Maybe I'm doing it wrong.

I know I read somewhere on creating a customcss file, but I've been through so many themes I have no idea if that's in general or theme specific.

What I tried that doesn't work is creating a new structure top level -- assets\css\style.css

stacksofplates

@Obsolesce said in Any good getting started with Hugo resources:

I'm having trouble with overriding css. Maybe I'm doing it wrong.

I know I read somewhere on creating a customcss file, but I've been through so many themes I have no idea if that's in general or theme specific.

What I tried that doesn't work is creating a new structure top level -- assets\css\style.css

So that depends on the theme. Some give you a custom.css file to use some don't.

Meghna for example gives you a declaration in your config.toml on where your custom CSS file exists.

If you want to hard code it, don't worry about adding the variable for the config.toml copy the theme's head.html file (or header.html depending on the theme) up to the site level layouts/partials/head.html and paste this in:

<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">

If you want to make it a variable so that you can define the file in the config.toml then add this:

    {{ "<!-- Custom CSS -->" | safeHTML }}⏎                                                                                                                                                                                                   
    {{ range .Site.Params.custom_css }}⏎                                                                                                                                                                                                      
    <link rel="stylesheet" href="{{ . | absURL }}">⏎                                                                                                                                                                                          
    {{ end }}

Now in your config.toml you can have a param for the CSS file like so:

[params]
custom_css = ["css/custom.css"]

Just looking at this it looks like a good bit of work but it's really not. The site has to know where the CSS lives and with something like Drupal it would be more work making a sub-theme to add your CSS changes and such.

stacksofplates

@JaredBusch said in Any good getting started with Hugo resources:

So what about this theme for a blog?
https://themes.gohugo.io//theme/hugo-tikva/post/

As for this question. I spun up a test with it. I had to delete the HTML in the one file because they weirdly just added a <div> and Hugo doesn't support that. The colors aren't my favorite, but that's easily changed. Other than that it looks fine. Here's a sample:

stacksofplates

They've given you a lot of customization options directly in the config.toml file. This looks a lot better IMO. It's clean and fills the page:

Obsolesce

@stacksofplates said in Any good getting started with Hugo resources:

@Obsolesce said in Any good getting started with Hugo resources:

I'm having trouble with overriding css. Maybe I'm doing it wrong.

I know I read somewhere on creating a customcss file, but I've been through so many themes I have no idea if that's in general or theme specific.

What I tried that doesn't work is creating a new structure top level -- assets\css\style.css

So that depends on the theme. Some give you a custom.css file to use some don't.

Meghna for example gives you a declaration in your config.toml on where your custom CSS file exists.

If you want to hard code it, don't worry about adding the variable for the config.toml copy the theme's head.html file (or header.html depending on the theme) up to the site level layouts/partials/head.html and paste this in:
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
If you want to make it a variable so that you can define the file in the config.toml then add this:
    {{ "" | safeHTML }}⏎                                                                                                                                                                                                   
    {{ range .Site.Params.custom_css }}⏎                                                                                                                                                                                                      
    <link rel="stylesheet" href="{{ . | absURL }}">⏎                                                                                                                                                                                          
    {{ end }}
Now in your config.toml you can have a param for the CSS file like so:
[params]
custom_css = ["css/custom.css"]
Just looking at this it looks like a good bit of work but it's really not. The site has to know where the CSS lives and with something like Drupal it would be more work making a sub-theme to add your CSS changes and such.

I couldn't get that to work, so I copied the main one and pasted a custom one below it like this:

  {{ "<!-- template custom css file -->" | safeHTML }}
  {{ $styles := resources.Get "css/custom.css" | minify }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">

stacksofplates

@Obsolesce said in Any good getting started with Hugo resources:

@stacksofplates said in Any good getting started with Hugo resources:
@Obsolesce said in Any good getting started with Hugo resources:

I'm having trouble with overriding css. Maybe I'm doing it wrong.

I know I read somewhere on creating a customcss file, but I've been through so many themes I have no idea if that's in general or theme specific.

What I tried that doesn't work is creating a new structure top level -- assets\css\style.css

So that depends on the theme. Some give you a custom.css file to use some don't.

Meghna for example gives you a declaration in your config.toml on where your custom CSS file exists.

If you want to hard code it, don't worry about adding the variable for the config.toml copy the theme's head.html file (or header.html depending on the theme) up to the site level layouts/partials/head.html and paste this in:
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
If you want to make it a variable so that you can define the file in the config.toml then add this:
    {{ "" | safeHTML }}⏎                                                                                                                                                                                                   
    {{ range .Site.Params.custom_css }}⏎                                                                                                                                                                                                      
    <link rel="stylesheet" href="{{ . | absURL }}">⏎                                                                                                                                                                                          
    {{ end }}
Now in your config.toml you can have a param for the CSS file like so:
[params]
custom_css = ["css/custom.css"]
Just looking at this it looks like a good bit of work but it's really not. The site has to know where the CSS lives and with something like Drupal it would be more work making a sub-theme to add your CSS changes and such.
I couldn't get that to work, so I copied the main one and pasted a custom one below it like this:
  {{ "" | safeHTML }}
  {{ $styles := resources.Get "css/custom.css" | minify }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">

Interesting. What theme are you using?

Obsolesce

@stacksofplates said in Any good getting started with Hugo resources:

@Obsolesce said in Any good getting started with Hugo resources:
@stacksofplates said in Any good getting started with Hugo resources:
@Obsolesce said in Any good getting started with Hugo resources:

I'm having trouble with overriding css. Maybe I'm doing it wrong.

I know I read somewhere on creating a customcss file, but I've been through so many themes I have no idea if that's in general or theme specific.

What I tried that doesn't work is creating a new structure top level -- assets\css\style.css

So that depends on the theme. Some give you a custom.css file to use some don't.

Meghna for example gives you a declaration in your config.toml on where your custom CSS file exists.

If you want to hard code it, don't worry about adding the variable for the config.toml copy the theme's head.html file (or header.html depending on the theme) up to the site level layouts/partials/head.html and paste this in:
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
If you want to make it a variable so that you can define the file in the config.toml then add this:
    {{ "" | safeHTML }}⏎                                                                                                                                                                                                   
    {{ range .Site.Params.custom_css }}⏎                                                                                                                                                                                                      
    <link rel="stylesheet" href="{{ . | absURL }}">⏎                                                                                                                                                                                          
    {{ end }}
Now in your config.toml you can have a param for the CSS file like so:
[params]
custom_css = ["css/custom.css"]
Just looking at this it looks like a good bit of work but it's really not. The site has to know where the CSS lives and with something like Drupal it would be more work making a sub-theme to add your CSS changes and such.
I couldn't get that to work, so I copied the main one and pasted a custom one below it like this:
  {{ "" | safeHTML }}
  {{ $styles := resources.Get "css/custom.css" | minify }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
Interesting. What theme are you using?

timer-hugo, but with quite a bit of modifications

stacksofplates

@Obsolesce said in Any good getting started with Hugo resources:

@stacksofplates said in Any good getting started with Hugo resources:
@Obsolesce said in Any good getting started with Hugo resources:
@stacksofplates said in Any good getting started with Hugo resources:
@Obsolesce said in Any good getting started with Hugo resources:

I'm having trouble with overriding css. Maybe I'm doing it wrong.

I know I read somewhere on creating a customcss file, but I've been through so many themes I have no idea if that's in general or theme specific.

What I tried that doesn't work is creating a new structure top level -- assets\css\style.css

So that depends on the theme. Some give you a custom.css file to use some don't.

Meghna for example gives you a declaration in your config.toml on where your custom CSS file exists.

If you want to hard code it, don't worry about adding the variable for the config.toml copy the theme's head.html file (or header.html depending on the theme) up to the site level layouts/partials/head.html and paste this in:
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
If you want to make it a variable so that you can define the file in the config.toml then add this:
    {{ "" | safeHTML }}⏎                                                                                                                                                                                                   
    {{ range .Site.Params.custom_css }}⏎                                                                                                                                                                                                      
    <link rel="stylesheet" href="{{ . | absURL }}">⏎                                                                                                                                                                                          
    {{ end }}
Now in your config.toml you can have a param for the CSS file like so:
[params]
custom_css = ["css/custom.css"]
Just looking at this it looks like a good bit of work but it's really not. The site has to know where the CSS lives and with something like Drupal it would be more work making a sub-theme to add your CSS changes and such.
I couldn't get that to work, so I copied the main one and pasted a custom one below it like this:
  {{ "" | safeHTML }}
  {{ $styles := resources.Get "css/custom.css" | minify }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
Interesting. What theme are you using?
timer-hugo, but with quite a bit of modifications

That's weird. I just copied it and pasted in mysite/layouts/partials/head.html above the hover stylesheet:

  {{ "<!-- custom -->" | safeHTML }}⏎                                                                                                                                                                                                         
  <link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">⏎                                                                                                                                                                             
  {{ "<!-- hover -->" | safeHTML }}⏎                                                                                                                                                                                                          
  <link rel="stylesheet" href="{{ "plugins/hover/hover-min.css" | absURL }}">⏎                                                                                                                                                                
  {{ "<!-- template main css file -->" | safeHTML }}⏎                                                                                                                                                                                         
  {{ $styles := resources.Get "css/style.css" | minify}}⏎                                                                                                                                                                                     
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">⏎                                                                                                                             
</head>⏎

Then added the CSS in mysite/static/css/custom.css:

.top-bar.animated-header {
    background-color: #ce0b0b !important;
}

and got this:

Obsolesce

@stacksofplates I meant with the parameter for it in the config file. Otherwise I got it working similarly to how you did.

stacksofplates

@Obsolesce said in Any good getting started with Hugo resources:

@stacksofplates I meant with the parameter for it in the config file. Otherwise I got it working similarly to how you did.

Yeah that's bizarre. I got the same results with that as well.

I added this under the hover stylesheet:

  {{ "<!-- Custom CSS -->" | safeHTML }}⏎
  {{ range .Site.Params.custom_css }}⏎
  <link rel="stylesheet" href="{{ . | absURL }}">⏎
  {{ end }}

then added it in params:

# Site Params
[params]
custom_css = ["css/custom.css"]

and it worked like it did the other way. It doesn't matter, more than one way to skin a cat with this, but just weird it didn't work for you.

JaredBusch

@stacksofplates said in Any good getting started with Hugo resources:

How they want you to do it works like this:

mkdir -p mysite/themes

git clone theme into themes

cp -R themes/theme/examplesite/* .

#3 is obv assuming you're in the site directory. You're done. Now just edit your config.

You can also do hugo new site and it gives you a directory structure but if you're using the themes example folder it's not really needed.

From what I was reading, you don't want to actually git clone the theme.

Instead you should always git submodule it.

hugo new site jaredbusch.com
cd jaredbusch.com
git submodule add -f https://github.com/geschke/hugo-tikva themes/hugo-tikva

JaredBusch

I had never used submodule before. So I had to look it up.

Submodule is interesting because it adds everything into your repo also.

For another project, I had a custom folder that was different per client.
So in the main repo I had custom/.gitkeep to have the empty folder there.
Then I added custom/ to the .gitignore.
Then I had a separate project that I cloned into the custom folder.

Solved Any good getting started with Hugo resources