Hugo Usage Experience

In order to prevent forgetting the methods after a long time, it is necessary to record the key points of website construction.

Adults, times have changed#

At first, I planned to write the entire website myself (looking back now, it was really silly), so I learned some HTML and CSS knowledge. Later, when I opened the first TXT file to start writing the homepage HTML file, I found that I couldn't continue. I got tired after a few tags, and it would take a long time to fully master and proficiently use this knowledge. Even if I mastered them, it would still require imagination and creativity to create beautiful pages. It's simply impossible to write a complete webpage in the short term. The most important thing is that they are very cumbersome. How much time and effort does it take for one person to handle all the work!

Later, I saw a sentence from a netizen - the era of building everything from scratch has ended, and predecessors have already set up the model for you - and I suddenly realized. Our era is too fast, and it is foolish to work in isolation. Learning to leverage the work of others is the way to go. So I decisively chose to use the Hugo engine to build the website - its function is that you provide the parameters (model), and it is responsible for assembling them.

However, learning HTML and CSS knowledge was not in vain, because if you understand the structure of web pages, know what tags are, what attributes and values are, and their basic rules, it is very helpful when dealing with web pages. Only then is it possible to modify the details of the theme according to your own preferences.

Choosing Hugo#

There are many website generators, and I have seen many people go through a process of trial and error, from WordPress to Hexo, then to Hugo, and then back to WordPress... So I wanted to avoid this pitfall, so I spent a long time making a decision before starting. My requirements were economy, efficiency, and convenience - and Hugo was the most suitable choice - static web pages are economically secure, Hugo has the fastest generation speed, and it does not require a server.

File Directory#

This is the standard format for the content stored in each folder.

archetypes
- Stores article page parameters in the default.md file.
content
- Stores all articles, such as About, Categories, and each article.
layouts: Stores templates and parameters used to generate pages.
- _default
  - Page templates
  - For example, list.html is the template for the list page, and page.html is the template for normal pages.
  - The essence of Hugo rendering and generating pages is: content + template = page.
- partials
  - Component templates
  - For example, footer.html is the template for the bottom area of the page, and header.html is the template for the header of the page.
  - These component templates are often referenced in page templates.
- shortcodes
  - Shortcodes
  - Concise code with fixed format in articles, such as code used to quote Bilibili videos or insert music from Netease Cloud, is stored here.
  - This mind map, as well as the music at the top, are thanks to shortcodes.
  - If needed, please leave a message.
static
- img
  - Stores images.
- css
  - CSS templates
  - CSS is used to make the page more beautiful, like wearing new clothes.
- js
  - JavaScript
themes
- Stores all themes.

Code#

Hugo#

Check version: hugo version
Create a new site: hugo new site 666
- Creates a folder named "666" in the current directory, with the built-in structure.
Create a new post: hugo new post/name.md
- Creates a file named name.md in the content/post folder.
Generate web pages: hugo
- Generates a public folder in the parent folder, which contains all the rendered pages.
Preview: hugo server
- Returns a URL that you can use to view your page in your own browser in real-time.
Themes
- I used a clumsy method, downloading the theme ZIP file and extracting it to the themes folder, and then setting the theme parameter to the theme name in the config file.
Internal link to an article
- [Knowing more doesn't make you happier?]({{< ref "posts/2023-03-09-the-curse-of-knowing.md">}})
Inserting an image
- ![Example](/img/posts/example.png)

Github#

Initial configuration

cd public
git init
git remote add origin https://github.com/ooxx/pornhub.github.io.git
git add -A
git commit -m "Write your own comment"
git push -u origin master   # I used "main" instead of "master"

The third line is the SSH link of the Github repository, which can be copied from the repository. If it cannot be connected, it is likely that SSH is not bound to the key. You can search online for solutions.

This is the code for uploading each time in the future

cd public
git add .
git commit -m "Write your own comment"
git push

If the push is unrelated to the local files, you need to use git pull to synchronize the content online and locally.

Comment system#

This site uses the utterances service: just create a Github repository. It is ad-free, easy to configure, lightweight, open-source comment system that doesn't require much effort. It can be set up within 10 minutes. The downside is that you need to log in to your Github account to comment.

First, create a new repository on Github, set it to public, and then click this link to configure it to the new repository.
Put the following code in the config.toml file:

  [params.utteranc]
  enable = true
  repo = "1xiaoyuan/comment"           # Replace with your own "username/repository"
  issueTerm = "pathname"
  theme = "github-light"

Put the following code in the template footer.html file, usually at the bottom:

<script src="https://utteranc.es/client.js"
    repo="1xiaoyuan/comment"      # Replace with your own "username/repository"
    issue-term="pathname"
    theme="github-light"
    crossorigin="anonymous"
    async>
</script>

Deleting repository content#

To delete the content in a remote repository without deleting the local files or the repository itself. I'm not very good at it, so I'll put the trivial code here for now.

$ git pull origin master  # Pull the project from the remote repository

$ dir # Check which folders are present

$ git rm -r --cached target  # Delete the file you want to delete, here it is deleting the target folder (cached does not delete the local flashview folder)

$ git commit -m 'Deleted target' # Commit, add operation description

git push -u origin master # Re-submit (if you need to operate on other branches, replace master with the corresponding branch, such as: git push -u origin dev)

Others#

I'll write the rest when I have time.