Having trouble adding styling to my Hugo site

Hi,

I’m having trouble adding styling to my new Hugo site. I have tried all sorts of things, but nothing seems to work. This is my first site I am creating with Hugo. Any feedback would be much appreciated! This is the link to the repo on github:

https://github.com/interglobalmedia/interglobalmedia-hugo

Hi @interglobalmedia! When you say styling, do you mean CSS styles show up, or page rendering? It looks your repo has all the pieces.

It has all the pieces including stylesheets, but the styling is absent. That’s because somehow the head content is not being loaded. This is how my home page looks (and all other content):

And this is what appears in the console for my head:

`

`

weird because I just cloned your repo and ran it and it looks fine.

Thanks Bud, That IS weird. What could I be doing wrong that it isn’t showing up correctly? Because it is NOT. Still getting no styling whatsoever attached. What command did you use?

I did the same, and it still looks the same:

For anyone who might be able to help, this is what I get in the command line now:

hugo serve
Started building sites …
ERROR: 2017/05/25 10:38:31 template.go:495: Failed to add template partials/head.html in path /Users/mariacam/downloads/interglobalmedia-hugo-master/layouts/partials/head.html: template: partials/head.html:10: function “truncate” not defined
ERROR: 2017/05/25 10:38:31 template.go:529: template: partials/head.html:10: function “truncate” not defined
ERROR: 2017/05/25 10:38:31 general.go:236: partials/head.html is an incomplete or empty template
ERROR: 2017/05/25 10:38:31 general.go:236: i18n not initialized, check that you have language file (in i18n) that matches the site language or the default language.
Built site for language en:
0 draft content
0 future content
0 expired content
8 regular pages created
16 other pages created
0 non-page files copied
15 paginator pages created
12 tags created
0 categories created
total in 23 ms
Watching for changes in /Users/mariacam/downloads/interglobalmedia-hugo-master/{data,content,layouts,static}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

I will now push what I have locally to remote just in case. I might have made a couple of changes since the last commit.

Ah, I’m not getting any errors when I run Hugo. Maybe try re-cloning the theme, because it looks like some theme stuff is missing.

I have to run to meetings. I’ll check in this afternoon to see if you’ve solved it.

Well then it’s a theme thing because I have done it a couple of times already with the same result. I guess I will try another theme then since this one is not complete. Thanks Bud for the info.

Hello @interglobalmedia,

like Bud I cloned the linked library as well and fired up Hugo – everything looked fine. You’ve said you made some changes that aren’t pushed to GitHub.

It seems that one of those changes caused the error messages around the truncate template function. It does exist and isn’t misspelled. Your stylesheets are linked in the head partial but this can’t be rendered due to the error. Hence the final output does not have any styling.

It would be very helpful if you could copy & paste the output of the hugo env command so that we can see which Hugo version you’re using. Furthermore, could you push the current state of your local repo to a temporary branch on GitHub?

Otherwise we’ll not be able to reproduce the error.

I’ll be at Hacker Hours this afternoon, if you still need help then https://www.meetup.com/hackerhours/events/239881839/

Hi @digitalcraftsman,

Thanks so much for your response. hugo env returns the following in the console:

Hugo Static Site Generator v0.18.1 BuildDate: 2016-12-29T12:12:41-05:00
GOOS="darwin"
GOARCH="amd64"
GOVERSION=“go1.7.4”

Hope this helps. I know I have been getting an error, and I don’t quite get what it is yet. Will continue to research this! My problem is that I have 3 sites I want to migrate to Hugo from WP (asap), plus other things I have to complete. So this has been a bit crazy for me! Getting the right content onto the page no problem. Getting css to load, big problem! Again, thanks so much for your valuable time to help. Looking forward to being able to be on the helping end in the future!

This information are indeed very helpful. You’re using Hugo v0.18.1 but truncate was introduced in Hugo v0.19 as you can read in the linked release notes. Hence Hugo has implementation for this template function.

Since we know this I suggest to upgrade to Hugo v0.19 or higher. If nothing holds you back you could switch immediately to v0.21 that was released 3 days ago.

I hope you progess fast with the transition of your websites from Wordpress. Btw, welcome to the Hugo community. Let us know if you get stuck again.

FYI @digitalcraftsman,

I went to install the tarball as per the link in the hugo documentation, and purportedly was downloading the latest version v0.21. When I installed and checked to make sure that the installation was successful, I still got back 0.18.1 as my version. That should not have happened, right? It’s in the correct path, because I did check that. I installed it in ~/bin. Maybe there is something with the tarball download/installation? I’m avoiding a homebrew installation because it has given me tremendous problems as of late.

Hi @digitalcraftsman,

Was responding to you when you responded to me with this valuable info! As you can see from my earlier response, I evidently have an issue upgrading hugo. I can’t seem to get beyond 0.18.1. Any suggestions? Thanks!

The installation of Hugo shouldn’t be any different from other binaries. Replacing the Hugo v0.18.1 binary in ~/bin/ with the newest one should be all you’ve to do.

This indicates that there’s some other Hugo binary on your machine. I’m not a Mac user but this command should work on OS X too:

ls $(which hugo)

It should list the path to all Hugo binaries on your machine.

I’m only getting back one path:

/usr/local/bin/hugo

@digitalcraftsman,

I went into the hugo directory and then checked which version was in there with hugo version:

hugo version
Hugo Static Site Generator v0.18.1 BuildDate: 2016-12-29T12:12:41-05:00

That is all.

Then try the following:

  • remove the Hugo binary from /usr/local/bin/
  • run ls $(which hugo) again. No directory should be listed
  • to double check run hugo env. The absence of a matching binary should cause an error like “command not found”.
  • move the Hugo v0.21 binary to /usr/local/bin/. Make sure it’s the v0.21 binary just to be sure
  • run ls $(which hugo)
  • last but not least run hugo env. Hopefully v0.21 appears as new version.