DEV Community

Cover image for Build Portfolio Website with Hugo
Varshith V Hegde
Varshith V Hegde

Posted on

Build Portfolio Website with Hugo

A personal webpage is a perfect place to let the world know about you and showcase your past accomplishments. Put your resume, your projects, your blogs in with a personalized theme which makes people know you have a great taste: all-in-one! It’s your portfolio displayed online, a small yet cool project you can do with not much effort, why not?

With Github Pages, we can host a personal webpage without bothering about finding a domain name, and with Hugo, we have a variety of themes to choose from. Now, let's start this step-by-step tutorial to set up your personal webpage!

Introduction to HUGO and GitPage

Hugo is one of the most popular open-source static site generators and is written in GO. It's simple, efficient, easy to scale and fast to deploy. Simply install with brew, clone themes you like from Github or the official website HUGO, make some changes in the configuration file and deploy, then your page will be online.

Github Pages is a static web hosting service provided by Github, which provides 1GB of free space and provides convenient deployment directly through the Github repository.

This site uses Hugo and Github Pages to create and deploy. The following briefly introduces the deployment process.

Installation

Install Hugo

Open your terminal, run the following command-line one by one:

  • MacOS:
      brew install hugo
Enter fullscreen mode Exit fullscreen mode
  • Linux:
      sudo apt install hugo
Enter fullscreen mode Exit fullscreen mode
  • Windows:
      scoop install hugo
Enter fullscreen mode Exit fullscreen mode

To check whether you installed Hugo successfully, enter the following into your terminal

hugo version
Enter fullscreen mode Exit fullscreen mode

Configuration

hugo new my-website
cd my-website
hugo
Enter fullscreen mode Exit fullscreen mode

Deployment

  • Github Pages: Open your terminal, run the following command-line one by one:
    hugo
    git add .
    git commit -m "update"
    git push origin master
    git push pages master
    cd ..
    rm -rf my-website
Enter fullscreen mode Exit fullscreen mode
  • MacOS:
    open http://localhost:1313
Enter fullscreen mode Exit fullscreen mode
  • Linux:
    firefox http://localhost:1313
Enter fullscreen mode Exit fullscreen mode
  • Windows:
    start http://localhost:1313
Enter fullscreen mode Exit fullscreen mode

Conclusion

Congratulations! You have successfully set up a personal webpage with Hugo and Github Pages.

References

  • HUGO: Hugo is a static site generator written in Go.
  • Github Pages: Github Pages is a static web hosting service provided by Github, which provides 1GB of free space and provides convenient deployment directly through the Github repository.

Examples

Top comments (0)