In this post we will learn develop and deploy Hugo static website on github/gitlab

Step 1 : Install Hugo

You can download and install hugo based on your operating system. from the following site.

https://github.com/gohugoio/hugo/releases

On linux machines you can use snap as follows.

  $ sudo snap install hugo

To install .deb package use following command to install deb package

  $ sudo dpkg -i hugo*linux-64bit.deb

Step 2 : Creating new site

In order to initilize the directory structure of hugo website we will use hugo create new site command

$ hugo new site tayyabsayyad.github.io

Give the name of the directory as the same name of the reppository. Reository name is as follows,

your_github_account_name.github.io

Step 3 : Add a Theme

Now you will need a theme for your website. You can visit https://themes.gohugo.io/ and find a theme which you like. then you will clone it into the theme directory of newely created website.

$ cd tayyabsayyad.github.io
$ cd themes
$ git init
$ git submodule add https://github.com/knadh/hugo-ink.git

  1. Add theme name to config.toml

  2. Adding Content

    hugo new posts/my-first-post.md

  3. Adding Front Matters

     ---
 title: "My First Post"
 date: 2019-03-26T08:47:11+01:00
 draft: true
 ---

  4. Start the Hugo server with drafts enabled

    hugo server -D

  5. Customize the Theme in the config.toml

    Use examle site config.toml for help

  6. Build static pages

    hugo -D

    Output in /public/ directory by default -d flag to change it

    • set publishdir in the config file

  7. Hosting on git

    https://pages.github.com/