晓雨杂记

Written for a beginner who wants to have their own blog but lacks funds, and for my younger self in elementary school.

Preface#

Although the era of independent blogs has passed, more and more people are starting to publish their articles on large platforms.

While the traffic from these platforms can generate income for these bloggers,

Having your own blog means that it not only belongs to you but also requires you to build it step by step.

For example, the language of the articles, the layout of the interface, the number of functions, and search engine indexing all need to be improved gradually by yourself.

In the end, seeing your website grow step by step will bring a sense of pride and satisfaction.

I hope everyone reading this article, whether students or others, can have a blog that completely belongs to them and put their heart into building its content.

Similar to the quote here, it will generally be some notes to pay attention to, so remember to be mindful before reading.

Things to be Mentioned#

• Hexo
• Static Blog
• Serverless
• GitHub Pages
• Hexo Themes

Steps#

Install Node.js#

What is Node.js?

Node.js is a JavaScript runtime environment based on the Chrome V8 engine, using an event-driven, non-blocking I/O model, allowing JavaScript to run on the server-side development platform. It makes JavaScript a scripting language on par with server-side languages like PHP, Python, Perl, and Ruby.
—— Baidu Encyclopedia

You can ignore the above quote and just read the main text.

First, go to the Node.js official website to download the installer.

Choose to download the Long Term Support version. If you choose the latest version, it’s not a big deal, but you might encounter some bugs.

If you are using Windows, the downloaded installer should have the .msi extension.

macOS downloads have the .pkg extension.

Linux has a small cross on the right side of the tab.

Open the downloaded installer and press Enter all the way (you need to agree to the agreement at the beginning).

Wait for the installation to complete, then open the command line or terminal and type node.

If the returned content matches the version you installed, then the installation was successful.

Subsequent operations will be input in the terminal.

After successfully installing Node.js, it will come with the npm package manager by default, which will be used later.

Its full name is Node Package Manager, which you can think of as an app store on your phone.

Using npm in China can be slow, so you might consider switching to the taobao mirror source.

npm config set registry https://registry.npmmirror.com

You can install yarn after installing Node.js. It is a package manager produced by Facebook that is faster than npm.

npm install -g yarn

Common npm & yarn packages and commands

Git and GitHub#

Install Git#

Visual Studio Code, abbreviated as VS Code,

is currently the most powerful and user-friendly editor, lightweight and fast (the best editor in the universe).

But it is not VS; VS refers to Visual Studio, which is an integrated development environment (IDE) (easier for beginners to read: used for developing software). This thing is an order of magnitude larger than VS Code.

(Microsoft is great)

First, install VS Code, so you can set VS Code as the default editor when installing Git.

Windows 10 / 11 users can download it from the Microsoft Store (new version).

Git is an open-source distributed version control system developed by Linus Torvalds (who is also the author of Linux) to manage Linux development.

In short, it is a version management tool. For example, if a designer has completed the third version of a poster, but the client wants the first version, Git allows you to quickly revert to the original version.

You only need to tell Git the status of each change (Git will automatically detect it; you just need to master a few basic commands), without needing to save a compressed package for each version, which is convenient and saves space significantly.

Download Git and install it. If the speed is too slow, you can try domestic software distribution websites (be sure to look for large companies like Tencent; avoid options like fast download).

Register GitHub#

You can wait until you finish testing on your computer and plan to deploy it online before coming back to this part.

Literally, GitHub is closely related to Git. Git means fool in Bing translation, while Hub means hub.

So GitHub means “fool hub” (big fog (crossed out)).

GitHub is the world's largest open-source project and code hosting site, as well as a platform for many developers to communicate, and it is also the largest dating site for same-sex individuals in the world.

Its code hosting implementation is based on Git.

Register for a GitHub account (although it is all in English with no translation, it is not difficult to understand; just remember the most commonly used options, and the official documentation has Chinese translations).

The English ID you register will become the prefix for the free domain name you can use (for example, if my GitHub ID is Big-Cake-jpg, then the free domain name I can use is big-cake-jpg.github.io).

Why is this thing that has no Chinese and is always inaccessible?

For ordinary people, when building a website for the first time, they may not have the money to buy a server and domain name.

GitHub provides the free service of GitHub Pages.

Users can use this service to deploy static sites.

Click the + in the upper right corner => New repository or the green button in the left sidebar to create a new repository.

The page for creating a repository. I cannot create it here because I have a repository with the same name.

The repository name must be like username.github.io as shown in the image, with the username in English, and case sensitivity does not matter.

Why must this repository name be used?

If you do not have your own domain name, doing this allows GitHub Pages to use it as your exclusive domain name. Of course, if you have your own domain name, you can bind it.

Click Create repository.

Install Hexo#

Hexo

• GitHub: https://github.com/hexojs/hexo
• The official documentation is understandable (score above 90 in Chinese) and you can also read the official documentation (I can't understand it anyway).

Hexo is a fast, simple, and powerful blogging framework based on Node.js, also hosted on GitHub, with a good ecosystem. You can quickly generate static pages with it, use others' themes and plugins, or customize your own.

Other commonly used blogging frameworks include WordPress and Typecho, but they often require purchasing your own server and cannot be deployed statically to GitHub Pages. Of course, the functionality and flexibility will also be greatly enhanced.

Another advantage of static sites is that they often load faster.

Static site generators also include VuePress, but these are mostly tailored for writing documentation, so there are fewer themes and solutions for blogs.

First, create a folder in your preferred location, give it a name you like, then right-click this folder and select Git Bash Here.

In the opened terminal, enter the following command:

npm install hexo-cli -g

install: Install

hexo-cli: The terminal tool for hexo, used to generate the template files needed later.

-g: Global installation, meaning it can be used anywhere on the computer.

Then enter:

hexo init your GitHub username.github.io

hexo is used because we previously installed the hexo-cli package, so we can use the hexo command.

init initializes the blog template, and the parameter that follows will be the name of the new folder, which is recommended to be consistent with the repository name.

cd your GitHub username.github.io
npm install
# or
yarn install
hexo server

server means telling Hexo to start a local testing server. This way, you can access localhost:4000 in your browser to see the effect.

Press Ctrl + C to terminate the local server.

At this point, the basic framework of the site has been set up.

Using Third-Party Hexo Themes#

The default theme provided by Hexo is hexo-theme-landscape.

The style is simple and the functionality is limited, so most people do not use the default theme.

Here, we will use the theme hexo-theme-yun by Yun You Jun.

The theme of this site is hexo-theme-yun.

Of course, you can also look for other themes to use at Themes｜Hexo, such as hexo-theme-next.

Download the Theme#

Enter the terminal, ensure the path is in the blog folder you initialized earlier (hereinafter referred to as the Hexo directory), and then execute the following command.

"Did you know?" You can directly open the terminal in VS Code.

yarn add hexo-theme-yun # npm install -g hexo-theme-yun

Note: hexo-theme-yun started using npm package distribution from v1.8, and you need to follow the steps in the documentation for configuration migration.

Edit Hexo Configuration#

Right-click the Hexo folder and select "Open with VS Code." All subsequent operations will assume you are in this working directory.

In the Hexo file directory established during the initialization operation, there will be a _config.yml file.

This is the configuration file for Hexo, and you can check the meanings of various configuration options at Configuration｜Hexo.

In this file, find the theme field and change the landscape that follows to yun.

The yun that follows should be set according to the theme you choose. For example, if you use hexo-theme-next, then set the following field to next.

Generally, the theme will declare which renderer it uses in the documentation.

For example, hexo-theme-yun uses pug and stylus renderers, while the ones that come with Hexo are generally ejs and stylus, so you may need to enter the following command to install the missing renderers.

npm install hexo-renderer-pug hexo-renderer-stylus

# If there are issues, you can try installing with yarn.

After completing the above steps, start the testing server again using hexo server, and you will see a brand new page.

Customize Theme Configuration#

The first time you start, you will be using the default configuration of the theme, which may not meet your needs.

So you can customize the theme according to your requirements.

The default configuration file for the theme is located in source/theme/_config.yml.

However, directly modifying this file will make future theme updates troublesome.

Generally, the theme's documentation will provide a solution for this situation.

For example, hexo-theme-yun will prompt users to create a _config.yun.yml file in the root directory of the blog.

For more configuration options, please refer to the theme documentation.

Generate Static Files for the Site and Deploy#

Generate Static Files#

Until now, your previous work has been done locally, and you may be eager to get your blog online.

At this point, it's time for GitHub Pages to come into play.

# Generate static files
hexo generate
# Abbreviated as hexo g

After execution, a public folder will appear in the Hexo directory, which contains the static files generated earlier.

Associate with Remote Repository#

Then execute the following command to initialize the Git repository.

git init # This only needs to be executed once.

Before deploying, it is best to create a backup branch of the Hexo working directory.

git checkout -b hexo

After completing this, all work will be done in the hexo branch.

Install the hexo-deployer-git plugin.

npm install hexo-deployer-git

Configure it in the Hexo configuration file _config.yml (not the theme's).

deploy:
  type: git
  repo: the link to the repository you created earlier # For example: https://github.com/Big-Cake-jpg/big-cake-jpg.github.io
  branch: master # Default is the master branch.
  message: Update Hexo Static Content # You can customize the description for this deployment update.

Save and deploy.

The first deployment may require your GitHub account password. The password will not show asterisks when entered, but it has been input.

hexo deploy
# Abbreviated as hexo d

Wait for Git to finish pushing, then open GitHub and go to Repository => Settings => Pages.

Select the branch (usually master), and click save.

After a few seconds, open https://your GitHub username.github.io to see the online effect.

Backup Hexo Working Directory and Automatic Deployment#

Backup Hexo Working Directory#

The above method only deploys the generated static files to the cloud.

To facilitate writing on different devices and for safety, your Hexo working directory should also be pushed to the GitHub repository for backup.

# This only needs to be executed once, which will establish a connection with the remote repository.
git remote add origin https://github.com/your username/your username.github.io.git

VS Code has convenient operations; it will display all the files you have modified in the "Source Control" section on the right sidebar.

You can enter what files you modified in the input box at the top, and then click the checkmark to commit to the local Git repository.

Then click the blue bar at the bottom with two arrows to push the Hexo working directory to GitHub.

Automatic Deployment#

Over time, you will find that this is still inconvenient. On other devices, you have to pull the repository again, and if you happen to be using a phone/tablet, you can only stare blankly.

So now we need a continuous integration service.

This article uses GitHub Actions, which has its own repository Token and does not require additional configuration; you can directly use secrets.GITHUB_TOKEN.

You can refer to the official Hexo documentation or directly copy my gh-pages.yml.

Remember to change the value of branch to the name of the branch where you store the Hexo working directory and remove the algolia field.

Of course, you can also use third-party services like Netlify and Vercel.

Once completed, your personal blog will be basically set up. You can further customize the theme or start writing.

Start Writing#

Articles#

Enter the following command to create a new xxx.md file.

hexo new post xxx

Markdown Syntax and More

Adding Tags/Categories to Articles#

You may need to understand Hexo's Front-matter first.

Front-matter

---
title: A Step-by-Step Guide to Building Your Own Hexo Blog
date: 2021-12-04 16:45:10
tags:
  - GitHub  
  - Hexo 
  - Blog
categories:
  - Recommendations for Big Cakes
---
Your article content

Pages#

Custom pages can be used in Hexo, such as creating HTML files directly under source.

You can also create pages by executing the command below (still Markdown, but you can write HTML directly in Markdown, and it will render the same).

hexo new page xxx

FAQ#

Are you planning to make a video?#

No plans for that; my computer was taken by my family, and I'm not allowed to use it QWQ.

Secondly, video production is quite troublesome; writing articles is relatively simpler.

I want to bind my own domain.#

First, you need to have a domain.

Resolve the domain using CNAME to yourname.github.io (of course, you can also directly fill in the IP of GitHub Pages for A records).

GitHub Official Documentation, with Chinese

Create a CNAME file (without an extension) in the source folder and fill in your domain.

Then deploy once.

If you delete this later, subsequent deployments without it will overwrite the CNAME in the remote repository.

Filing#

Using domestic services like CDN without filing is really difficult.

Here, filing refers to ICP filing (the kind of "Beijing ICP No. xxxxxxxxxx" that appears in the footer of every domestic website).

However, domestic filing requires you to have a domestic server and purchase it for at least 3 months.

Things to note:

• Ensure the domain can be filed (domains like moe cannot be filed).

• Disable the comment section.

• Remarks must not contain the word "exchange."

• The homepage cannot contain direct links to other websites.

• Comply with laws and regulations (of course).

You can also take the website offline and wait until the filing is successful before bringing it back online (there will be occasional checks later, which are relatively lenient).

Just follow the filing steps of the service provider step by step.

After obtaining the ICP filing number, it must be clearly displayed in the footer and point to https://beian.miit.gov.cn.

In Conclusion#

A personal blog can serve many purposes, such as a notebook, memories, creations, development experiences, life, and more.

Years later, when you open it and see what you wrote, memories will flood back; how wonderful it is.

I hope that after everyone's blog successfully goes online, it can carry many of their memories and their lives, going further.