Why Hugo? Speed, portability and a single binary. The turnaround speed of the project is insane. You setup a project instantly. Pick a theme. Make your changes to the content and styling. Done.

I have used the yassi theme as I like its timeline blog layout and projects carousel.

When setting up a new project, the directory structure can feel overpopulated. Each folder has its own purpose:

  • assets/ - contains global resources typically passed through an asset pipeline. This includes resources such as images, CSS, Sass, JavaScript, and TypeScript.

  • static/ - is an input folder where you manually place source assets.

  • public/ - (system generated) is an output folder automatically generated by Hugo.

  • content/ - holds the actual pages, articles, and unstructured text of your website (usually written in Markdown).

  • data/ - holds structured, programmatic information (like JSON, YAML, or TOML files) used to supplement your templates or create dynamic components.

  • config/ - contains your project configuration.

  • layouts/ - contains templates to transform content, data, and resources into a complete website.

  • i18n/ - contains translation tables for multilingual projects.

  • themes/ - contains one or more themes to be used in the project.

  • resources/ - (system generated) contains cached output from Hugo’s asset pipelines, generated when you run the hugo build or hugo server commands.

  • archetypes/ - contains templates for new content.