Building this site

I already have Hugo installed. I installed it using MacPorts.

Create a project

cd ~/Sites
hugo new site pymol-notes

Install the theme

I want to use the Learn theme for Hugo. It is a theme designed for documentation. It looks nice and is functional.

This theme has tons of useful features. Check out the Hugo Learn Theme documentation.

The theme’s repository is: https://github.com/matcornic/hugo-theme-learn.git.

cd pymol-notes
git init
git submodule add https://github.com/matcornic/hugo-theme-learn.git themes/hugo-theme-learn
echo 'theme = "hugo-theme-learn"' >> config.toml

Configure the theme

Open config.toml and add the following:

# Change the default theme to be use when building the site with Hugo
theme = "hugo-theme-learn"

# Change the title
title = "PyMOL Notes"

# For search functionality
[outputs]
home = [ "HTML", "RSS", "JSON"]

Create a chapter page

hugo new --kind chapter introduction/_index.md

Create some content

hugo new introduction/building-this-site.md

Spin up the site

hugo server

When you run hugo server, Hugo will build the site in and serve the pages from memory.

Go to http://localhost:1313.

Success!

If you want the site to be built in, and served from, the public directory, then run hugo server --renderToDisk. If you just want to build the site in the public directory, then run hugo.

Create a homepage

hugo new _index.md

Add some content to the homepage, and you’re good to go!

Add another chapter page

# make sure you are in the pymol-notes directory
cd ~/Sites/pymol-notes
hugo new --kind chapter GROMACS-simulations/_index.md
  • Open the new _index.md file and change the front matter and add some text.
  • Create some content:
hugo new GROMACS-simulations/protein-ligand-tutorial.md
  • Open protein-ligand-tutorial.md and paste in the contents of my research notes .md file.

Save the files, and track them with git.

git status
git add .
git commit -m "added a new chapter on gromacs"
# deploy the new pages
git push origin main

Getting equations to display properly

I use equations sometimes, and it is nice to have them display properly on webpages. I found this post on MathJax support in the Hugo documentation. I put the following HTML code in my /layouts/partials/footer.html file.

    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

For inline math, use \\(<math here>\\) and for more complex math use:

\\[
<complex math here>
\\]

Success!

For MathJax syntax, see these web pages:

MathJax Cheat Sheet
LaTeX Math Symbols cheat sheet
Supported Katex Functions