Apologies in advance for that fact that I am relatively inexperienced with Hugo and building a website. I have, however, read the documentation and scoured these forums for similar issues to the best of my ability before posting here.
I am an undergraduate student looking to create a personal portfolio website using Hugo and Git Pages. You can find the link to the Git Repository here and the website itself here.
The problem is, for my pages with writing that appear under the “content” headings (#research, #personal, #about), there is a problem with text “overflowing.” That is, when a line is too long, the last word is cut off in the middle, then continued on the next line and hyphenated.
Because of my experience with R and R Markdown, I thought that I could go in the pages’ respective .md files and edit what looks to me like a yaml header to contain some kind of argument like white-space: nowrap or hyphens: none, but that apparently had no effect.
I’m stumped. Can I have any help here? Let me know if there are any other details you need.
If you use your browser’s Inspect Element on the page, the CSS has
.content article p {
...
hyphens: auto;
...
}
You can find behavior for this property here. Since you want to overwrite the theme’s CSS, it’s recommended to “copy and modify” the same file from the theme.
Step-by-Step:
Create a new folder assets\sccs at the root of your project.
Copy the same _content.scss file from the Hugo Coder theme into this folder. You can’t modify the name, or its location.
Edit the line hyphens: auto; to hyphens: manual;
I found the right file to overwrite by searching through the Hugo Coder theme’s github repository for .content article p. When you build the site, Hugo will use this “local” copy you created over the copy from the theme, effectively overriding it.
The first step was simple enough: I just had to clone my Git repository, creating a folder called owengould.github.io, then cd into it and run the command mkdir assets\sccs.
I couldn’t quite follow the next steps. The directory owengould.github.io/themes/hugo-coder
is empty. I also tried to do a search for _content.scss and did not find a file with that name. I do, however, see some files inside owengould.github.io/resources/_gen/assets/scss and owengould.github.io/public/css that seem to contain .css files and other files that could seemingly work with CSS code, but I’m not sure which file you’re referring to. Can I please have a bit more clarification?
_content.scss is located in the source of your theme at assets/scss/
Copy it from the to the directory you created. Ignore public and resources for now and remove them from your repo. They don’t belong there.
And why do you clone your GitHub repo locally? Shouldn’t you have all its content already locally from creating the repo?
Okay, I copied the file in question into the new directory and edited its text to include hyphens: manual.This had no apparent change on the website, but I pushed the changes I made. You can see the update version here. (P.S., I cloned the repo for my website locally one time for a “fresh start,” though I’m sure now that wasn’t necessary.)
Sorry, I want to make sure I understand how to implement your suggestion.
Inside my root directory, I have a file called hugo.toml, which I used to adjust the configuration of my website. Inside it, I have a list of items that control the look of the site, including the author name, description, and the URL for my avatar. These follow [Params] and are indented with two spaces.
Are you suggesting I add another line that reads customCSS=[…], where whatever’s inside brackets changes the presence of hyphens. What exactly would go in there? A file inside /project/assets/CSS called custom.css, where project refers to the root directory?
What goes in this file? Do I need to copy the contents of another file a modify a parameter like hyphensso that words that are too long simply start on the next line, or can I just include that parameter itself?
You could try the solution suggested by irkode above. Seems reasonable for the custom theme.
If you look at your website repo, the mistake when implementing the method I suggested is that you created a folder named ‘assets\scss’. You want a nested folder; you want an ‘scss’ folder under your ‘assets’ folder that contains the ‘_content.scss’ file. So the structure should be
exactly. the customCSS parameter has to be in the params section
the content and filename as I wrote.
yes project is your sites root
content of the custom.css file
I havent tested. but if @pocofrosty is right it should be. so these are additional styles that override theme settings. no need to duplicate things there.
Okay, so I tried the approach using a subdirectory inside assets named css and a _custom.css file inside of that, being sure to update the thee hugo.toml file appropriately. However, I’m now getting an error when running hugo server, which reads:
ERROR error building site: render: [en v1.0.0 guest] failed to render pages: render of “/categories” failed: “/Users/owengould/Desktop/owengould.github.io/themes/hugo-coder/layouts/baseof.html:6:5”: execute of template failed: template: list.html:6:5: executing “list.html” at <partial “head.html” .>: error calling partial: “/Users/owengould/Desktop/owengould.github.io/themes/hugo-coder/layouts/_partials/head.html:13:3”: execute of template failed: template: _partials/head.html:13:3: executing “_partials/head.html” at <partialCached “head/custom-styles.html” .>: error calling partialCached: “/Users/owengould/Desktop/owengould.github.io/themes/hugo-coder/layouts/_partials/head/custom-styles.html:4:43”: execute of template failed: template: _partials/head/custom-styles.html:4:43: executing “_partials/head/custom-styles.html” at <$styles.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink.
I tried to push the most recent version, but given that Git deployment failed, I’m not sure what you will see.