Hello,
I am new to Hugo and this is my first time creating a site. I am using the beautifulhugo theme and it has as a default the blog feed in the homepage. How can I remove the blog feed from the homepage?
I would also like to change the default body font from Lora to Crimson Text from google fonts. I tried following the same advice from previous posts but was not able to see a change. How may I change just the body font of the theme?
To customise bits of the theme, you can override certain files that comes with the theme.
For example…if you want to change the font which is used, you’ll need to edit main.css.
My workflow for doing this is to copy main.css from /themes/beautifulhugo/static/css to /static/css and then edit the css file. When hugo creates your site, it’ll use files from /static before /themes/<themename>/static. (This is better practice than just editing the theme directly.)
And it’s the same deal if you want to change the layout of index.html - make a copy, and have a fiddle. Though, IMHO, if you don’t want the front page to be a blog feed I’d start with a theme that doesn’t have that kind of design…there’s plenty in the theme repository.
Thank you for the help. I tried already altering the copied main css file in the static folder based on what I read on previous posts but I did not see a change. I also already tried editing the index.html file I copied into the static folder but I did not see a change either. I already searched multiple times in the theme repository for themes with no blog feed in the front page but I could not find any that I liked. Most of the themes that I liked had the blog feed in the homepage. I also tried the academic theme but that did not work out for me so I ended up finally this theme.
Are you able to put your code in a public repository and post the link?
To echo @funkydan2, please read Requesting Help
In order to assist you, we need to see the code you are using, and then we can point out possible solutions.
@ funkydan2 Yes, I have.
@ maiki What code can I give? I already removed the changes I did when I saw there was no change. I tried what ever was posted in this post:Font selection in theme for the font change and it did not work. For getting rid of the blog feed I checked the jekyll’s beautifuljekyll but it did not work. The link is here: https://github.com/daattali/beautiful-jekyll#add-your-own-content
in the FAQ section and it did not work.
Great. Can you post a link to the repository here? I can’t see it in this thread.
Sure, here is the link:https://github.com/aylinko/akosar.github.io/tree/master/themes/beautifulhugo
I did not make changes there, I created it where the folder is located on my drive.
Cool - thanks. If you could keep your repository up to date with changes you make, it’ll make it easier for us to help you.
The documentation for the Jekyll theme won’t be all that much help for using the theme with Hugo. Also, the thread about changing fonts will only work for themes which either allow you to specify a font in the config.toml file, or have a way of including custom css—and I don’t think beautifulhugo works that way.
Can I recommend repeating what you tried with duplicating and customising index.html and main.css, pushing those changes to github…then we can see where the problem lies.
Sure, I will do that right now.
For the font issue: I had followed the instructions from the image below .
So I have added the following code for the head_custom that was not able to be fixed:
{{ if .Site.Params.googlefonts }}
{{ end }}Then in the config.toml file I added the following code:
googlefonts = “https://fonts.googleapis.com/css?family=Crimson+Text”
and save after doing the above steps but still no change and this was supposed to work for the theme I have because someone had asked in a previous post for the same thing.
Blog Feed:
For the index.html file I tried deleting the posts on the html file but nothing changes.
Ok - I wouldn’t bother with the method from that thread…it’ll work, but easier for a beginner to just override the bits of the theme you want to change.
So looking at the current state of your repository
static/css directory, delete all the files you’re not planning to change (i.e., only have main.css in that directory)static/css/main.css change the 4th line to reference the font you want to use.layouts/partials/head_custom.html - put the HTML code needed to load the font you want to use…e.g.<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
hugo server and see what happens.For index.html - I can’t see anything in the layouts directory…so I’m not sure what you’ve tried.
ok, I will try now and let you know. For the index.html, I just deleted where the posts on the html file.
I just tried and you can see the changes on the files but I still don’t see a change. I am running it through R studio’s R blogdown, could that be possible issue?
Sorry - can’t help with R Studio. But when I clone your repository and run hugo server - the site is rendered using the Crimson Text font.
How did you render it on hugo server?
I’ve got hugo installed on my mac. So I just open up a terminal, go to the directory I have the site in (so for yours it was ~/dev/akosar.github.io) and then ran hugo server. Then I open a web browser to localhost:1313 and the site is live there.
ok, thank you. I will try and see maybe it can be an issue with R studio. Also for removing the blog feed, where would the index.html file be located and how would I manipulate the file to remove the blog feed?
Copy /themes/beautifulhugo/layouts/index.html to /layouts/index.html and edit the newly created version.
Have a read of
to get an idea of how you can override theme layouts.
Thank you again, I will try to do what you suggested and see if it works. If not, then I will just leave the way it is.