Hosting Hugo Website on Netlify for Free

Overview

The fastest way to deploy your Hugo site is via Netlify CLI:

• open Git Bash from the Hugo site project folder
• netlify link
• netlify build
• netlify deploy
• netlify deploy –prod

What is Netlify

Netlify is a web platform that offers hosting, continuous deployment, and serverless functions. It has become increasingly popular among web developers and designers due to its simplicity and ease of use.

Netlify allows you to host static websites, which are websites that don’t require a database or server-side processing. This makes it ideal for websites that are primarily focused on delivering content, such as blogs, portfolios, and documentation sites. The platform can automatically build and deploy your site whenever you push changes to a connected Git repository. This allows you to make updates to your site without having to worry about server configuration, security, or scaling.

Another benefit of Netlify is its integrated tools for modern web development. The platform provides a variety of plugins and add-ons that make it easy to add features like authentication, search, and e-commerce to your site. It also integrates with other popular tools, such as Google Analytics and Cloudflare, allowing you to manage all of your web services from one place.

Finally, Netlify is highly scalable, meaning that it can handle large amounts of traffic and data without slowing down. This makes it an ideal solution for businesses and organizations that need to host large, complex websites with high traffic volumes.

In conclusion, Netlify is a powerful and versatile web platform that offers a range of features for hosting, deploying, and managing websites. Whether you’re a beginner or an experienced web developer, Netlify makes it easy to build, deploy, and manage websites with confidence.

Deploying a Hugo Website on Netlify with GitHub

You’ll need the flowing installed: Hugo, VS code, Node.js, Git, GitHub Desktop. You’ll also need an account with GitHub and Netlify. The first thing you need to do is to setup a GitHub repository. Make sure you have a .gitignore file in the root to specify what shouldn’t be pushed to Git.

.hugo_build.lock
node_modules/
public/
resources/
.frontmatter

Go to Netlify and create a new site, connect the branch you would like to publish, make sure the publishing directory is public/````. Under Branches and deploy context select deploy on the production branch. Build command is hugo```.

You can add a Netlify File-based configuration to your Hugo project. The netlify.toml file should be placed in the root directory.

[build]
  publish = "public/"
  command = "hugo --debug --minify"
[build.environment]  
  NODE_ENV = "production"
  HUGO_VERSION = "0.105.0"

Do you need to use TOML or YAML for the configuration file if the Hugo website is set for YAML? Netlify doesn’t support a netlify.yaml configuration file and will read netlify.toml even if your Hugo website is set up for YAML.

Issues

Although I’ve had no problem with simple sites, for some reason I kept getting errors and Netlify wouldn’t deploy my site. The site would work on the local machine but wouldn’t deploy. As a consequence, I ended up burning deploy minutes in the attempt to fix bugs. Every time you push to GitHub Netlify tries to deploy your website and this has a cost as Netlify charges its users based on the amount of monthly data transfer and the number of build minutes used.

After multiple trial and error I found that adding baseURL --baseURL $DEPLOY_PRIME_URL and skipping the explicit mention of the Hugo version resulted in base URL links being messed up. For some reason the .Permalinks were being replaced with localhost:1313.

Apparently removing baseURL and adding the Hugo version fixed the issue.

Deploying a Hugo Website on Netlify with Netlify CLI

Netlify CLI is a command line interface tool that allows developers to interact with the Netlify platform directly from their terminal. With the Netlify CLI, developers can easily manage and deploy their sites, run local development servers, manage environment variables, and perform other tasks related to their Netlify sites. It provides a convenient and efficient way to work with Netlify, streamlining the development process and allowing developers to focus on writing code instead of navigating a web-based UI.

There are several advantages to deploying a site on Netlify via Netlify CLI rather than through GitHub, including:

• Speed and Efficiency: Deploying a site through the Netlify CLI can be faster and more efficient than deploying through GitHub. The CLI enables developers to quickly deploy changes to their site without having to navigate the GitHub web interface.
• More control over deployment settings: The Netlify CLI gives developers more control over the deployment process, including environment variables and build settings, allowing them to configure their sites exactly as they need.
• Local Development: The Netlify CLI provides a local development server that allows developers to test their sites locally before deploying to the live site. This can help to catch and fix any issues before they are published.
• Improved Workflow: By using the Netlify CLI, developers can integrate their deployment process into their existing workflow and tools, making it easier to manage their sites and deploy changes.

Overall, deploying a site on Netlify via the Netlify CLI provides a more streamlined and efficient deployment process, as well as additional control and flexibility for developers.

In my particular case, I was only able to successfully deploy this site through Netlify CLI rather than via GitHub, which in a sense is probably better as it consumes less Netlify resources (after you exceed 300 min you need to pay for it!).

To install Netlify CLI run a global installation on cmd in admin mode:

npm install netlify-cli -g

You can do the following while your local Hugo server is running. To run the Netlify CLI command open your Hugo website folder project right click and run cmd (or Git Bash).

netlify dev

The netlify dev command is a feature of the Netlify CLI that allows developers to run a local development server for their Netlify site. With the netlify dev command, developers can preview their site locally and make changes in real-time, allowing them to test and debug their code before deploying to the live site. This helps to catch and fix any issues before they are published, improving the overall quality of the site.

The netlify dev command runs a local development server that emulates the Netlify environment, including the environment variables, build settings, and functions defined in the Netlify site. This makes it easy for developers to test their sites locally and ensure that they will work as expected when deployed to the live site.

netlify link

The netlify link command is a feature that allows developers to link a local project to a Netlify site. The “netlify link” command creates a connection between a local project and a Netlify site, allowing developers to use other Netlify CLI commands to manage and deploy their site.

netlify build

The netlify build command is a feature that allows developers to build their site locally before deploying it to the live site. The netlify build command compiles the source code of a site and generates the production-ready assets, such as HTML, CSS, and JavaScript files, that can be served to the site’s visitors.

By using the netlify build command, developers can ensure that their site builds correctly and that all dependencies are resolved before deploying to the live site. This can help to catch and fix any build issues before they are published, improving the overall quality of the site.

The netlify build command also allows developers to test the performance and optimization of their site, as the generated assets will be optimized for production. This can help to improve the loading speed and user experience of the site.

netlify deploy

The netlify deploy command is a feature of the Netlify CLI that allows developers to deploy their built to the Netlify platform on a temporary URL. At the end of the process you are provided with a temporary link. If you are happy with the deployed site you can run ```netlify deploy –prod`` and the temp site will be transferred to the correct URL, in a few seconds.

Summary

In summary, the fastest way to deploy your Hugo is via Netlify CLI:

• open Git Bash from the Hugo site project folder
• netlify link
• netlify build
• netlify deploy
• netlify deploy –prod