Suppose you want to build a personal website to highlight your skills, as well as your experience in areas such as data science, data engineering, software engineering, or technical management.

A personal technical website makes your resume come alive by providing links to your work, including publications and code repositories. Your website can include blog, sharing your thoughts about current events and technology trends.

You can build the website with Hugo, a fast static site generator written in Go. Hugo works from layout and content files to generate website files accessed through a content delivery network (CDN). Hugo does not require connection with a database or back-end server. Hugo is a scalable, high-performance site generator, able to serve websites consisting of hundreds or thousands of pages.

Hugo static sites are much easier to build than dynamic, database-dependent sites. To generate content for a Hugo site, authors can use a text editor writing in Markdown, a markup language that is easy to learn. Numerous themes or website templates are available to get started with Hugo. Jain (2022) is an excellent source for learning Hugo. Extensive resources are available at Awesome Hugo.

Here is a plan for building your personal technical website:

• Set up a local website directory for your work. It is most convenient to use the git version control system and to make frequent updates to the files in your website directory. Commands like git status, git add, and git commit will be key to your work.

• Hugo supports JSON, TOML, and YAML standards for data, configuration files, and metadata attached to files. Pick the data formatting standard with which you are most comfortable and use that standard for your work within the Hugo system.

• Pick a theme from one of the many available Hugo themes. Follow instructions provided by the theme, downloading and installing Hugo with files from the theme’s repository. While setting up the initial site, specify the data format you want to use for your Hugo work: JSON, TOML, or YAML.

• Ensure that you can host the website on localhost. This is how you will be checking changes that are made to the website in you local repository.

• Develop a plan for the major content sections of the website. Generate plain text partial content for initial pages. You can begin with material you currently use when applying for jobs, such as your resume and LinkedIn profile.

• The menu structure for the site is defined under config/_default. Note the initial structure of the site and modify it as you create major content sections. The menu structure represents the way users will navigate the site.

• Content will be added under the content directory and the directory tree structure that you define for the site. Define a simple structure with main sections and one level of files under each main section. Initial content can be plain text. Formatting can be done using Markdown (Cone 2018, Jain 2022).

• Add image content under the assets/images directory. Add images to content pages using Go templates (Calhoun 2023, Jain 2022).

• Use Markdown to add hyperlinks to external web pages, such as your publications and repositories.

• Note that there may be additional edits needed for the site, such as copyright attribution and year. Check files under the config/_default directory to see where those edits are needed.

• Continue editing the site until you have something you are willing to show to others.

• Set up a GitHub repository for the site and link it to a git repository on your personal computer. In addition to the commands git status, git add, and git commit, you use git push to update the GitHub site. Ensure that you can push updates to the GitHub site.

• Host your website for free on Netlify or GitHub Pages. Ensure that pushes to your GitHub repository automatically update your hosted website.

• Continue using Markdown, Go templates, and git/GitHub, to create and revise the content pages for the website.

• Complete the website so that it can serve as a full replacement for both your resume and LinkedIn profile.

Additional Advice about Building Personal Technical Websites with Hugo #

Recent developments in the Hugo ecosystem were discussed at HugoConf 2023. Check out the live stream recording from HugoConf 2023Links to an external site. at https://www.youtube.com/watch?v=OTclpTZq-S4Links to an external site.

Two presentations are particularly relevant to building technical websites:

(1) Liz Miller’s Portfolio Power-Up: Elevate Your Technical Brand with Hugo at the 2:30:00 point of the conference recording. Liz is Founder/CEO of Learn Robotics LLC. Learn to craft a standout technical portfolio using Hugo’s robust features. Liz walks you through live project creation and teaches how to add dynamic content effortlessly. The session is designed for developers, engineers, and tech aficionados looking to enhance their online presence. By the end, you’ll be equipped to make a strong digital impression, setting you apart in the tech world. Upgrade your portfolio, elevate your technical brand. This recorded session and accompanying training materials are available from Learn Robotics.

(2) Haimantika Mitra’s Building Your Portfolio with Hugo at the 7:32:00 point of the conference recording. Haimantika is a developer advocate at Appwrite. As described in the session overview, in a world where a digital portfolio is your gateway to opportunities, creating an engaging online presence has never been more crucial. This presentation shows how to build an impressive portfolio website using the Hugo framework. The presentation includes:

• An introduction to static site generators and their advantages.
• Step-by-step guidance on setting up Hugo, selecting a suitable theme, and integrating personalized content.
• Tips for optimizing website performance, responsiveness, and SEO within the Hugo framework.
• Real-world examples of successful portfolio websites built using Hugo.

References for Hugo Static Site Development #

Calhoun, Jon. 2023. “An Introduction to Templates in Go.” Available online at https://www.calhoun.io/intro-to-templates/.

Cone, Matt. 2018. Markdown Guide. Available online at https://www.markdownguide.org/book/.

Jain, Atishay. 2022. Hugo in Action: Static Sites and Dynamic Jamstack Apps. Shelter Island, NY: Manning. [9781617297007]

Back to Developing Applications