Bulding your website with Hugo

From Stat DS Computing Wiki
Revision as of 02:52, 29 June 2026 by Ajshen (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)


What is Hugo?

Hugo is a fast and flexible open-source static site generator designed for developers to build and customize websites efficiently. 

Unlike systems that dynamically build a page with each visitor request, Hugo builds pages when you create or update your content. Since websites are viewed far more often than they are edited, Hugo is designed to provide an optimal viewing experience for your website’s end users and an ideal writing experience for website authors. Websites built with Hugo are extremely fast and secure. Hugo sites can be hosted anywhere, including Netlify, Heroku, GoDaddy, DreamHost, GitHub Pages, GitLab Pages, Surge, Firebase, Google Cloud Storage, Amazon S3, Rackspace, Azure, and CloudFront and work well with CDNs. Hugo sites run without the need for a database or dependencies on expensive runtimes like Ruby, Python, or PHP.

Some key features of Hugo:

  • Easily manage your homepage, blog posts, publications, talks, and projects
  • Configurable widgets available for Biography, Publications, Projects, News/Blog, Talks, and Contact
  • Need a different section? Just use the Custom widget!
  • Write in Markdown for easy formatting and code highlighting, with LaTeX for mathematical expressions
  • Social/academic network linking, Google Analytics, and Disqus comments
  • Responsive and mobile friendly
  • Simple and refreshing one page design
  • Easy to customize

Here are a couple of examples of nice academic websites built with Hugo: Matteo Courthoud, Emmanuel Teitelbaum.

Install Hugo and the Academic Theme

  1. First of all, install Hugo following the official documentation. Then, create a new website by typing the following commands in your Terminal or Command Prompt:
hugo new site my_website 
cd my_website
  1. Then, install the Academic theme:
git clone https://github.com/gcushen/hugo-academic.git themes/academic

           Or alternatively, download Academic and extract it into a themes/academic folder within your Hugo website.

  1. If you are creating a new website, copy the contents of the exampleSite folder to your website root folder, overwriting existing files if necessary. The exampleSite folder contains an example config file and content to help you get started.
cp -av themes/academic/exampleSite/* .
  1. Start the Hugo server from your website root folder:
hugo server --watch

           Now you can go to localhost:1313 and your new Academic powered website should appear.

  1. Customize your website - refer to the next subsection below.
  2. Build your site by running the hugo command. Then host it on the CMU Stats directory by copying all the contents of the generated public/ directory (by FTP, Rsync, etc.) into the directory public_html/ that Carl created for you (see here)

Getting Started

Assuming you created a new website with the example content following the installation steps above, the “Getting Started” section in this tutorial explores just a few more steps in order to customize it.

References

Below are some useful links to more extensive external resources. Part of this short guide was adapted from material found on these websites.

Retrieved from "https://info.stat.cmu.edu/index.php?title=Bulding_your_website_with_Hugo&oldid=796"