Working on mulitple braches at once using git worktree

Working on multiple branches at once Git worktree enables you to have multiple working directories linked to the same repository. Each directory can have its own branch checked out. And you can edit the code for each feature without changing or stashing the changes you did on each branch. Worktree creation The following command will create a new directory, debug with branch1 checked out. You can browse the ../debug directory and change the code as per your development for branch1. git worktree add ../debug branch1pwd echo somenewfeature on branch 1 > somenewfeature cat somenewfeature/home/cold/Projects/Personal/gitworktreedemo/debug somenewfeature on branch 1In the meanwhile you can keep editing the root directory with the main branch. pwd echo somenewfeature on main 1 > somenewfeatureonmain cat somenewfeatureonmain/home/cold/Projects/Personal/gitworktreedemo/main somenewfeature on main 1You can run the git commands going inside each directory. pwd git add . git status/home/cold/Projects/Personal/gitworktreedemo/main On branch main Changes to be committed: (use "git restore --staged <file>..." to unstage) new file: somenewfeatureonmainpwd git add . git status/home/cold/Projects/Personal/gitworktreedemo/debug On branch branch1 Changes to be committed: (use "git restore --staged <file>..." to unstage) new file: somenewfeatureList existing worktrees You can list your worktrees from the main as well as the debug directories. git worktree list/home/cold/Projects/Personal/gitworktreedemo/main e0ccbca [main] /home/cold/Projects/Personal/gitworktreedemo/debug 42ad28a [branch1]Remove a worktree When you are finally done with the feature branch, you can delete the worktree using remove command. git worktree remove ../debug ls .. git worktree listmain /home/cold/Projects/Personal/gitworktreedemo/main e0ccbca [main]Any commit you did on the feature branch will automatically be reflected in the main codebase. git checkout branch1 git log --onelineA somenewfeatureonmain 82cad2d done 42ad28a A commit on branch1 e0ccbca A commit on mainAdvice on working with worktreesAs the new directory will not be ignored by default, it is best to create your worktree directories out of git rootThe way I create my worktrees is I create a new directory with project name. Then I clone my actual repository inside this directory and keep my worktrees on the same level as project. For example, my main project is cloned inside main directory and I created debug directory in the same level as main. tree .. ├── debug │   └── somenewfeature └── main └── somenewfeatureonmain2 directories, 2 files

Displaying full content in rss.xml in Hugo

Create a new file at layouts/_default/rss.xml. You can define your rss.xml as per your liking. By default rss.xml only displays the summary of your articles. But I want to display the whole content. This helps me in syncing my posts with my dev.to site. You can find the Hugo's default rss.xml at Hugo's Github repo. Let's copy the contents to our rss.xml file that we just created. Then change the description to show content instead of summary as follows. -<description>{{ .Summary | transform.XMLEscape | safeHTML }}</description> +<description>{{ .Content | transform.XMLEscape | safeHTML }}</description>Before the changes there were only 504 characters in the characters. curl localhost:1313/index.xml | grep "description" | head -n 3 | tail -n 1 | wc -c: 504After the changes the number of characters increased significantly as the whole blog is being rendered in the description. curl localhost:1313/index.xml | grep "description" | head -n 3 | tail -n 1 | wc -c: 14582

Partials in Hugo

Partials and code reusability Hugo provides a nice mechanism to separate your components and stitch them at different places. This means you can design your components like nav-bar or menu bar and stitch them in all of your layouts. Earlier, we wrote some code to load tailwind in our index page. But we do not want to write this boilerplate code for all our pages. Instead we should have defined the tailwind loader code in a component and call it from all the layouts. Actually, we should have called the boilerplate code from baseof.html from which all other layouts are inherited. baseof.html When we created the theme, a special file was created for us, baseof.html. Every other layout inherits baseof.html. If you look at the contents of baseof.html which was generated for use. You will find 3 partial sections, head, header and footer. These are the default standards but you will go on creating partials as your code base becomes more complex. The main block denoted by {{ block "main" . }}, is where your content from other pages will be inserted. You can define your layout as main in other layout files and that block will be inserted here. <!DOCTYPE html> <html> {{- partial "head.html" . -}} <body> {{- partial "header.html" . -}} <div id="content"> {{- block "main" . }}{{- end }} </div> {{- partial "footer.html" . -}} </body> </html>You can ignore the dashed infront and at last of the decalrations. These are the guide for Hugo to trim spaces infront and back.head.html After html tag we have a partial head.html instead of a head tag. Hugo is smart enough to generate head attribute from the partial. Looking closely, it just process your partials and replaces the partial block with it. We could have defined out tailwind loading code here as follows. Now we got the support for tailwind everywhere in our site. You can also define some meta tags or other libraries here. <head> {{ with resources.Get "css/main.css" }} {{ with . | css.TailwindCSS }} <link rel="stylesheet" href="{{ .RelPermalink }}"> {{ end }} {{ end }} </head>Defining custom partials Defining partials is as easy as it can be. You just need to create a file under partials directory. And write whatever processing you want to do. And include it in you main layout using {{ partial "your-file.html" . }}. You can pass any data along with your partial definition. In the above partial definition, we are passing the current context to our partial. Make CSS styling a partial Let's create a new partial by creating a file called css.html. This will contain the logic to process and import our tailwind libraray. The contents of css.html will be as follows. {{ with resources.Get "css/main.css" }} {{ with . | css.TailwindCSS }} <link rel="stylesheet" href="{{ .RelPermalink }}"> {{ end }} {{ end }}And our head block will include this as a partial as follows. The below code goes inside baseof.html. <head> {{ partial "css.html" . }} </head>Modify the pages to use baseof You will need to define the main block in all your layouts. This will help Hugo to link the contents of layouts page and combine it with baseof to generate the rendered page. Below is how, I modified my index.html page. {{ define "main" }} <p class="text-red-500">This paragraph is red.</p> {{ .Content }} {{ end }}curl localhost:1313 | grep "main.css": <link rel="stylesheet" href="/css/main.css">This looks as expected. We can see out main.css linked to our homepage. Now let's modify the list.html layout and define main here as well. {{ define "main" }} <ul> {{ range .Pages }} <li>{{ $.Site.Title }} - {{ $.Title }} - {{ .Title }}</li> {{ end }} </ul> {{ end }}curl localhost:1313/posts/ | grep "main.css": <link rel="stylesheet" href="/css/main.css">Awesome, we can now use tailwind from anywhere in our website. Summary In this post we explored partials which is basically a way of reusing the code in Hugo. We learned about baseof.html which is inherited by all the layouts. We combined our tailwind learning with partials and created a css.html partial which can now be used from anywhere.

Tailwind support in Hugo

Expectations from this post With the version 0.128.0, Hugo started supporting Tailwind internally. In this post, let's configure Tailwind and display some text in red. Tailwind and other supporting apps We will install the below 4 packages.tailwindcss - This is the core Tailwind library and is required for using tailwind tailwind/cli - This is a CLI tool for Tailwind that helps in building tailwind styles postcss - This is a library to process CSS with JavaScript plugins. autoprefixer - This is a postcss library that helps in automatically generating the vendor prefixes like -webkit- and -moz-.We will install these packages as dev as they play no role after building the site. npm install --save-dev tailwindcss @tailwindcss/cli postcss autoprefixerPostCSS config You need to specify the plugins for postcss. This can be done by creating a file, postcss.config.js. You can add the plugins you want to use here as follows. For now, we will add tailwindcss and autoprefixer as the plugins. plugins: { tailwindcss: {}, autoprefixer: {}, }, };Tailwind config We can create a more advanced config for Tailwind later. For now, let's just create a file, tailwind.config without any contents in the theme's root directory. Loading Tailwind on the index page Let's first create a resource main.css in the assets directory of the theme. Here we will import Tailwind and then we will load this resource in our index file using some Hugo magic. main.css In the theme's root directory, let's create a directory assets/css and add a file main.css here. The content of the file will just load the Tailwind library. @import "tailwindcss";index.html Here, we just want to add main.css as our stylesheet. This is done by using link tag. First we want to load the resource then we want to process it using tailwind and add it to our page. We can use Hugo's with function to load the file and again using with, we can process the obtained file using tailwind. The below snippet will do the trick. {{ with resources.Get "css/main.css" }} will try to get the main.css file. Hugo will look into the assets direcetry for css/main.css. {{ with . }} will only be processed if the file was found. And if found we can pipe the contents to be processed by css.TailwindCSS provided by Hugo. {{ with resources.Get "css/main.css" }} {{ with . | css.TailwindCSS }} <link rel="stylesheet" href="{{ .RelPermalink }}"> {{ end }} {{ end }}This would be enough to start using Tailwind functionalities. To test if it is working of not, we can add a simple text and use some tailwind features to make it red. Inside the index.html, body let's add the following. Adding class as text-red-500, should turn the content of <p> to red. <p class="text-red-500">This paragraph is red.</p>Taking a peek Let's first curl the homepage and verify of link was created successfully. curl localhost:1313<html> <head> <meta name="generator" content="Hugo 0.144.2"><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <title> Shubham&#39;s corner </title> <link rel="stylesheet" href="/css/main.css"> </head> <body> <p class="text-red-500">This paragraph is red.</p> </body> </html>The file main.css here is the processed main.css and will look very different than what we have written.This is good, next let's see the actual site.The rendered text is red which means we were finally able to load out Tailwind. Summary In this post, we saw how to enable the support of Tailwind CSS in out Hugo site. We added some text and turned it to red using Tailwind classes. Next, we will explore code re-usability in Hugo which is where partials come to play.

Upgrading Hugo to latest version on Debian based systems

There is a bad news for Ubuntu (or any Debian based OS) user if you have installed Hugo using apt. The official apt repository is not being updated continuously. Today, I wanted to experiment with the Tailwind support introduced in Hugo 0.128.0. But the apt package manager does not has this version. The latest version is 0.92.2 as of now. apt list -a hugo: Listing... : hugo/jammy-updates,jammy-security,now 0.92.2-1ubuntu0.1 amd64 [installed] : hugo/jammy 0.92.2-1 amd64In such scenarios, you can install the .deb file directly from the published releases. The disadvantage of this method is, you will lose the ability to upgrade the version automatically. In the future, you will be restricted to download the deb file and install the updated version. Anyways, here are the steps to do so. First look for the latest (or the version you want) to install at the GoHugoIO release page - https://github.com/gohugoio/hugo/releases At the time of writing this post, the latest version is 0.144.2. Any my current version is 0.92.2. hugo version: hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1From the Downloads directory, I can run the below command to download the deb file that I want to install. You can use any directory to download this file. Generally people use /tmp, but I like all my downloads in my Downloads directory. wget https://github.com/gohugoio/hugo/releases/download/v0.144.2/hugo_0.144.2_linux-amd64.debNext you can install the deb file as follows. ls | grep hugo: hugo_0.144.2_linux-amd64.debdpkg -i hugo_0.144.2_linux-amd64.debThis should upgrade your installation to latest. hugo version: hugo v0.144.2-098c68fd18f48031a7145bedab30cbaede48858f linux/amd64 BuildDate=2025-02-19T12:17:04Z VendorInfo=gohugoioHope this will help you upgrading Hugo to latest version on Debian based systems.