Building a New Hugo Site with AI Assistance

Mike Romero

Building a Hugo Site

As part of my profile update process, I decided to do it this go around using Agentic AI via Github CoPilot. This is fascinating technology where an AI Coding agent performs much of the work on my behalf. I am using various agents as part of this, and at work, i am using Claude Code. It is incredibly powerful but has a price to match its power.

As part of this process, i am using Github Copilot to develop the site on their $10 dollar tier and the VS Code plugin.

For technology, i am using Hugo, a static site generator written in Go. It is fast, efficient, and allows for easy deployment to various hosting platforms.

Setting Up Hugo

To get started with Hugo, follow these steps:

  1. Install Hugo: Download and install Hugo from the official website.
  2. Create a New Site: Run the command hugo new site mysite to create a new Hugo site. (I am using my site, mikeromero.us, as an example.)
  3. Choose a Theme: Select a theme from the Hugo themes repository and follow the installation instructions. (I am using the Ananke theme) - each theme is different, so be sure to read the documentation for the theme you choose on how best to activate and use it.
  4. Add Content: Create content files in the content directory using Markdown format. you can then use the command hugo new content/blog/my-first-post.md to create a new blog post.
  5. Run the Development Server: Use the command hugo server to start the local development server and preview your site at http://localhost:1313.
  6. Build the Site: When ready, run hugo to generate the static files in the public directory.

AI’s involvement

I used AI to help activate the site with a simple prompt in VS Code:

Create a basic Hugo site with the Ananke theme, including an about page, a contact page, and a blog section.

Then i sat back and watch copilot do its thing.

Configuring the site

It is really weird to be manually writing this blog post while AI is writing the code and pointing me to where to run the configuration. But so far, i am about an hour in and have some of the basic bones built. Up next, will be further configuration. I need to update the About.md and Contact.md files, as well as the home page. I will also need to update the config.toml file to reflect my information - this is a part of how Hugo works, as it uses the config file to set site-wide parameters.

Conclusion

Building a Hugo site with the help of AI tools like GitHub Copilot can significantly speed up the development process. The combination of Hugo’s simplicity and the power of AI coding agents allows for efficient creation and management of static websites. It is amazing to see not only this technology’s capabilities but also how well it works. There is a lot of coaching, but honestly it is amazing to watch it work.

I know that AI right now is a hot topic and appears pretty scary. Trust me, watching it code as well or better than i can is surreal. But I have come to view it like a higher coding language. After all, I am a C#, Golang, Python, and Powershell developer. None of this is hexadecimal or assembly language, but it is a higher level of abstraction that allows me to focus on the problem at hand rather than the implementation details. AI is just another tool in my toolbox, and I am excited to see how it will continue to evolve and improve my workflow.