Why this Site Exists

Inspiration

This site wouldn’t exist without the initial spark that drove me to try to do this thing. That spark was lit by:

Educational Materials Hosting

Beside the spark of inspiration, I have immediately realizable utility for a website with respect to my tutoring practice. In particular, I can post the educational materials I make for my clients on here.

Personal Content

In addition to my tutoring/teaching, I also actually practice math and music. I hope to use my website as a gallery for my work.

How this Site Exists

Building the Site

OK. It’s really easy to want to do something; it’s harder to actually do it. So, how did I make this site?

Learning Hugo from Scratch

In order to build an extensible website as painlessly as possible, I decided to use a static site generator: Hugo. Hugo, like other static site generators, compartmentalizes structure–via templates–from content–via .md or .org files, etc.

Structure

Layouts are the templates in Hugo; they define the structure for your pages and are the main things you have to define to make your site. The best way to understand how this works is by seeing some minimal examples. If you want to follow along at home, I have included instructions on how to quickly setup a development environment. As far as I know, the absolutely most minimal possible working hugo project is the following:

index.html:
test

hugo-project-root-directory
├── hugo.toml
└── layouts
    └── index.html

You can see this page in your browser by running the hugo server from within hugo-project-root-directory; by default, the address for the local server will be localhost:1313, which you can put into your browser’s address bar. You should see only the word test on the page.

Content

However, the most principled way to structure our project is by changing it to the following:

index.html:
{{ define "test" }}
	{{ .Content }}
{{ end }}

baseof.html:
{{ block "test" . }}
{{ end }}

_index.md:
test

hugo-project-root-directory
├── hugo.toml
├── layouts
│   ├── index.html
│   └── _default
│       └── baseof.html
└── content
    └── _index.md

This should render exactly the same site.

Going Further

The examples above are minimal, and demonstrate the most basic way that Hugo works. However, they are woefully inadequate to demonstrate how Hugo works on a larger scale. I encourage you to experiement with them by following this tutorial. In that tutorial, the author actually follows sane conventions instead of singularly focusing on making the examples as minimal as possible.

From there, there is a whole world of possibilities with Hugo. See the official documentaion for more. Additionally, if you’re an emacs user, you can use org-mode to generate markdown with ox-hugo, and even combine that with org-roam.

Populating the Site

As of the time I’m writing this, I’m still adding stuff to the site. However, I can already mention a few things:

Text

I hope that the majority of the content on my site is useful text. I hope to regularly update my site with new text content, and so Hugo’s ability to render sites from markdown is very nice. I am an emacs user, and so I have been experimenting with ox-hugo. Ox-hugo uses org-mode to enhance the markdown-drafting experience. For this particular post, though I didn’t use it; I’ll have more to say about ox-hugo later.

Media

Besides text, I also want to have downloadable or interactive content on my site.

Styling the Site

As of the time of writing, I haven’t done any styling. I will probably make a separate blog post about this later, since it’s a fairly involved process.

Deploying the Site

Now that my site is built, I have to actually publish it!

Domain Registration

I used Epik to register my domain. You may have noticed that my domain, sanchace.xyz, uses xyz rather than com. These “endings” are called top-level domains. Usually, com is more expensive than xyz, and was originally primarily used by companies, and is administrated by Verisign. Conversely, xyz is explicitly general-purpose and is administated by XYZ.com and Team Internet Group.

There are various other top-level domains, as well. You can see a full list here.

Hosting Solution

There are various hosting solutions you can use, including:

Setting up the VPS

Once I got my server (which runs Debian, by the way), I needed to do a few things:

  1. Securing the Server

    The first thing I do when I spin up a server is to transfer my ssh keys and and disable password authentication. Then, instead of being able to access the server with a password (which could be anyone from anywhere), you must access the server from a machine with a private key that goes with the public keys on the server.

  2. Setting up the Webserver

    I use nginx as my webserver. It is pretty straightforward to set up; you just need to simlink sites-available to sites-enabled and write a simple config file.

  3. Setting up HTTPS Certification

    I use certbot to automatically generate–and renew!–Secure Sockets Layer (SSL) certificates. SSL certificates enable HTTPS, where the “S” stands for “Secure” (and the “HTTP” stands for “HyperText Transfer Protocol”).

Deploying the Site

I used rsync to move the site files from my local development environment to the webserver. Traditionally, the directory is some subdirectory of /var/www/. That’s it!