In this post, I will go over how you can use Hugo’s archetypes to quickly create new posts. I have previously used NetlifyCMS to help create new posts, but recently I have found that to be a bit overkill for my blog. So I decided to simplify my workflow by using Hugo’s archetypes 1. Archetypes allow us to create templates markdown files, which is then used to create our blog posts. ...
TIL: How to Use Prettier with Hugo/Golang Templates If you try to use prettier on a (Hugo) Golang HTML template you may get something that looks like this: {{- if or .Params.author site.Params.author }} {{- $author := (.Params.author | default site.Params.author) }} {{- $author_type := (printf "%T" $author) }} {{- if (or (eq $author_type "[]string") (eq $author_type "[]interface {}")) }} {{- (delimit $author ", " ) }} {{- else }} {{- $author }} {{- end }} {{- end -}} into this ...
Netlify CMS Deprecated Since I have written this post Netlify CMS has been deprecated in favour of decap-cms. Thanks to @roneo for raising this issue. So the Netlify CMS part of this article is no longer relevant. I also no longer use this workflow, I instead just create articles locally using a script now!!! In this post, I will go over my new workflow for creating articles/posts that I now use with my new (Hugo) 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. ...
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. ...
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>'. ...
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. ...
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. ...
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: ...
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. ...
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. ...
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. ...