Creating Pretty Websites

Website hosting services within the Department are primarily intended to allow students and faculty to develop and upload code onto the web. The Department does not provide GUI Content Management Systems (like Wordpress or Drupal) for website publication.

Using static website generators, it is a relatively trivial process to create pretty theme-styled websites with javascript/css using many opensource static website generators publically available (Hugo, Jekyll, Hexo… ).

These tools convert simple markdown text to HTML and wrap the web content with themes developed in Javascript and CSS to produce complex websites (i.e. this ITSupport page was put together this way in about 2 days).

3 Minute Tutorial: creating a pretty blog site with Hugo

We picked the static site generator Hugo for this example because it is written in Golang, and trivial to install on all platforms.

This example uses command-line examples on linux, and assumes that command-line git is installed. Windows users will need to install windows git, and use textedit rather than nano.

1 . Download and install the Hugo binaries for your platform.
2 . Assuming Hugo has been installed and is in your executable path, run the following from the command line.

$ hugo new site <website_name>

3 . Download a pretty theme from hugo theme repository. Hugo themes are installed from git repositories and can be found at https://themes.gohugo.io/.

Using git, clone a Hugo theme into your websites theme directory.

$ cd <website_name>
$ git clone https://github.com/budparr/gohugo-theme-ananke.git  themes/gohugo-theme-ananke # example themes

4 . Hugo themes come with config.toml file in its exampleSite directory, copy it to your base directory and customize it with your site title, or custom images and icons. Some themes may have additional config information listed in their Hugo doc page (i.e. the gohugo theme requires you delete the example site themesDir = "../.." line from config.toml).

$  cp themes/gohugo-theme-ananke/exampleSite/config.toml .
$  nano config.toml   # or your favorite text editor

5 . Use the hugo command to create some simple template markdown pages. Template pages are created with some basic forward meta-data used to describe the page layout. These files are create in the content directory. Edit the new files and add some markdown content.

Themes in hugo will generally automatically build website menus, and cross-linked pages for website sections based on the directory structure. In Hugo, index pages starting with an _ have child pages, index pages without an underscore do not have child pages.

$ hugo new _index.md
$ hugo new posts/spring_break.md
$ hugo new posts/study_hall.md
$ hugo new portfolio/rigi_research.md
$ hugo new about/index.md

6 . Preview and test your web content on your local PC.

Start a hugo server in the base web site directory, and connect to it in a web browser using the URL http://localhost:1313. You can use this local server to preview and develop your website, before building your static website code and copying it to your Department webhome directory.

$ hugo -D server

7 . Using your favorite text editor, append some simple markdown to create some web content. Website content will be updated immediately and visible in the locally running preview server.

$ nano content/index.md

---
title: "CS Wrapup Party"
description: "A big party is coming"
date: 2019-09-06T15:25:46-07:00
draft: true
---

# Computer Science Wrapup
We are getting together for a potluck

## Where & When?
ECS Building, 3rd floor - June 2025


8 . When you are finished updating your site, run the hugo command to generate static HTML/javascript to the public directory. The -D tells hugo to include draft pages, the -b is the base URL for where you intend to host your website.

$ hugo -D -b http://webhome.csc.uvic.ca/~<username>/
$ cd public

9 . Using your favorite SFTP software, connect to the Departments sftp servers and copy the contents of the public sub directory to the public_html folder of your webhome directory.

sample website

More information

Computer Science Web Pubishing & SFTP
Hugo Quick Install
goHugo Theme