How to Set Up Your Own Blog

Overview

If you want to quickly set up your own blog without spending a lot of time on tedious tasks such as deployment and server operations 😐, Hugo + GitHub Actions + GitHub Pages is a great solution. Ed is the theme I used.

Prerequisites

Basic Dependencies

Hugo
Terminal
Your Github account
git (Maybe a quickstart would help 😏)

(Optional) Ed’s Dependencies

go >= 1.12

(Optional) Katex

Katex

Create a new repo

At the beginning, you need to create a new Github repo to store your website.

Depending on the name of the repository you create, the domain name required to access the final website will also vary. View details at Github Pages.

Assuming that your account name is foo.

Type	Repo Name	Website Domain Name
User/Organization	foo	foo.github.io
Project	bar	foo.github.io/bar

Create a new site

$ hugo new site YourSiteName
Congratulations! Your new Hugo site is created in /path/to/your/YourSiteName.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Just follow the instruction above and build your own blog locally.

If you want to use the same theme (i.e., Ed) as me, you could refer to its official docs. 👈

Set up Github Actions

Next is to correctly set up GitHub Actions so that the website can be automatically built and deployed on GitHub.

Hugo provides its own action for you. Just use it! 😝

If you have set it up correctly, the website will automatically update every time you push a new commit. 😎 Enjoy it!

Add Latex support with Katex

To add LaTeX support to your website using KaTeX, create a file named katex.html in your layouts/partials folder.

The following code snippet is taken from the KaTeX documentation.

layouts/partials/katex.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.css"
    integrity="sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.js"
    integrity="sha384-G0zcxDFp5LWZtDuRMnBkk3EphCK1lhEf4UEyEM693ka574TZGwo4IWwS6QLzM/2t"
    crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/auto-render.min.js"
    integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

You can include this file in your layouts/partials/footer.html file like this:

<!-- Your original footer.html (It may come from the theme you used) -->

{{ if .Params.katex }}{{ partial "katex.html" . }}{{ end }}

To enable KaTeX on a specific post, add the following to its front matter:

---
# other settings in the front matter
katex: true
---

Zhaoyan LU
From Dusk Till Dawn