Creating a new Hugo site

This is the first Hugo command you'll type.

hugo new site site-name

This will create a new Hugo site complete with all the folder structure. This new Hugo site will not contain any content or themes yet, you can add them using the hugo new command (see below).

Creating new Markdown files

Markdown files are one of the Hugo files you'll be creating frequently, especially if your Hugo site will have a lot of content or pages. To create a new hugo markdown file:

hugo new post1.md

And there you go, a new markdown file was created under your content folder.

Markdown files created via Hugo CLI already includes the front-matter defaults you've set in your default.md file. The new Markdown files are generated in your content folder by default. But if you want to further arrange your files into subfolders, just add your the name of your subfolder right before the markdown file name.

 hugo new subfolder-name/post1.md

folder-name is the name of the folder under your content folder.

Running the Hugo Server

If you're familiar with Visual Studio Code's live server, Hugo has it's own command for running it's server. To preview your website onto your browser: hugo server Your web server will now be available to view on your browser at http://localhost:1313/.

Hugo automatically refreshes your website with updated content while you're editing it, no need to refresh your browser or re-run the hugo server command. To stop the server, return to the terminal and press the keyboard shortcut ctrl+c.

When running the server, Hugo will only show and build pages that aren't drafts. Posts/files with dates set in the future won't be showed or generated by Hugo as well. Only files dated today and older are built and shown. If you want to preview draft pages in the server, you just need to add -D at the end of the command.

hugo server -D

If you want to view the future dated files:

hugo server --buildFuture

Building your Hugo site

If you are done editing, testing and creating your Hugo website, it's time to build and generate your website files for publishing. This can be done with the command:

hugo

Hugo will generate your website files under the public folder of your Hugo project folder. You can now transfer your files and publish your website.