Building Portfolio Site Using Hugo and Nix

Download and Extract nix theme

Download and extract nix theme from github

Create a new site and extract theme

First create a new site using below command.

hugo new site portfolio_site

This will create a directory called portfolio_site. Extract the nix theme downloaded in previous step inside portfolio_site/themes/. Your final directory structure should inside your newly created portfolio_site should look something like

├───archetypes
├───content
├───data
├───layouts
├───static
└───themes
    └───hugo-theme-nix
        ├───archetypes
        ├───exampleSite
        │   ├───content
        │   │   └───post
        │   └───static
        ├───i18n
        ├───images
        ├───layouts
        │   ├───partials
        │   └───_default
        └───static
            └───css

If you need help installing hugo on windows then checkout my blog install-hugo-on-windows-10.

Update config.toml file

Navigate to your portfolio_site/config.toml file which should have

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"

Now update the config.toml file as below to insert different accounts (eg. github, linkedin etc). You can find more info here about what’s available.

baseURL = "your_site.com"
languageCode = "en-us"
title = "Your Site Title"
theme = "hugo-theme-nix" # change this if you have saved with different name

[params]
  Name = "First Last"
  HeaderUsername = ""
  HeaderHostname = ""
  About = "Short bio"
  ProfilePicture = "your_pic.jpg" # This picture should be in portfolio_site/static/
  Email = "your_email"
  GithubID = "your github handle"
  GitlabId = "your gitlab handle"
  LinkedInID = "your linkedin handle"

Start hugo server

Open a terminal and cd into portfolio_site where you have your config.toml file. Type

hugo server

You should see a link with http://localhost:1313/. Navigate to that link in the browser and now you should see your website.

Create menu

Add menu section as below.

[menu]
  [[menu.header]]
    name = "about"
    weight = 0
    url = "about"  # This is expecting about.md file in "portfolio_site/content/"
                   # Which can be created by running "hugo new about.md" in the terminal

  [[menu.header]]
    name = "blog"
    weight = 0
    url = "/blog"  # This will render <filename>.md inside "portfolio_site/content/blog/"
                   # Can be created by running "hugo new blog/some_file.md" in the terminal

  [[menu.header]]
    name = "contact"
    weight = 0
    url = "contact" # see comment above

Create blogs

If you’ve worked with markdown before then creating blogs is easy with hugo. To create a new blog run the following command in the terminal.

hugo new blog_one.md

This will create blog_one.md file inside portfolio_site/content/. Open the file and put your content there.

If you want to organize your blogs into differnt folder then you can do so with

hugo new blog/blog_two.md

This command will create blog_two.md file inside portfolio_site/content/blog/. Edit the file and your changes will be reflected in the website.

NOTE: If you see the top section of any of the .md file (eg. blog_one.md) then you’ll see draft: true. Therefore while running the hugo server you may want to use -D option to see these drafts. The command would be

hugo server -D

This will display all the markdown files you’ve added so far.

Final content of the config.toml

Your final content inside config.toml should look something like

baseURL = "your_site.com"
languageCode = "en-us"
title = "Your Site Title"
theme = "hugo-theme-nix" # change this if you have saved with different name

[params]
  Name = "First Last"
  HeaderUsername = ""
  HeaderHostname = ""
  About = "Short bio"
  ProfilePicture = "your_pic.jpg" # This picture should be in portfolio_site/static/
  Email = "your_email"
  GithubID = "your github handle"
  GitlabId = "your gitlab handle"
  LinkedInID = "your linkedin handle"

[menu]
  [[menu.header]]
    name = "about"
    weight = 0
    url = "about"  

  [[menu.header]]
    name = "blog"
    weight = 0
    url = "/blog" 

  [[menu.header]]
    name = "contact"
    weight = 0
    url = "contact"

Serving on AWS S3

If you’re planning to host your portfolio_site in S3 then change the baseURL in your config.toml to your S3 bucket website endpoint.

baseURL = "http://<your_s3_bucket_name>.s3-website.<aws_region>.amazonaws.com/"

I hope this was helpful. Happy learning !!!