Create your own website with HUGO

Hugo is a framework for building websites, technically speaking, building static pages. You could build your own website with the only prerequisite of some command line and start writing immediately with markdown.

Step 0. Install Homebrew

If you have a Mac but not using Homebrew, you definitely have to try this package manager. And we will need it to install Hugo anyway.

Use the following command to install Homebrew:

> /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

> brew --version # check installation

Step 1. Install Hugo

If you have installed Homebrew successfully, then you could have Hugo installed in one line:

> brew install hugo
> hugo help # you are good to go!

For users of other OS

If you are not using macOS, you need to check more complete instructions at Install Hugo.

Step 2. Create a new site

> hugo new site /@path/your-new-site

The above will create a folder named your-new-site in your designated @path. And it will be the root of your newly created Hugo web application.

Step 3. Add a theme

Being one of the most popular open-source framework for building websites, Hugo has a large and responsive community producing cool themes. Complete list of available themes can be found here.

From the root of you Hugo site:

> cd @your-new-site
> git init
> # add as submodule your favorite theme into `themes/@your-theme`:
> git submodule add https://github.com/@author/@your-theme.git themes/@your-theme
> # example
> # git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

> # Generate site files into public directory
> hugo -t @your-theme

See also Hugo’s Quick Start.

Step 4. Start writing

Congratulations, your first blog post is only one stone’s throw from here!

Creating Posts

Posts should generally go under a content/blog directory. Simply run:

> hugo new blog/your-new-post.md

the above will create your-new-post.md under content/blog/, as well as the content/blog/ directory itself if not exist.

For posts to be displayed on your site, you could do one of the following: * add draft = false in the post’s front matter * or use the --buildDrafts option when building * or add builddrafts = true in config.toml.

Creating Fixed Pages

Fixed pages such as an About page should preferably go under content/fixed or be present at the root of the content directory(my preferable way).

> hugo new about.md

The static pages you are going to build is genuinely text-based and the only tool you need to grab is the markdown makeup language.

Step 5 - Infinity. Have fun playing with it.

The best approach to learn something is to play with it. Actually I build this site as a 2018 birthday gift to myself.

Recommended starting point: