tag:Blog

TIL: How you can Verify Your Hugo Blog on Mastodon Mastodon is an open-source social media website gaining a lot of traction at the moment, thanks in part to what is happening at Twitter. On Mastodon, we can verify a link on our profile is owned by us by linking back to Mastodon with a rel="me". Go to settings/profile In my case, it is this, https://hachyderm.io/settings/profile Find the verification link It will look something like <a rel="me" href="https://hachyderm.io/@majiy00">Mastodon</a> Yours may look different if you are on a different Mastodon instance Copy this into our site For example, in your footer footer.html <span style="display: inline-block; margin-left: 1em;"> Powered by <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> & <a href="https://github.com/reorx/hugo-PaperModX/" rel="noopener" target="_blank">PaperModX</a>. <a rel="me" href="https://hachyderm.io/@majiy00">Mastodon</a> {{- if .Site.Params.goatcounter }} <span> Analytics by <a href="https://{{ .Site.Params.goatcounter }}.goatcounter.com">Goatcounter</a>. </span> {{- end}} </span> PaperMod If you are using the PaperMod theme or similar. You can make this change to the config.yml: ...

TIL: How to Fix “Overflowing” Highlights in Hugo Code Blocks I am using the PaperModX theme, or at least a theme that is very close to that theme. I noticed an issue when I would try to highlight my code in code blocks. For example, if we had the following: ```js {hl_lines=[1]} const images = Array.from(document.querySelectorAll(".post-content img")); \``` It would highlight line number the first line in the code block but just up to the width of the code block. So if you scrolled to the right to see the rest of the code it would not be highlighted. ...

TIL: How to Add Hugo Shortcode Snippets in VSCode Hugo shortcodes are a great way to add functionality to our Hugo blog. However, I find them fiddly to add. So let’s see how we can leverage VSCode snippets to make it easier to add shortcodes to our markdown files. First, open the command palette, then select Snippets: Configure User Snippets. In my case, I want to add snippets specific to this project so I select New snippets file for '<project>'. Give it a name like shortcodes. ...

In this post, we will go over how we can add a page view “counter” 👀 to our Hugo blog, so we can see how many views each of our posts have had. We will do this using Goatcounter Analytics. Here is an example of what it may look like: Goatcounter Set Up This post assumes you have already created a Goatcounter account, more information here. And you have added Goatcounter analytics to your blog, see this post for more information Page Views Partial First, create a new file in your partial folder, in my case, it will be layouts/partials/page_views.html ...

TIL: You Can Schedule Posts on Your Hugo Blog using Netlify and Gitlab CI This post in fact will be a scheduled post I’m writing it on the 20th of November but it will be published on the 23rd of November. Assuming we are using Netlify to deploy our website, what we will need to do is trigger a rebuild of our site every day using Gitlab CI. Since Hugo builds a static site to publish our content after a set date we will need to rebuild our site. So let’s see how we can automate that. Else the post won’t be visible until I next make a commit to my main branch. ...

TIL: You can add a custom domain to your Goatcounter site When you create an account on Goatcounter and add a new site, you can view the analytics by going to [sitecode].goatcounter.com. For example, haseebmajid.goatcounter.com. However, we can use a custom domain, to view your analytics. Custom Domain You will need a domain, that you can control the DNS of to do the following! Goatcounter We can do this by: First go to your Goatcounter site i.e. haseebmajid.goatcounter.com Then go to Settings Then Domain settings > Custom domain Add your domain i.e. stats.haseebmajid.dev Press the Save button on the bottom left Domain Finally, we need to go to our domain management tool, such as namecheap and add a new entry: ...

TIL: How You Can Zoom in on Photos in your Hugo Posts You can see what we want to achieve in the GIF below: How? Add the following code to your Hugo blog in my case using the Papermod theme I add it to the layouts/partials/extend_footer.html. <script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js" integrity="sha512-N9IJRoc3LaP3NDoiGkcPa4gG94kapGpaA5Zq9/Dr04uf5TbLFU5q0o8AbRhLKUUlp8QFS2u7S+Yti0U7QtuZvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <script> const images = Array.from(document.querySelectorAll(".post-content img")); images.forEach((img) => { mediumZoom(img, { margin: 0 /* The space outside the zoomed image */, scrollOffset: 40 /* The number of pixels to scroll to close the zoom */, container: null /* The viewport to render the zoom in */, template: null /* The template element to display on zoom */, background: "rgba(0, 0, 0, 0.8)", }); }); </script> The highlighted line may need to change depending on how your blog is setup. For my blog using the PaperMod theme. This gets all the images on the page .post-content img. ...

TIL: How you can add goatcounter to your Hugo blog In this TIL post, we will go over how you can add Goatcounter to your Hugo Blog. Goatcounter is an open-source privacy-friendly analytics tool, an alternative to Google Analytics. Goatcounter Account This post assumes you have already created a Goatcounter account, more information here. Luckily it is very easy to add Goatcounter to our blog. First, create a new partial HTML file. In my example, it will be at layouts/partial/analytics.html. However, you can call and place your file where ever you want, just remember it for later. ...

About This Site This site was built with hugo and the PaperModX Theme (using a fork of a fork at the moment). I decided to go with an existing theme rather than creating my own this time, to one save time but also to give the site a more consistent feel. I am no designer and I felt my last website (v3), really felt like a bunch of different websites thrown together. It was a great way to learn React, TailwindCSS and a bunch of other technologies. ...