Build a personal blog with Hexo and Nginx(GitHub Pages)

This article introduces the main steps to build a personal blog using Hexo and Nginx (or GitHub Pages).

Before the text begins, let me introduce the functions of the tools mentioned above:

  • Nginx：Acts as a web server. In a personal blog, its main function is to provide HTTP or HTTPS services on the server so that users can access your blog site through Internet.
  • GitHub Pages：When there is no personal cloud server, using GitHub Pages can also achieve the purpose of building a personal blog. Specifically, GitHub Pages is a special GitHub repository where you can put some HTML, CSS, and JS files in this repository to build a personal website.
  • Hexo：Hexo is a static blog framework, which can be used to build a blog website, allowing users to focus on blog content without being familiar with front-end content such as CSS and Javascript. Using official and many open source themes provided by the authors, you can quickly build beautiful web pages, and blog content can be written in Markdown.

Next, the specific procedure are introduced.

1. Install Node.js locally

Node.js official website is: https://nodejs.org/en/download/, open the link, and select the appropriate installation file to download according to your local environment. Select the binary installer file for Windows and Mac, and just click Next to install.

The installation on Linux is a little more complicated. The following two installation methods are recommended, and you can choose one of them:

  • Compile and install from source code without configuring bash, but compiling takes time, reference
  • Download and install the binary file, you need to configure the bash environment, reference

After the installation is complete, enter the following command in the terminal:

1
2
$ npm -v
$ node -v

If there is an output version number, the installation is successful.

2. Install Hexo locally and initialize the blog environment

Hexo installation command can be referred from [official website] (https://hexo.io/), as follows:

1
2
3
4
5
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

For more information about Hexo, please refer to the official documentation: Documents | Hexo.

In order to make your blog site more in line with your aesthetics, you can choose a suitable theme Themes | Hexo. This blog site uses Fluid, and its GitHub repository is: fluid-dev/hexo-theme-fluid: A Material Design-style Hexo theme/ An elegant Material-Design theme for Hexo (github.com), the official document address is: Configuration Guide| Hexo Fluid User Manual (fluid-dev.com).

Read the official Hexo documentation and the official documentation of the theme you choose carefully, configure the yml file according to your preferences, and half of the way to build a personal blog is completed.

Next, the problem we need to solve is: how to allow the majority of users on the Internet to visit your blog site?

Sections 3 and 4 provide two methods, which can be selected according to your specific situation.

3. Create a GitHub Pages repository

First, create a repository on GitHub. The naming of this repository is a bit particular, and the examples are as follows:

My GitHub home page address is: https://github.com/UnpureRationalist , where UnpureRationalist represents my username.

Open GitHub and select the option to create a repository, name the repository username.github.io, for example, my repository is named: UnpureRationalist.github.io, and set the repository to be publicly visible.

Then, upload a file named index.html in the repository, the content of the reference file is as follows:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <p>Hello World.</p>
    </body>
</html>

Enter the link username.github.io in the browser, such as my blog address: UnpureRationalist.github.io, and then the browser can display the contents of the index.html file (may need to wait for a while ).

Using this repository, we can allow other users to visit our blog site.

4. Install Nginx on the server

For users who own a personal cloud server, they can directly install the Nginx service on the personal server and build a personal blog on their own server.

First, we need to install Nginx on the server. Here we take the Ubuntu as an example. The steps are as follows:

1
2
3
4
$ sudo apt update
$ sudo apt install nginx
$ sudo systemectl enable nginx	# set nginx to start on boot
$ sudo systemctl start nginx	# start nginx service

Note that in order for Nginx to work normally, port 80 or/and 443 needs to be opened in the security group settings of the server so that the HTTP or/and HTTPS service can work normally. For details, refer to the server provider you use.

If you want to use HTTPS service, you need to configure Nginx. For details, refer to the link: https://cloud.tencent.com/document/product/400/35244.

5. Configure Hexo for automatic deployment

After the above steps, we have a directory for storing personal blogs locally; we have a directory that public network users can access in the cloud. Therefore, we only need to use tools such as git or scp to upload all the files and folders in the public directory generated by Hexo to the GitHub repository or the root directory of the web server. However, it is cumbersome to do these operations manually, we can use the functions provided by Hexo to implement a command deployment. For details, refer to the link: One-Command Deployment | Hexo.

Specifically, make appropriate configurations in the _config.yml configuration file, and then run the following command to deploy your personal blog to the cloud:

1
$ hexo clean && hexo g && hexo deploy

However, in my actual use, I found that the one-command deployment function is not very easy to use, and an error will be reported when deploying to the cloud server. Therefore, I use the functionality provided by Hexo to deploy to GitHub Pages; for the server, I use the unpretentious scp command for manual synchronization. If readers have a better automatic deployment method, welcome to exchange and discuss.

blog
#Hexo #blog
Build a personal blog with Hexo and Nginx(GitHub Pages)
https://arcsin2.cloud/en/2023/02/18/Build a personal blog/
Author
arcsin2
Posted on
February 18, 2023
Licensed under