Housewarming 2024

December 14, 2024 · 5 min read · Page View:

The housewarming of hugo blog at the end of 2024

If you have any questions, feel free to comment below.

So after a long time, I decide to restart my blog program. In my daily development, I have a lot of thoughts and ideas, thus I will write some documents to record them. But I believe that sharing is the best way to learn. A specific example is cryptography, which means the closing source algorithm is never the safest. Only algorithms that have been vetted by the public are truly secure.

Restart #

The reason why I call it restart is that I have been using hexo for a long time, and I wrote the blogs via hexo from the time I entered the university. But there is a serious problem in hexo, which is the deploy speed is too slow. When I have a little blogs, it is not a big problem, but the number of blogs increases with time, the deploy time exceeds 2 minutes, which is unbearable for me and it is hard to check the blog before publishing. And that makes me don’t want to publish blogs again, and then I reduced the times of publishing blogs until stopped.

After about 1 year, now I decide to restart it, I came across hugo by chance, and just as the documentation says:

Hugo is a static site generator written in Go, optimized for speed and designed for flexibility. With its advanced templating system and fast asset pipelines, Hugo renders a complete site in seconds, often less.

So I finally decide to migrated contents from hexo to hugo.

Migration #

The migration process is smooth. The content types are nearly uniform, so I just need to pay attention to the project structure. And reading the documentation, the hugo mainly contains these parts:

.
├── archetypes # the template of creating new pages
├── assets # the static files
├── config.toml # the configuration of the blog
├── content # blogs
├── public # hugo build output
├── resources # some resources
├── static # the static files
└── themes # the added themes will be here and the theme structure is similar to the main hugo

The creation of the blog can be referred to the official documentation.

Themes #

The theme I choose is hugo-book, which is a theme for hugo. Simple and graceful.

Mathematics #

For the mathematics, there are two ways in browser to render the formula, the Katex and MathJax. They are all open source javascript libraries. Since I knew the markdown syntax, I use the Typora which supports MathJax library. So I get used to its syntax which accounts for the reason why I choose it.

Deployment #

The deployment is done by github actions, and the workflow file is in the .github/workflows/hugo.yml. BTW, the most contents on the search engine are about the blog deployment in personal github pages, which is not suitable for me, cause the personal github pages is used to store personal homepage. Thus, I will use the private repository blogsource to store the source code and use the blog repository to host the blog.

About the process, I found a toturial at random, you can refer to it. And for more infomation you can refer to the official documentation.

There are some key steps to note:

1. Make sure the blog repository is public and the Settings -> Pages -> Build and deployment -> Source is set to Deploy from a branch, and the branch is main as well as /(root) is selected.

2. Generate a personal token in github and set it in the blogsource repository. This guarantees you have the permission to operate the target repository.

3. Set a deploy.yml file in the .github/workflows directory of blog source code repository which is private.

   You can refer to this code

   name: deploy
   
   on:
       push:
           branches:
               - main
       workflow_dispatch:
   
   jobs:
       build:
           runs-on: ubuntu-latest
           steps:
               - name: Checkout
                 uses: actions/checkout@v3
                 with:
                     submodules: true
                     fetch-depth: 0
                     ref: main
   
               - name: Setup Hugo
                 uses: peaceiris/actions-hugo@v2
                 with:
                     hugo-version: "0.108.0" # your hugo version.
                     extended: true
   
               - name: Build Web
                 run: hugo --minify
   
               - name: Deploy Web
                 uses: peaceiris/actions-gh-pages@v3
                 with:
                     # Make sure the name is same as what you set in the repo.
                     PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }} # Set the token in the `blog` repository.
                     EXTERNAL_REPOSITORY: timerring/blogs # Set the target repository.
                     PUBLISH_BRANCH: main
                     PUBLISH_DIR: ./public # Set the publish directory.
                     commit_message: ${{ github.event.head_commit.message }}
   

4. Add the publishDir = "public" in the config.toml file and set your baseURL according to your target.

After setting these, you can try to push it as normal. You will only need to push the source code to the blogsource repository, and then the blog will be deployed to the blog repository automatically through github actions.

Fonts #

From the process of configurate the fonts, I have learned a lot about the fonts.

Style #

The Style of fonts mainly contains these:

1. serif: the fonts with serifs always have a small line at the end of the character. Often used in formal occasions.
2. sans-serif: the fonts focus on simplicity and clarity. Hence it is often used in the web.
3. monospace: the fonts with the same width for all characters. Which is often used in the code display.

Weight #

Different weights of fonts have different names:

• 100 - Thin(Hairline)
• 200 - Extra Light (Ultra Light)
• 300 - Light
• 400 - Regular (Normal,Book,Roman)
• 500 - Medium
• 600 - Semi Bold (Demi Bold)
• 700 - Bold
• 800 - Extra Bold (Ultra Bold)
• 900 - Black (Heavy)

The Regular and Bold are the most commonly used weights.

Type #

The type of fonts mainly contains these:

1. ttf: TrueType is a font format developed by Apple and Microsoft focusing on the display in the printer in the beginning.
2. otf: OpenType is a extension of TrueType.
3. woff: Web Open Font Format which is a font format compressed to improve the loading speed in web.
4. woff2: Web Open Font Format 2.0. The mostly differ in regard to the compression algorithm.

For the fonts part, I have use the production of JetBrains for many years, so I choose the JetBrainsMono-Bold font for the code display.

And for the content part, I use the Helvetica Neue font which is a popular sans-serif font and it is suitable for the web content.

Extension #

In conclusion, I use these extensions in the blog:

1. giscus: the comment system.
2. mathjax: the mathematics system.
3. Google Custom Search Engine: the search system.