Creating a Website With HUGO, Git, Netlify and Maybe Some ChatGPT

  • Mon, May 29, 2023
  • 4-minute read

This it to outline my experience of creating a website using the powerful combination of HUGO, Git, and Netlify. These tools will not only make the process easier but also provide a seamless workflow for development and deployment.

HUGO: The Static Site Generator

First and foremost, let’s talk about HUGO. It’s a fast and flexible static site generator that allows you to build websites with ease. Whether you’re a beginner or an experienced developer, HUGO’s simplicity and extensibility make it a popular choice.

To get started, you’ll need to install HUGO on your local machine. Once installed, you can create a new HUGO project by running a simple command in your terminal: hugo new site my-website

This creates our baseline directory structure which should look similar to below.

[admin@fedora my-website]$
archetypes   content  go.mod  layouts    static
config.toml  data     go.sum  resources  themes

This command will create a new directory named “my-website” with all the necessary files and configurations. it’s that simple to have a static site dir spun up in a matter of secconds. you can then look at cloning your theme and bringing your site to life.

To enhance your HUGO website, you can easily clone and set up pre-built themes. Hugo offers a vast collection of themes to choose from. like Anatole, the theme i’m currently using here! https://themes.gohugo.io/themes/anatole/

Simply navigate to your project’s themes directory and run git clone <theme-repository-url> to clone a theme. Once cloned, customize the theme’s appearance and behavior in your project’s configuration file this is the config.toml and your themes documentation should show you exatcly what params are available for use. or, you can go under the hood completly and write your own HTML, CSS and Javascript.

Git: Version Control and Collaboration

Next, let’s talk about Git. Git is a distributed version control system that helps you track changes to your project over time. It allows you to work collaboratively with others and provides a safe way to manage your source code. I linked git to vscdoe and created a private repo for my website, then you initialize git in your websites root directory and you have version control at the flick of a switch!

Initialize a new Git repository within your HUGO project directory by running the following command:

cd my-website 
git init

Now, you can start tracking changes to your project by adding files, committing changes, and branching as needed. Git’s branching feature is particularly useful when experimenting with new features or making changes without affecting the main codebase.

Netlify: Effortless Deployment

Once your HUGO website is ready, it’s time to deploy it and make it available to the world. Netlify is a hosting service that simplifies the deployment process and provides additional features like continuous deployment, form handling, and CDN support. for me I linked netlify to my Git repository that contained my website, this then automatically builds and deploys the site. (To save yourself a headache a lot of documentation will tell you to run the command Hugo to build your website locally, if you do this, and include the public directory in your repo it will cause your build to fail and make you spend a few hours scratching your head!)

To deploy your website using Netlify, follow these steps:

  1. Sign up for a Netlify account at netlify.com.
  2. Connect your Git repository to Netlify, enabling automatic deployments on each commit.
  3. Configure the build settings for your HUGO project, specifying the build command and output directory.
  4. Once configured, Netlify will automatically build your website and make it live.

Netlify also provides a custom domain feature, allowing you to use your own domain name for your website. You can either purchase a domain through Netlify or connect an existing domain by updating the DNS settings. The overall process is incredibly simple!

Conclusion

HUGO’s simplicity, Git’s version control capabilities, and Netlify’s effortless deployment make it a great combination for you initial intorduction to web dev and deploying a simple static website. the key is to start small and gradually add features and improvements over time. With HUGO, Git, and Netlify, you have the necessary tools to create a professional and polished website that showcases your work or ideas to the world.

This video created by Envato Tuts+ is an amazing resource I followed in order to build this website and would highly recomend using it too!

Thumbnail image

Happy coding!