- Accounts in Computer Science
- Application Services
- External Services
- Instructor Resources
- COSI Accounts
- Department Apps
- Network Drives for COSI Storage
- Gitlab CI/CD
- Devops for Webhomes
- Group Websites using Git, Hugo & Netlify
- Frequently Asked Questions
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.
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
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.\