View source for Bulding your website with Hugo

[[Category:Web Hosting]]

= What is Hugo? =

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

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.&nbsp;Websites built with Hugo are extremely fast and secure. Hugo sites can be hosted anywhere, including&nbsp;[https://netlify.com/ Netlify],&nbsp;[https://www.heroku.com/ Heroku],&nbsp;[https://www.godaddy.com/ GoDaddy],&nbsp;[https://www.dreamhost.com/ DreamHost],&nbsp;[https://pages.github.com/ GitHub Pages],&nbsp;[https://about.gitlab.com/features/pages/ GitLab Pages],&nbsp;[https://surge.sh/ Surge],&nbsp;[https://firebase.google.com/docs/hosting/ Firebase],&nbsp;[https://cloud.google.com/storage/ Google Cloud Storage],&nbsp;[https://aws.amazon.com/s3/ Amazon S3],&nbsp;[https://www.rackspace.com/cloud/files Rackspace],&nbsp;[https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website Azure], and&nbsp;[https://aws.amazon.com/cloudfront/ CloudFront]&nbsp;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&nbsp;[https://www.arnoudplantinga.nl/post/writing-markdown-latex/ Markdown]&nbsp;for easy formatting and code highlighting, with&nbsp;[https://en.wikibooks.org/wiki/LaTeX/Mathematics LaTeX]&nbsp;for mathematical expressions 
*Social/academic network linking,&nbsp;[https://analytics.google.com/ Google Analytics], and&nbsp;[https://disqus.com/ Disqus]&nbsp;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: [https://matteocourthoud.github.io/ Matteo Courthoud], [https://www.emmanuelteitelbaum.com/ Emmanuel Teitelbaum].

= Install Hugo and the Academic Theme =

#First of all, install Hugo following the [https://gohugo.io/installation/ official documentation]. Then,&nbsp;create a new website by typing the following commands in your&nbsp;''Terminal''&nbsp;or&nbsp;''Command Prompt'': 
<pre>hugo new site my_website 
cd my_website</pre>
<ol start="2">
<li>Then, install the Academic theme:</li>
</ol>
<pre>git clone https://github.com/gcushen/hugo-academic.git themes/academic</pre>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Or alternatively,&nbsp;[https://github.com/gcushen/hugo-academic/archive/master.zip download Academic]&nbsp;and extract it into a&nbsp;<code>themes/academic</code>&nbsp;folder within your Hugo website.
<ol start="3">
<li>If you are creating a new website, copy the contents of the&nbsp;<code>exampleSite</code>&nbsp;folder to your website root folder, overwriting existing files if necessary. The&nbsp;<code>exampleSite</code>&nbsp;folder contains an example config file and content to help you get started.</li>
</ol>
<pre>cp -av themes/academic/exampleSite/* .</pre>
<ol start="4">
<li>Start the Hugo server from your website root folder:</li>
</ol>
<pre>hugo server --watch
</pre>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Now you can go to&nbsp;<code>localhost:1313</code>&nbsp;and your new Academic powered website should appear.
<ol start="5">
<li>Customize your website - refer to the next subsection below.</li>
<li>Build your site by running the&nbsp;<code>hugo</code>&nbsp;command. Then host it on the CMU Stats directory by&nbsp;copying all the contents of the generated&nbsp;<code>public/</code>&nbsp;directory (by FTP, Rsync, etc.) into the&nbsp;directory&nbsp;<code>public_html/</code>&nbsp;that Carl created for you (see [[How_to_host_your_webpage_under_stat.cmu.edu|here]])</li>
</ol>

= Getting Started =

Assuming you created a new website with the example content following the installation steps above, the “Getting Started”&nbsp;section in this [https://www.arnoudplantinga.nl/post/getting-started/ 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.

*[https://gohugo.io/ Hugo main page] 
*[https://gohugo.io/templates/ Hugo templates] 
*[https://www.markusantonwolf.com/blog/the-ultimate-guide-to-understanding-hugo-in-2023/ Self-contained guide] to Hugo 
*Tutorial: [https://www.arnoudplantinga.nl/post/getting-started/ Getting started with the Academic framework for Hugo] 
*A free 45 minutes course on Hugo on Youtube: [https://www.youtube.com/watch?v=hjD9jTi_DQ4 Getting Started with Hugo]