晓雨杂记

Written for someone 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 the indexing by search engines all need to be improved gradually.

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 usually contains some notes, so remember to pay attention to them before reading.

Things That Will 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 as a 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 installation package.

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

If you are using Windows, the downloaded installation package should have the .msi suffix.

macOS downloads have the .pkg suffix.

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 program 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 performed in the terminal.

After Node.js is successfully installed, 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 produced by Facebook and is a faster package manager 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) (easy for beginners to read: used for software development). 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 can 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.

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 things like high-speed downloads).

Register GitHub#

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

Literally, GitHub is closely related to Git. In Bing translation, Git means fool, 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.

Its code hosting implementation is based on Git.

Register for a GitHub account (although it’s all in English without translation, it’s 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, my GitHub ID is Big-Cake-jpg, so my free domain name will be big-cake-jpg.github.io).

Why this thing without Chinese that opens slowly every day?

For ordinary people, when setting up 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, where the username is in English and case-insensitive.

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 (above 90 points in Chinese) and you can also read the official documentation (I can't understand it anyway).

Hexo is a fast, simple, and powerful blog 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 blog frameworks include WordPress and Typecho, but they often require purchasing your own server and cannot be deployed statically to GitHub Pages. Of course, 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 that will be used later.

-g: global installation, meaning it can be used anywhere on your 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 is the name of the folder that will be created, which is recommended to match 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 built.

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 use the theme hexo-theme-yun by YunYouJun.

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

Of course, you can also look for other themes 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 (hereafter referred to as the Hexo directory), and then execute the following command.

"Did you know?" You can open the terminal directly 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 documentation steps 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 created during the previous initialization, there will be a _config.yml file.

This is the configuration file for Hexo, and you can view the meaning 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 is used in the usage documentation.

For example, hexo-theme-yun uses pug and stylus renderers, while the default ones in Hexo are 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 are 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 usage documentation will provide a solution for this situation.

For example, hexo-theme-yun allows 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#

Up to now, all 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 take the stage.

# 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 deployment, it’s 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 uses 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 the Git push to complete, 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 a convenient operation; 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.

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 or 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 other information

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 created in Hexo, such as directly creating HTML under source.

You can also create a page 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 family, and I can't 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 name.

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

GitHub official documentation, with Chinese

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

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 "Beijing ICP No. xxxxxxxxxx" that appears in the footer of every domestic website).

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

Note that:

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

• Disable the comment section.

• Remarks must not contain the word communication.

• The homepage cannot contain direct links to other websites.

• Abide by the law (of course).

You can also take the website offline and wait until the filing is successful before going online (there will be occasional reviews 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, etc.

Years later, opening it again and looking at what you wrote will bring back many memories, which is wonderful.

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