Hugo Site is Launched

March 30, 2017 ยท 2 minute read

My new portfolio has officially been launched! This is my first static website built using Hugo. In my previous post, I mapped out a few broad objectives for this project.

Let’s take a look at the completed goals from a short while ago and review.

Objectives

  • Create portfolio to display work
  • Create blog to jot down my progress and help others along the way
  • Implement design with SCSS
  • Design new Hugo theme and distribute for others to used

Create Portfolio

The portfolio has been created and published in place of my old portfolio site. Currently, projects are displayed under the “Work” section on the index page. The index page was constructed as a one-page template to display a hero header, gallery of web projects, a list of the 10 latest blog posts, and a contact form.

Create Blog

The blog post links on the index page lead to their own individual pages. The majority of the blog was based off of the Hugo Black and Light Theme by David Hamp-Gonsalves. Overall, it was a well-constructed, minimalist, text-only theme without any scripts or clutter. The blog has been slightly redesigned but there is a bit more customization work to be done.

Use SCSS

My first major challenge was figuring out how to use SCSS outside of a Ruby on Rails project, since my previous installations of SASS were as easy as typing gem install sass in the terminal. Luckily, I found a fantastically thorough tutorial by Dan Bahrami: Building a production website with Hugo and GulpJS. This also marked my first exposure to Node.js.

Design & Distribute Hugo Theme

While the theme I’ve constructed is fine to publish now and use myself, there is a ways to go to clean it up and optimize it before distributing to the Hugo community. This will be the most challenging objective that I still need to complete and requires more studying of Hugo and the correct syntax. However, I’m very close to finishing the design portion of the theme!