HI,
I am new to Hugo and I am trying to customize my site. One thing I wanted to add to the home page is a github chart/calendar. I am not really sure how to do it, but I found a couple of possibilities: GitHub - Bloggify/github-calendar: Embed your GitHub calendar everywhere. - I am not sure where to add the code, or how to install so it still works after deployment and also how to control the size.
I still haven’t solved this.
Perhaps someone could let me know which html and location I should edit? I just found Hugo on Tuesday, I did go through a series of videos but they only cover the basics, not so much on how to customise the theme and site to make it more personal.
So let me just ask another basic, what confuses me a bit about adding custom Html is that I was under the impression that some files are overritten as Hugo generates the html?
I might be wrong, yesterday I tried to edit public/index.html but there was no visible change. maybe I need to run a new Hugo command? I am currently running hugo server --disableFastRender as I have been rewriting some scss.
Given that there are more then one “the theme”, there are also several ways to customize them. The theme you use should have a documentation that describes what you can or should do (or shouldn’t).
This question is so vague that it can not really be answered. So let me just state some facts.
Many Hugo users use Markdown files (in particular index.md) to contain content. But this is not mandatory.
These MD files are converted by Hugo to HTML, just as by any other MD processor
In order to display a complete HTML document, Hugo uses HTML fragements (templates and partials) that define just how the page should be build.
When you run Hugo as hugo, it will create all the HTML files neede for your site, usually in public/
So if you change something in this directory, it will get overwritten by the next run of Hugo. As is to be expected.
I suppose that many people usually run hugo --server. This generates the “files” in memory and permits to immediately see the changes in your local browser
I suggest that you first try to understand the very basics of Hugo. It is not really easy with the documentation alone, try to find a tutorial on the net. If you’ve got a grip of the basics, you might think about the more advanced things like adding a github chart.
Thanks for the reply, I appreciate you took the time. But I don’t think you answered where that single line of Html code could be added?
If you are somehow confused about my org question I think it is clearly explained on the project git Github Chart API
Make this:
Of course, you can replace 2016rshah with your own github username.
Hugo is easy if you just want to set up a site and use a theme. You hardly need to read any documentation for that, just skim at the cheatsheet and you know everything you need. You were polite enough to cover [quote=“chrillek, post:3, topic:33544”]
So if you change something in this directory, it will get overwritten by the next run of Hugo. As is to be expected.
[/quote]
But, the other point you clarify were specifically associated with Markdown and contents. I am afraid that was not really my question and I not sure how I gave you that impression, but thanks anyway. - I have forked the theme of choice and rewritten all the scss files, to provide a more personalised design for the blog. The only things missing are some JS and html. I am simply asking how to do that.
I am sorry if my English was unclear for you, it is not my native tung.
The other project that I asked how to add to a Hugo site was Bloggify/ github-calendar
Here I was unable to find anything in the Hugo documentation that covers how to correctly install a JS package so it remains deployable. Would I do so in assets or where?, and how would I then add the JS? If you don’t know or simply would prefer not to spend time explaining that and writing up a how-to for me and others you could perhaps be so kind as to point me to any documentation that covers the procedure. I don’t think it is covered in the very basics of Hugo
Sorry, but this is not about languages (English is not my first one either). It’s about asking a clear question.
To add an image to an MD file, you use . Where you do this depends on your personal taste.
You can of course instead add the img element to one of your templates or write a partial that emits the element… lots of possibilities, and I do not really understand where the problem lies.
As to JavaScript: read about the asset directory and .Get.Resource. Include the JavaScript in the head element of your template or anywhere you like with a partial or a template.
Thanks for the reply.
I think that it was mentioned in the initial post, that I wanted to add it to the Home page. I guess it depends on the theme, but I don’t have any MD on that page. This is why I fell into the rabbit hole and was searching for how to add to the HTML.
Do you know where I could add it?
Now we know what you do not have, namely an MD file for your home page. But what do you have? If it’s an HTML page, why not add the img to it? If it is not an HTML document – what is it?
It might seem obvious to you what you’re doing and meaning. It is most definitely not so for other people, because you do not really give any details. For example, I do have an MD file for my home page (albeit a trivial one).
I suggest that you read about the homepage template. That’s also talking about using a MD file and adding content to your home page.
This is going in the wrong direction with this childish blame game…
It only benefits the forum if you help create posts that others can benefit from. This forum is riddled with comments like read the basics, and not solutions, it results in a useless forum where you have to spend twice the time to find a simple solution as all posts are “dead ends” - just help by posting a link or useful comment.
To clarify, as far as I am aware several themes have a splash screen and have options built in to the config.toml. They do not have an MD. For LoveIt theme and all derivatives of it, there’s not any markdown content on the home page, there is an option to not have posts/content shown on home but again those are just previews of the post .md …
[params.home.posts]
enable = false
The question and problem in this post should be very clear for someone that has more than 72 hours of experience with Hugo.
Back to the Post title: How to add a github chart/calendar to Hugo, and as in OP “to the Home page”. I really do appreciate that you take the time, but it seems like you misunderstood the original post.
I didn’t mean to play a blame game, but was asking for facts. This is the first time you even mention the name of the theme you’re using and that it does not use MD content at all for the home page. As much as I understand your impression of the way this forum works (or sometimes doesn’t), and as much as I was frustrated by that too, sometimes: Regardless of any forum, any software, if you want help, you must it make as easy as possible for others to help you.
If you start out with “I’m new to Hugo” and then do not say anything specific about your environment (which theme, no MD used for homepage, all that), why are you wondering that someone asks you for specifics? Hugo can be used in a myriad of ways, and nobody but you can know what you’re doing. If you’re not giving any specifics, how do you expect anybody to do anything but point you to the relevant documentation and answer in the broadest possible terms?
Eg: It may well be that “several themes have a splash screen …” - I wouldn’t know, since I don’t bother with themes. Which you can’t know. As I couldn’t know that you’re using a theme and which peculiarities it exposes.
So let’s wait for one of them to solve this problem.
Now that we’ve aired our feelings: You could try to add an _index.md to your content directory that contains a single line of content: 
According to loveit/layouts/index.html, the .Content of the current file will be included in the final document. However, the image will probably appear below the list of posts.
Maybe I am getting old, I am in my late 20´s but It´s a little funny, so much time on replying this way. Obviously, you are a smart person, you know a lot more about Hugo than I do. But, if you had posted my question tomorrow - then I would know exactly how to solve it. I would have spent the time providing you with a simple example of how I placed that silly Github chart/calendar on my home page.
But hay that’s just me
edit : chrillek dude why did you not just lead with that?
Thanks, have a great Friday. I will revisit this tomorrow
The problem here is that there are a lot of ways to include this short bit of code in a Hugo project and they depend on the theme that’s being used and the user’s implementation of that theme. The best way to get help on Hugo in a case like this is to post a link to a public repo so people can look over your implementation and give you relevant advice, or include enough context in your request for help that other people can figure out how your site works. Absent that, you get this back and forth like above
One solution:
setup a basic _index.md
now you have two choices the only thing you need is the exchange the Your_git_handle_here with your own git username.
This will give you a blue version - you can change it as you like. Change this → /409ba5/
The second option also provides additional information such as longest streak etc.
add the following to your _index.md or other .md
<!-- Include the library. -->
<script
src="https://unpkg.com/github-calendar@latest/dist/github-calendar.min.js">
</script>
<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link
rel="stylesheet"
href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css"
/>
<!-- Prepare a container for your calendar. -->
<div class="calendar">
<!-- Loading stuff -->
Loading the data just for you.
</div>
<script>
// or enable responsive functionality:
GitHubCalendar(".calendar", "Your_git_handle_here", { responsive: true },{ tooltips: true });
</script>
Thanks… but I have to totally disagree with you. The time it takes to write comments like “really vague question” and then link to “places to start” takes you longer than providing a hint to solving the question at hand. OR if you are a really nice guy test the question try to solve it provide/post the answer. That would be helping the community and make this a better forum for other people that have to deal with “perhaps” lacking theme doumentation and other issues.
How was the OP vague? I think it is really clear what I wanted, I might have been a novice question. But should only lead to some understanding from a person with experience. Even if you dont understand the OP at least ask before giving some brush off.
you should be able to agree with me, that is a bit to common here in this forum to write exactly what you just did instead of even trying to help.
you are obviously the guy trolling, you have nothing positive to add here. Please dont reply
I will revisit this tomorrow
