# Jekyll site - add comments, analytics, monetisation #222

- URL: https://superails.com/posts/jekyll-site-add-comments-analytics-monetisation
- Published: 2024-12-24
- Duration: 17:37
- Access: free
- Topics: jekyll
- Playlists: Create and host static website with Jekyll

Let's add some external tools to our Jekyll site:
- Plausible analytics for tracking visits
- Giscus (Disqus alternative) for comments via Github Discussions
- Buy Me A Coffee for basic monetisation

Most importantly:
We will deploy Jekyll via our own CI.
We will learn to override layout defaults.

Episode source code: https://github.com/corsego/220-jekyll-blog

0:00 Add comments with Giscus 
9:30 Add Plausible Analytics, Github Actions, override theme defaults
15:38 Add BuyMeACoffee

## Chapters

- 0:00 Add comments with Giscus
- 9:30 Add Plausible Analytics, Github Actions, override theme defaults
- 15:38 Add BuyMeACoffee

## Transcript

Hey guys. So previously we have created a basic, uh, JL blog, and we have hosted it on GitHub pages for free on our custom domain. So here we have it running on our domain, and here we have the same blog running on local host. And now we are going to add some, uh, external plugins to make, uh, our blog even better. So, first of all, we're going to add comments. Uh, so for example, here in my, uh, blog, I have, uh, GitHub comments, uh, under each blog post. So users can leave blog posts, and I can even moderate them. Uh, then they're going to add the analytics. So I'm using plausible analytics, uh, for my blog. And, uh, you'll be able to select the stats of your blog, uh, in the same way. And we can also even consider adding, uh, a buy me a coffee button that is quite common on blogs these days. So, uh, first of all with a comment section. Uh, historically the most, uh, common way to add comments has been this discuss that, uh, has worked well for many years. But now this discuss is going to add ads into your comment section. And I really don't want to add in my comment section. And this is kind of the last job for me. Also, discuss, always felt like a, a very big tool for a very small, uh, uh, problem. And I had the feeling that there should be a simple way. And, uh, you can do it for GitHub. So there is a tool called Utterances that, uh, at comments, uh, based on GitHub issues, but there is an even, uh, better tool. Um, it's called gco that is based not on GitHub issues, but on GitHub discussions. So, GitHub discussions is, uh, like an quite new, uh, new added GitHub tool, uh, that, uh, didn't exist when utterances was created. And when it falls, uh, when the GitHub discussions have been created that GI discuss, um, tool has been created. So GI CS is better than utterances, and utterances is, uh, better than discuss. So let's try adding, um, discuss to our, uh, post in our blog. Uh, here I'm on the homepage of discuss, and let's just follow, uh, the readin. So repository, let's, uh, see what's the repository? URL. Okay. Uh, so the criteria is not met. It should be public. Uh, GCA app should be installed, uh, in our GitHub, uh, profile and discussions feature should be enabled in the repository. So here in GitHub X apps, I, uh, should install GI have already actually, uh, done it for some app. I think I need to do it for another app. So in my profile, uh, let me log in. Uh, the repository will, will be today. I learned blog. Okay, save. And then, uh, I need to enable discussions feature on the repository. So going to this, uh, uh, block of mine going to settings, we have the feature discussions. So I need to enable discussions. Okay, let's, uh, go back the installer. Uh, let's try again. I will, I'll refresh fresh. You see success. The repository meets the criteria. Uh, the discussion title contains a path name. So like, how should each discussion be identified? Uh, if I go to discussions on my other blog, here are the kind of, uh, slugs, uh, based on which the discussions are identified. Um, it can be based on the, uh, birth name. That's, that's fine. Uh, then, uh, discussion category. Uh, I think it doesn't matter much. Uh, features, uh, enable reactions, yes. Um, emit metadata, uh, doesn't really matter. Place the comment box above the comments. So, uh, if I go to my other blog, I have the possibility to create a new comment on top, but if I change it, it can be on bottom. I want to have it on top. So, um, comment box above the comments, uh, load lazily. So only when, uh, the user scrolls to the bottom, then the comments are going to be loaded. I think that's, uh, also good for the speed of loading the page. Uh, then the color. Let's use, uh, just default. Uh, and here we have a script that has been updated based on, uh, uh, everything we selected here. And we can add the script, uh, under our post in our post layout. So let's go to our basic Google blog. And you see we have our web pages, and inside the post we have the layout post. But, uh, we don't have actually the layout post file anywhere in our blog. So we would need to import the layout file from, uh, uh, our remote, uh, theme that is mil. See here we are using the theme mil. We have the gem mil installed here. So here we have the G mil. I'm going to, uh, open layouts, and I'm going to copy the post layout. So here I'm going to create a new folder and the Cisco layouts inside, I will have, uh, post do html, and I will just copy all of this. And let's put something, uh, on top just to make sure that, uh, uh, we are rendering, uh, imported layout. Now, let's, uh, restart just in case. Okay, so we have, we have our text for imported layout, but, uh, it is not rendering really nicely. Okay? So this one is kind of a weird one. I had to change layout, default to layout, uh, uh, base to default. So in the post layout that I imported, uh, I'm changing it to default. And you see now it renders and it also renders with this, uh, additional, uh, text that I, uh, put in. So, imported layout. Okay, so we have imported the post, uh, layout file, and now we can add the g discuss script. I will put it, uh, like somewhere at the end, I, uh, let's see if it works. So refreshing. Okay. And the comment section has loaded, uh, what will change if I post it, uh, on top of the article, it's going to read on top. So I think I will leave it as it was under the article tag. Okay. And wonderful. I can now leave comments. Now, I can't leave, uh, comments, uh, until I sign in with the GitHub. Let me sign in. Let's say hello. Um, it's trying to make the first request taking a vial. In the meantime, we can try it on our, uh, repository. Have a look at discussions. Okay, it hasn't been posted yet. I think it font work until I set a category Id. You see here, I left them blank. So going back to discuss, I'm going to select a category. Oh, yeah, I refreshed, so I'll have to do it all over again. Okay. Past name, uh, category, general box about the comments, load lazily, open a script. Okay, let's refresh comment. Okay, you see the comment has been posted. I can even leave a direction. And if you open the same discussion in the, our discussions section inside our repository, here it is. Wonderful. So you can moderate the discussions out of here. Looks good. So we have added the discuss comments for our comment section of our Jacob block. Now let's try adding the analytics like plausible analytics. I will go and create a new analytics, uh, website. So the domain name is alet.com. Uh, install plausible. Here's the script. I will want to put it, uh, in the general layout of my, uh, app. So I think I will need to import, uh, something else from mini, let's have, uh, a look. I'll go to Includes, and that should be the custom head theme. So I will create another folder name. The underscore includes inside custom head, and, uh, inside. I'll just put the script. Uh, let's see if, uh, the script renders. I'm going to go to inspect, find the plausible. I don't see it. Let's try refreshing. Okay, so I actually found why, uh, the script doesn't, uh, render. So, and I also understood why the layout has to be default or, and not base as we have set in the mini, in the layouts here, you see, we have base, but I had to set it to default. So the point is that, uh, by default, gem Mini is pointing somewhere else, not to the GitHub, uh, uh, source of mini. So here I'm going to have to explicitly say that I'm going to use mini from GitHub, because on RubyGems, I suppose it's not, uh, like the same version as in GitHub. So, um, I'm going to use, uh, this version of mini and let's run JL Serve. Okay, refreshing. You see now I have, uh, layer broken again, I'm going to set the IT to base, not to default. Okay? And now it should also pick up the custom head. So I will go to inspect head. Uh, I have a plausible edit, so it works. And now let's just finish up. I will, uh, start collecting data. It's checking if the installation has, uh, been added. Well, we have it locally, but we don't have it in production, so it'll not be successful. Now, we'll try to first push to production and then wait, let's actually do the, do the push. So we did just a couple of small changes. Um, we added comments with the GIZ cost, and we added plausible analytics. Let's, uh, push see if the app, uh, compiles and, uh, let's see in our actions. So it's built in. Okay, so it looks like the build was, uh, successful. You see, we had this, uh, error because, uh, uh, we did not deploy to production yet. Let's see, in production, do we have the comments? No. Uh oh. Yeah, we do have the comments, but the layout is, uh, uh, broken. And let's see if plausible works. Let's, uh, also have a look in the inspector. So, yeah, uh, plausible will most likely not work now. Okay, so what went wrong with our production deploy? Um, I think what we need to change is, uh, in our settings, uh, in pages, we have this, uh, default, uh, just build from branch, but we would want to say that we want to use our custom GitHub, uh, actions. So let's add the GitHub actions for JL. Let's, uh, add this workflow file and see if, uh, the app builds, uh, with it. So I think it should trigger a new build. And I will also push pull from remote to get the JL ci v ml file locally. Okay, so the build failed. Let's have a look. So the current run was detected as self-hosted. Yeah, so, uh, actually solved this problem recently. Let's have a look at how my digital contact works in, uh, another app. Um, so I set Ubuntu 2 22 0 4. Uh, at the moment, something doesn't work with the Ubuntu 24, and I set Ruby, uh, at V one. Okay, let's, uh, push once again and see if it deploys. Okay, I get another error that we need Ruby version 3.2 plus. And in the other block I use 3.3 0.3. So, uh, here I have, uh, used Ruby with Ruby version 3.1. Let's use 3.3 0.3. I'm going to push again and see if it deploys. Okay, so now it deployed successfully. Let's refresh the page and see if, uh, it works here in production. Okay, it works. Let's have a look. If, uh, the plausible script is available in the head, yes, it is available. Let's now. Okay, yeah, it already picked up. It says that there is one unique visitor on this specific page. So analytics works. You see, uh, we had to do quite a lot of, uh, extensions customizations, uh, on top of the default theme to make, uh, our extensions work. But, uh, sooner or later, you'll definitely want to, uh, run JL Workflow, uh, via your own CI file. You will want to import files to make the app really yours and really unique. Okay, so we've installed two extensions. We can also try and buy me a coffee. So, uh, let's try, uh, adding the website fidget. Um, okay, let's go with the code. I will put it, uh, I think in the custom head. Let's see if it trend does locally. Yes, fund will we have the buy me a coffee widget, I can click and it'll, uh, give the, uh, popup add, buy me a coffee. Okay. Uh, wonderful. Now finally, one more customization. Uh, here I see in the UL we have, uh, tag one tag, uh, uh, tool, the date stamp, and then the title of the post. So our URLs are quite strange, and I would like to just have the title of the post in our URL and to do so, I'm going to just add a line in our contact file. Perma link is going to be the title of, uh, post, uh, I found this in the JL documentation. So let's me restart the server. Okay, now it's, uh, not working. This old DRL is not working anymore. And now if I go to a post, you see the link is just the title of the post, no, HDML, no slashes, no date, just the title or the post. So looks good. And, uh, yes, that's it. So here's how you can add, uh, external plugins to your gel and change some patterns.