Hugo has a built-in command that generates a website project for you; this includes all of the files and directories you need to get started.
Execute the following command to tell Hugo to create a new site named portfolio:
| | $ hugo new site portfolio |
This creates the portfolio directory, with the following files and directories within:
| | portfolio/ |
| | ├── archetypes |
| | │ └── default.md |
| | ├── config.toml |
| | ├── content |
| | ├── data |
| | ├── layouts |
| | ├── static |
| | └── themes |
Each of these directories has a specific purpose:
The archetypes directory is where you place Markdown templates for various types of content. An “archetype” is an original model or pattern that you use as the basis for other things of the same type. Hugo uses the files in the archetypes folder as models when it generates new content pages. There’s a default one that places a title and date in the file and sets the draft status to true. You’ll create new ones later.
The config.toml file holds configuration variables for your site that Hugo uses internally when constructing your pages, but you can also use values from this file in your themes. For example, you’ll find the site’s title in this file, and you can use that in your layout.
The content directory holds all of the content for your site. You can organize your content in subdirectories like posts, projects, and videos. Each directory would then contain a collection of Markdown or HTML documents.
The data directory holds data files in YAML, JSON, or TOML. You can load these data files and extract their data to populate lists or other aspects of your site.
The layouts folder is where you define your site’s look and feel.
The static directory holds your CSS, JavaScript files, images, and any other assets that aren’t generated by Hugo.
The themes directory holds any themes you download or create. You can use the layouts folder to override or extend a theme you’ve downloaded.
In your terminal, switch to the newly created portfolio directory:
| | $ cd portfolio |
Take a look at the site’s configuration file. Open the config.toml file in your text editor. You’ll see the following text:
| | baseURL = "http://example.org/" |
| | languageCode = "en-us" |
| | title = "My New Hugo Site" |
This file is written in TOML,[11] a configuration format designed to be easy to read and modify. The default configuration file only has a handful of data, but you’ll add more as you build out your site.
Hugo’s internal functions use the baseURL value to build absolute URLs. If you have a domain name for your site, you should change this value to reflect that domain. In this book, you’ll use relative URLs, so you can leave this value alone until you’re ready to deploy your site to production.
The title value is where you’ll store the site’s title. You’ll use this value in your layouts, so change it from its default value:
| | baseURL = "http://example.org/" |
| | languageCode = "en-us" |
| » | title = "Brian's Portfolio" |
Save the file and exit the editor. You’re ready to start working on the site itself.