Any good getting started with Hugo resources



  • Before I search around and pick something random, has anyone seen any good resources for getting started with Hugo?

    A buddy has a super simple site he coded in notepad that I want to redo for him as a means of teaching myself about Hugo.



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

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

    1. cp -R themes/theme/examplesite/* .

    Why do this? Why can't I just create my own things? Why bring everything from the example up?

    I don't mind this, just trying to understand the logic.

    Each theme has it's own specific settings. The example gives you all of those settings without having to read through all of their theme and find the settings for yourself. You can delete the files in content/ that you don't need. It's just a way to show you how to use the theme and give you a default config.toml.



  • Not really, I feel like the guides all make these huge assumptions that they shouldn't. Hugo is really easy to use, but there are some basic pieces that are missing and you just have " to know" and to some degree it is "based on the theme." If I have two themes, the processes are different, including how to run the Hugo command!



  • @scottalanmiller said in Any good getting started with Hugo resources:

    Not really, I feel like the guides all make these huge assumptions that they shouldn't. Hugo is really easy to use, but there are some basic pieces that are missing and you just have " to know" and to some degree it is "based on the theme." If I have two themes, the processes are different, including how to run the Hugo command!

    That's what I noticed yesteday when I decided to give Hugo a spin for this. It was simple to install hugo, make a folder, make a site and then add a theme.

    But exactly WTF am I supposed to do next to get the various pages made?

    It uses markdown for content. ok great, but exactly how?
    The theme has default CSS values, but how do I add my own CSS to tweak things from the base theme? What if I want a red header bgcolor instead of white?



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

    But exactly WTF am I supposed to do next to get the various pages made?

    Right. 100% missing info. And mostly this is because Hugo isn't what does this, the themes are. Hugo is like a theme-automation toolkit and the real trick is learning the themes, not learning Hugo.



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

    The theme has default CSS values, but how do I add my own CSS to tweak things from the base theme? What if I want a red header bgcolor instead of white?

    Depends on the theme.



  • @scottalanmiller said in Any good getting started with Hugo resources:

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

    But exactly WTF am I supposed to do next to get the various pages made?

    Right. 100% missing info. And mostly this is because Hugo isn't what does this, the themes are. Hugo is like a theme-automation toolkit and the real trick is learning the themes, not learning Hugo.

    Right, and maybe I just picked a crappy theme at random.



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

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

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

    But exactly WTF am I supposed to do next to get the various pages made?

    Right. 100% missing info. And mostly this is because Hugo isn't what does this, the themes are. Hugo is like a theme-automation toolkit and the real trick is learning the themes, not learning Hugo.

    Right, and maybe I just picked a crappy theme at random.

    That's definitely a risk. A good theme makes Hugo so easy, and a bad one makes it useless.



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

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

    Not really, I feel like the guides all make these huge assumptions that they shouldn't. Hugo is really easy to use, but there are some basic pieces that are missing and you just have " to know" and to some degree it is "based on the theme." If I have two themes, the processes are different, including how to run the Hugo command!

    That's what I noticed yesteday when I decided to give Hugo a spin for this. It was simple to install hugo, make a folder, make a site and then add a theme.

    But exactly WTF am I supposed to do next to get the various pages made?

    It uses markdown for content. ok great, but exactly how?
    The theme has default CSS values, but how do I add my own CSS to tweak things from the base theme? What if I want a red header bgcolor instead of white?

    A lot is dependent on the theme because of the default variables that are set. Some themes use the .Site.Params very heavily, some don't.

    The documentation is geared towards developers and I think that's because it uses Go's templating to do the work.

    A good way to look at it is if you want to override any theme settings (CSS, partials, data, etc) make the same folder in the top level of your site and it will override the themes. Let me put an example together.



  • So I add the theme as a git submodule, and then in my site folder I override whatever by just copying what I need.

    So if themes looks like this:

    └── themes
        └── hugo-paper
            ├── i18n
            │   ├── en.yaml
            │   ├── ja.yaml
            │   ├── ko.yaml
            │   ├── ru.yaml
            │   └── zh.yaml
            ├── images
            │   ├── screenshot_dark.png
            │   ├── screenshot.png
            │   └── tn.png
            ├── layouts
            │   ├── 404.html
            │   ├── _default
            │   │   ├── list.html
            │   │   └── single.html
            │   └── partials
            │       ├── footer.html
            │       └── header.html
            ├── LICENSE
            ├── README.md
            ├── static
            │   ├── an-old-hope.min.css
            │   ├── apple-touch-icon.png
            │   ├── favicon.ico
            │   ├── highlight.min.js
            │   └── style.css
            └── theme.toml
    

    And I want to add a custom CSS file, I'll copy the header.html file to layouts/partials/header.html in my site (you'll have to make the directories). Then I'll edit that file to add my custom CSS file, and I'll put my custom file in static/custom.css in the site directory.



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



  • @stacksofplates so i have a clean set done locally.

    Now I need to read through this toml file, basically copying it over top of the default one, and change things as needed.
    99647264-437b-4516-bd47-a6b6e569c6f8-image.png



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

    @stacksofplates so i have a clean set done locally.

    Now I need to read through this toml file, basically copying it over top of the default one, and change things as needed.
    99647264-437b-4516-bd47-a6b6e569c6f8-image.png

    Yeah. So each theme is completely different because you can set up the site essentially however you want. The params enable/disable and modify different parts of the HTML that's generated. That's why if you just do hugo new site it's blank. There's no partials to create the site from. And theres also data files which help display different content types.

    I'll look over that theme and see what it looks like.



  • @JaredBusch

    You can get it going quick if you cut everything in the exampleSite directory and paste it up one level. Then comment out line number 5 in that config file you shown.

    Then from that directory, enter hugo serve -D to test locally.



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

    @JaredBusch

    You can get it going quick if you cut everything in the exampleSite directory and paste it up one level. Then comment out line number 5 in that config file you shown.

    Then from that directory, enter hugo serve -D to test locally.

    You need to paste up two levels. It's looking for the theme folder inside of the themes directory.



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

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

    @JaredBusch

    You can get it going quick if you cut everything in the exampleSite directory and paste it up one level. Then comment out line number 5 in that config file you shown.

    Then from that directory, enter hugo serve -D to test locally.

    You need to paste up two levels. It's looking for the theme folder inside of the themes directory.

    I don't use that and only have one level up. That is the site. It's way easier.



  • @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:

    @JaredBusch

    You can get it going quick if you cut everything in the exampleSite directory and paste it up one level. Then comment out line number 5 in that config file you shown.

    Then from that directory, enter hugo serve -D to test locally.

    You need to paste up two levels. It's looking for the theme folder inside of the themes directory.

    I don't use that and only have one level up. That is the site. It's way easier.

    That may work, but you're not supposed to do it that way. From their documentation: https://gohugo.io/hugo-modules/theme-components/

    The name used in the theme definition above must match a folder in /your-site/themes, e.g. /your-site/themes/my-shortcodes.

    It's also much easier to segregate this way so you can use git submodules for the themes. You should have the theme as a submodule so you can pull in updates and keep that separate from your site versioning.



  • @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:

    @JaredBusch

    You can get it going quick if you cut everything in the exampleSite directory and paste it up one level. Then comment out line number 5 in that config file you shown.

    Then from that directory, enter hugo serve -D to test locally.

    You need to paste up two levels. It's looking for the theme folder inside of the themes directory.

    I don't use that and only have one level up. That is the site. It's way easier.

    That may work, but you're not supposed to do it that way. From their documentation: https://gohugo.io/hugo-modules/theme-components/

    The name used in the theme definition above must match a folder in /your-site/themes, e.g. /your-site/themes/my-shortcodes.

    It's also much easier to segregate this way so you can use git submodules for the themes. You should have the theme as a submodule so you can pull in updates and keep that separate from your site versioning.

    That's always been a big PITA for me, so I purposely don't do it that way. It was confusing as hell to figure it out in the beginning, and their documentation didn't make any sense to me as a Hugo newbie, as it's not intuitive.

    So what I did was download a theme, and use the theme itself as the base of the site. Whatever is in the exampleSite folder, I move it up one level, comment out the theme line in the config file, then generate the site from there.

    As for theme updates, all the good ones I've found and use haven't had any updates in YEARS and I seriously doubt there will be any more. So at least in my case, I was never worried about that. If there would be an update, it's small enough that it's no big deal to take care of it manually.

    It was just simply too time consuming in the beginning, and the theming crap just wouldn't work for me. So how I got it working was a big time saver and, at least in my cases, there were absolutely no benefits to the theming junk.

    If I ever find a decent theme that is kept updated, I'll think about doing it that way, but until then, I see no benefit. I get the site to exactly how I want it to be, keep it in GIT and push changes as needed and the site rebuilds and deploys to staging environment (public but my IPs only) automatically, and then to production (public) via approval gate.



  • @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:

    @JaredBusch

    You can get it going quick if you cut everything in the exampleSite directory and paste it up one level. Then comment out line number 5 in that config file you shown.

    Then from that directory, enter hugo serve -D to test locally.

    You need to paste up two levels. It's looking for the theme folder inside of the themes directory.

    I don't use that and only have one level up. That is the site. It's way easier.

    That may work, but you're not supposed to do it that way. From their documentation: https://gohugo.io/hugo-modules/theme-components/

    The name used in the theme definition above must match a folder in /your-site/themes, e.g. /your-site/themes/my-shortcodes.

    It's also much easier to segregate this way so you can use git submodules for the themes. You should have the theme as a submodule so you can pull in updates and keep that separate from your site versioning.

    That's always been a big PITA for me, so I purposely don't do it that way. It was confusing as hell to figure it out in the beginning, and their documentation didn't make any sense to me as a Hugo newbie, as it's not intuitive.

    So what I did was download a theme, and use the theme itself as the base of the site. Whatever is in the exampleSite folder, I move it up one level, comment out the theme line in the config file, then generate the site from there.

    As for theme updates, all the good ones I've found and use haven't had any updates in YEARS and I seriously doubt there will be any more. So at least in my case, I was never worried about that. If there would be an update, it's small enough that it's no big deal to take care of it manually.

    It was just simply too time consuming in the beginning, and the theming crap just wouldn't work for me. So how I got it working was a big time saver and, at least in my cases, there were absolutely no benefits to the theming junk.

    If I ever find a decent theme that is kept updated, I'll think about doing it that way, but until then, I see no benefit. I get the site to exactly how I want it to be, keep it in GIT and push changes as needed and the site rebuilds and deploys to staging environment (public but my IPs only) automatically, and then to production (public) via approval gate.

    Yeah that's more convoluted than following how they want you to do it.

    Also about the theme updates.

    As for theme updates, all the good ones I've found and use haven't had any updates in YEARS and I seriously doubt there will be any more.

    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.

    Hugo is always evolving. I promise you if you don't keep your theme updated your site will break. Speaking from experience using it for a few years now.



  • @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.



  • How they want you to do it works like this:

    1. mkdir -p mysite/themes
    2. git clone theme into themes
    3. 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.



  • @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.



  • 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?



  • @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.



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

    How they want you to do it works like this:

    1. mkdir -p mysite/themes
    2. git clone theme into themes
    3. 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?



  • @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:

    1. mkdir -p mysite/themes
    2. git clone theme into themes
    3. 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.



  • @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:

    1. mkdir -p mysite/themes
    2. git clone theme into themes
    3. 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.



  • 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.



  • 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



  • @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.



  • @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:

    jaredsblog.png


Log in to reply