This blog post contains information about the web site. It’s mostly for my reference, but since I benefited from countless online resources while wrestling with the configuration, I thought I would post it to return the favor.
Web hosting
Web hosting is provided by Digital Ocean. I chose Ubuntu for my OS. The domain name is registered through Hover. Digital Ocean has beaucoup tutorials. These were the ones that I ended up using:
- How To Launch Your Site on a New Ubuntu 14.04 Server with LAMP, SFTP, and DNS. I only installed the LA of LAMP because I have no need for MySQL and PHP.
- How To Secure Apache with Let’s Encrypt on Ubuntu 16.04
Website Content
As much of the content as possible is written in Markdown. I make changes to the content, generate the website with Hugo, and then upload the newly-created /public directory to the server via SFTP.
Regular Figures
Normal (static) figures on the home page are saved as JPG. They have a resolution of 360 x 202px. No reason, that’s just what happened to work for this layout.
Animated Figures
I used an animated figure instead of a movie because it takes up much less space. Steps:
- Open the movie of interest in iMovie.
- Export snapshots at equal time intervals (e.g., 10 sec) to JPEG.
- Use the utility ffmpeg to convert the series of images to an animated GIF. Here’s the command I used:
ffmpeg -f image2 -framerate 2 -i %d.jpg -vf scale=360x202 out.gif
The -framerate 2 gives 2 frames per second. Adjust to taste. The %d.jpg means to include all of my figures named 1.jpg, 2.jpg, and so on. If you name your files image1.jpg, image2.jpg, then you would use image%d.jpg. I scaled the images using the -vf scale=360x202 option. The last item, out.gif, is the output file name of the animated gif. I adapted a stackoverflow answer to get what I needed.
Text fade over figures
The figures on the home page show text if you hover the cursor over them. This effect is pure CSS. I adapted the code from the “Image Cover Overlay” tutorial at W3Schools.
Little icons next to contact info
Icons are provided by Font Awesome. Setup is straightforward. Enter your email address and Font Awesome will send you a custom <script> element to put in your <head>. Then, you just reference the fonts in your html. For example:
Here is a lightbulb: <i class="fa fa-lightbulb-o"></i>
Here is a lightbulb:
MathJax
MathJax is selectively enabled by putting a keyword in the front matter of a document. For example, here’s the front matter of a post that might have MathJax in it:
title: "Website Miscellany"
date: 2017-08-17T13:53:28-04:00
mathjax: true
Hugo automatically includes the appropriate <script> information in the final HTML when the document is compiled. How does Hugo know what to do? I inserted the following code into the partial layout header file:
{{ if $.Param "mathjax"}}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
{{ end }}
Now I can render math properly. Type \\(y=e^x\\) to get \(y=e^x\). Note that inline equations require the delimeters \\( and \\). I suspect this is due to Blackfriday, the default markdown engine for Hugo. Displayed equations will work without any chicanery using the $$ delimiters, so type $$y=e^x$$ to get
$$y=e^x$$
If you need to figure out how to enable a MathJax flag on Jekyll, check out Eddie Smith’s blog post.
