What Can Be Added!

Yes, it's possible to extend Hugo's functionality. You can add missing features through modules that modify the build process. For example, I was missing MDX support in Hugo. I can address this through a module that renders MDX at build time. I haven't tried it myself, but it seems possible. I can also potentially add a parallel building pipeline—if we can call it that. This might involve using tools like Vite, Turbo, or Webpack. However, this approach would likely complicate the build process and potentially slow down Hugo's main building mechanism. These integrations have been used to incorporate Tailwind and other frontend libraries. Interestingly, if you look at Hugo's upcoming features, you'll see plans for integrating Tailwind and other technologies.

Building on Vercel

I used some third-party Hugo tools, specifically HugoMods. The icons module caught my attention because I wanted to add icons to my website without importing an entire font. While searching, the Icons module was the first thing that appeared. It offers a variety of icon vendors, including Bootstrap, Font Awesome, Feather icons, and more. Locally, everything worked perfectly. However, after pushing my changes, nothing seemed to change. Upon checking the build page in Vercel, I noticed...

[12:10:48.021] Running build in Washington, D.C., USA (East) – iad1
[12:10:48.210] Cloning github.com/mohessaid/mohessaid (Branch: main, Commit: eaeecd1)
[12:10:48.449] Cloning completed: 238.727ms
[12:10:49.038] Restored build cache from previous deployment (5i5sCdjnY3KZXgGBqbqfgJUjrwYB)
[12:10:49.132] Running "vercel build"
[12:10:49.714] Vercel CLI 39.0.2
[12:10:50.440] Total in 3 ms
[12:10:50.441] Error: failed to load modules: failed to download modules: binary with name "go" not found in PATH
[12:10:50.446] Error: Command "hugo --gc" exited with 1
[12:10:50.625]

When Hugo attempted to install the modules needed for the build, it couldn't find the Go binaries. I sought help from Claude and GPT, hoping for a quick solution, but they were unable to provide direct assistance. I had to guide them through each step, and eventually, I lost hope in their ability to help me. I had even used Claude for a solution that was nearly successful, if not for the limitations in the Vercel input fields.

What Worked?

I navigated to the settings page of my website in the Vercel dashboard. In the "Environment Variables" tab, I added a variable named "HUGO_VERSION" and set its value to the latest available version of Hugo.

In the "General" tab, select Hugo as the framework preset. Then override the build command with the following:

curl -L https://go.dev/dl/go1.22.2.linux-amd64.tar.gz -o go1.22.2.linux-amd64.tar.gz && tar -C /usr/local -xzf go1.22.2.linux-amd64.tar.gz && export PATH=$PATH:/usr/local/go/bin && go env GOTPATH  &&  hugo --gc --minify

Note: I'm using Go version 1.22.2, which is the latest at the time of writing. You can modify the version to match your specific requirements.

Why Build Command?

I understand your skepticism. Like you, I thought I had a clever solution. Initially, I attempted to install Go in the Install Command field, but it failed miserably. Vercel's build process couldn't locate the binaries, despite my exhaustive troubleshooting. After exploring countless potential solutions without success, I stumbled upon a GitHub issue where someone had placed their entire installation process directly in the build field. Replicating their approach, I finally achieved success. At this point, the solution speaks for itself. Attempting to place these steps in the install command field will likely result in errors.

Or this one

Installing Amazon Linux Extras won't solve the Go installation challenge. The version of Go available through this method is significantly outdated. I tested this approach thoroughly and encountered consistent failures. I attempted to use both yum and dnf package managers in the install command, but neither method successfully resolved the Go binary issue.

Finally, I shared this post across different platforms to test which one of them get first in search results. I was willing to do this months ago. However, I couldn't the right post for it. You can follow the experiment from here.

I have been using Ubuntu for the last six years or so. As you may have guessed, this tutorial will assume you are using the same system or something similar, like WSL in Windows.
To use Xdebug in Lando, as mentioned in the documentation, you must include this line under the configuration of your app server:

config:
    xdebug: true

In the documentation after this step, you have to set up your launch.json file in VS code.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/app/": "${workspaceFolder}/",
      }
    }
  ]
}

Also, in the documentation, you have to run. lando rebuild -y So the changes take place in your Lando image. However, most of the time, you will run to issue regarding the listening port. This was mentioned at the end of the documentation under the known issues.

To fix it, you have to add a new rule to the iptables and allow the target port.

sudo iptables -A INPUT -p tcp -d 0/0 -s 0/0 --dport 9003 -j ACCEPT

You have to restart your Lando workspace to get things working.

For starters, you can take any image you have from your archive and follow this tutorial. If you don't have any, you can use the snippet below, which says, "Hello world!" To host your image in Github packages, you have to tag it with the full path to your image in Github as follow

docker tag hello-world-alpine:latest ghcr.io/mohessaid/hello-world-alpine:latest

Of course, you have to build the image first, and also, you can name it directly with the Github full name if you find it appropriate.

docker build --no-cache -t hello-world-alpine .

The dot at the end refers to the current working directory which contains in our example the following Dockerfile

FROM alpine:3

CMD ["echo", "Hello World from Github and Hashnode!"]

After that, you have to push the image, but you have to log in with your Github account before you do so. Like you log into your docker hub account from the terminal, you do it with Github. The sole difference is in the password. With Github, you need to create a personal token with the privileges of writing to your packages and use it as a password.

1. From your profile menu go to settings
2. Go to Developer settings
3. Go to Personal access tokens
4. Generate a new token with the following permissions
5. Set the expiration period and a name and hit Generate token.

You have one chance to copy your new token and use it to log in. As the Github documentation mentions it is a good practice to save the token in an environment variable and use it as follows to log in.

echo $PAT | docker login ghcr.io --username phanatic --password-stdin

If you don't know how to create this variable just use copy-paste the following command.

export PAT=you token here

Finally, push your image and enjoy using it inside your Github actions or share it with your friends or community.

docker push ghcr.io/mohessaid/hello-world-alpine:latest

Associate your image with a repository

You can associate your image with a repository using the label in your docker file or from Github. The label should have the following syntax.

LABEL org.opencontainers.image.source=https://github.com/mohessaid/hello-world-alpine

The source or the URL refers to your repository.