Creating a website

I’ve kept an older version of this page just in case that helps anyone, but in most instances you should defer to this one. I’m sure a year from now this will all have changed again anyways…

The creation of this website was spurred by a desire to streamline my digital footprint and more easily facilitate sharing. However, building a website of your own is not as straightforward or accessible as it otherwise could be. Somehow among the vast sea of ways to design and host a website, I found workable solution in the form of the HUGO.

HUGO, a variation of the GO programming language, is touted as “The world’s fastest framework for building websites”. The HUGO documentation, particularly the hosting on github page, is a great place to start and is the “correct” way to go about creating a site. Below I will walk through how I managed to get it to work, your mileage may vary.

A cautionary note:
Your site doesn’t have to look like mine, feel free to pick any off the themes page. The theme you choose will do most of the heavy lifting, and hopefully you find one that does everything you want it to. If not, be prepared to spend a few days figuring out how HUGO and the themes work; there is no shortcut to creating new site behavior and I found it to be a bit unforgiving at times. In short, unless you REALLY want to sink time into this skillset, pick a theme and be happy with it 😊

Create a Github account. I suppose in an ideal world your website name would be the same as your github username, but these can mismatch. I believe a free user account is restricted to one web page per account, and I haven’t bothered to test that limit.

Follow download and installation instructions at https://gitforwindows.org/.

It is possible to buy a domain to customize your url, but in my case I’m cheap, and jimcoll.github.io is perfectly fine with me. Note that here I deviate from the HUGO docs. I don’t use github the right way, and I don’t really have a reason to use a separate github repository to keep the site files, instead opting to keep them on my local hard drive.

Next we need to create a folder where our website will live. This folder ideally shouldn’t be moved after you’ve created it, so place it somewhere useful (read: not the desktop). I gave into our digital overlords and moved most of my footprint to the cloud (OneDrive), so on my root folder I created a folder called myWebsite. Then right click on the folder and select the “Always keep it on this device”.

Next you need to install HUGO in the website directory. Download the appropriate windows install from the HUGO releases. Unzip the file and place the hugo.exe file in your myWebsite folder.

This is where you need to start thinking for yourself. This process varies depending on which theme you end up choosing. Here I’ll just point you to the Academic doc pages. The raw doc files are also useful for formatting guidance.

When you want to “manage your content”, it’s easiest to test it locally first. Shift-right click in the myWebsite folder and “Open PowerShell window here”. Then, type .\hugo server --disableFastRender. You can then open a browser and go to http://localhost:1313/. At this point, when you make and save changes to your files, HUGO will rebuild your site automagically and changes appear instantly on the browser. When you are happy with the edits you’ve made, you next need to generate your site. Again, from the myWebsite folder, open up PowerShell and generate the files with the .\hugo command. This repopulates the myWebsite\public folder. The last step is to push your new changes up to the repository, which you can do by right clicking on the public folder and selecting “Git GUI Here”, then…

1. Stage Changed files
2. create a commit message
3. Commit the changes, and
4. Push the changes up to the repository.

This site is a smashup of the aafu and geekdocs themes. Although the Academic theme has just about every feature you might need, I fell in love with the AAFU theme and the accordion effect and was too enthralled not to try and integrate. To do this, you need to understand a little about how HUGO creates a website. HUGO uses a tiered folder system to generate the site, and will look in folders following a defined lookup order. Therefore, we need to overwrite the academic home page theme with the aafu theme. To do this, I first install the Academic theme, and then replace the partials folder with the aafu theme. The last step is to reconfigure the config_default/ folder with the aafu theme markdown files. Most of these are straightforward, but within the config_default\config.toml, we need to set the theme order as follows.

One of the best ways I’ve found to help improve my understanding of the software/deployment was to change some of the layouts. To add your resume to your image card as a link, and not as an icon as I have, you need to tweak the footer of the aafu theme, which should be in the themes\academic\layouts\partials\footer.html. Mine now looks like so:

<footer class="mb-4">
  <a href="https://jimcoll.github.io/random/media/JamesCollSharedWebResume.docx">Download a "more traditional" resume
  </a>
  </br>
  powered by <a href="https://gohugo.io/">hugo</a> & deployed on <a href="https://github.com/">github</a>
  &middot;
  <i><a href="https://github.com/darshanbaral/aafu">aafu</a></i> by <a href="https://www.darshanbaral.com/">Darshan</a>
  & 
  <i><a href="https://github.com/gcushen/hugo-academic">Academic</a></i> by <a href="https://georgecushen.com/">George</a>
</footer>

TODO

• https://discourse.gohugo.io/t/two-themes-as-separate-hugo-directories-deployed-to-the-same-website/27899/4
• https://conversiontools.io/convert/excel-to-html

Some links to style formatting, more for me than anything

• https://github.com/gcushen/hugo-academic/issues/84