Bricklayer+Hexo+Nginx+Namesilo Building a personal blog experience summary

foreword

This article is not a complete and detailed guide to building a personal blog from scratch, but a summary of some problems and experiences that bloggers encountered in building this blog. After all, technology is constantly improving, and some past experiences may not be applicable in the new version. So I hope this article can give some help to everyone who wants to build their own Blog, and make everyone take less detours~

Building steps

1. Buy and build a VPS
2. Set up Hexo environment on VPS
3. Build Nginx on VPS
4. Deploy Hexo to Nginx
5. Register a domain name and add domain name resolution

PS The above steps can be carried out in the way you like, except that the first step is a necessary premise.

Buy VPS Tutorial

For details, please check: The latest bricklayer registration and purchase and Alipay payment tutorial

Build SS

For details, please check: The latest bricklayer fool-style one-click SS/R tutorial (updated version)

The overall construction process is still very simple. I will not waste space here to repeat the description, and go directly to the next step.

[Note 2] When building to the installation system, it is best to choose centos-7-x86_64 (-bbr with or without bbr). Because the blogger used centos-6-x86-bbr by default before, and then when installing Node.js, it showed that the system version was incompatible. . .

Setting up a Hexo environment on a Bricklayer VPS

However, this step can be completely helped in the official documentation, the official website also has Chinese~

Before deploying Hexo, you need to install two dependencies - Node.js and Git (it is recommended that you build ss first during installation, because it is not clear which source will be walled off). There is basically no big problem if you follow the steps of the official documentation. After building Hexo, you can go to the next step.

After completing the deployment of Hexo, you can start its own local server for testing. The instructions are as follows:

cd /Hexo-Path   # “/Hexo-Path”替换为你当时搭建 Hexo 的文件夹
hexo clean
hexo g
hexo s --debug

In this way, Hexo can be accessed through the local 4000 port. However, the blogger uses ssh to log in to the VPS. How can I open the browser and access port 4000 without a graphical interface?

Here, you can use the method of binding the local port to the remote server port, and then use the local browser to open the bound port, and one line of instructions can solve the problem:

ssh username@address_of_remote -p [ssh端口号] -L 127.0.0.1:1234:127.0.0.1:4000

The -p option is optional, because the default ssh port of some VPS is 22, if not, fill in the correct port number.
In this way, we bind the local port 1234 to the VPS port 4000, and then enter localhost:1234 in the local browser to access the test blog website~

Build Nginx on VPS

When the blogger installed this step, he installed it according to the steps provided in the short book before, and there was a problem that the nginx installation package could not be found. The software source I used at the time was epel-release-7-9.noarch, but I tested it again before writing this blog post, and this time it was successfully installed. I guess the software source may have been temporarily removed at that time. the package bar. If you encounter the problem of not being able to find the nginx software, you can refer to the official nginx documentation.

The documentation is in English. For the convenience of everyone, I will write the Nginx installation process of CentOS below:

1. Create the nginx.repo file in the /etc/yum.repos.d/ directory and add the following content to the file:

# 这里选择安装的是稳定版，需要其它版本的自行参考官方文档。
name=nginx repo
# 这里的“centos/7/”请按着自己系统进行调整
baseurl=http://nginx.org/packages/centos/7/$basearch/ 
gpgcheck=0
enabled=1

2. Execute the following command to complete the installation:

sudo yum -y update
sudo yum -y install nginx

Links to official documentation are at Resources.

Deploy Hexo to Nginx

Once you've installed Hexo and Nginx, you're not far from finishing the build.

It is worth noting the configuration of rsync:

deploy:
  type: rsync
  host: 你 VPS 的 IP 地址或者域名
  user: root
  root: 你想将 Hexo 生成的静态文件存放在 VPS 中的目录 例如: /www/hexo/blog/
  port: 你 VPS 的 ssh 端口号
  delete: true
  verbose: true
  ignore_errors: false

The root item here needs to be filled in a folder different from the one you used when building Hexo, because this root is used by nginx. If you fill in the same folder as when building Hexo, there will be a serious problem of file overwriting.

At this point, you have really completed the construction of your personal blog. You can access your personal blog by entering your VPS address in the browser. Applause.

Change the theme for Hexo

Originally Hexo changing the theme should be a very easy and simple task, but bloggers spend a lot of time in this step. Therefore, this section mainly introduces the method of Hexo changing the theme, and some problems I encountered:

1. Download the theme

There are many themes for you to choose from on the Hexo official theme site , choose one you like.
For example, this blog uses the black-blue one.

Clone it into Hexo's themes directory:

git clone https://github.com/maochunguang/black-blue /PATH_To_Blog/themes/

2. Configure the theme

In the root directory of the personal blog there is a _config.yml file, which is the configuration file for the entire site, find the themes field in the file and modify it from landscape to black-blue.

So far, the theme has been successfully configured.

Note that
the reason why bloggers spend a lot of time in changing the theme is that after changing the theme, there is a serious abnormal theme display problem after opening the website. At first I thought hexo clean was not called to clear the cache before deployment, which caused the content to display errors, but after redeploying, the problem still exists. Then I want to test on the local port to see if the theme still shows the error, but the website running on the local server shows the changed theme correctly. This left me speechless. . . I've googled and searched forums for answers to no avail, and I'm ready to give up on this topic. Finally, I thought about it. Could it be that the browser itself cached the content of the original website, which caused the display error?
So I cleared the browser's cache, and then it can be displayed normally! ! This problem really makes me laugh and cry. I don't know if this is a problem with the theme I am using or my own chrome browser (but I also encounter the same problem in my mobile browser). So here is a reminder to friends who need to customize the theme, after changing the theme, you can clear the browser's cache before opening the website.

Register a domain name and add domain name resolution

This step is not necessary. If you want others to visit your blog more easily, it is better to register a domain name. Actually, it is not expensive, but it can bring a lot of convenience.

In this step, bloggers mainly refer to this blog post: Domain Name Purchase and Use Tutorial

In theory, if you follow this blog post to register, there will be no major problems. I just add a few points here:

1. The domain name prices marked in Namesilo are calculated on a one-year basis (the discount is only for the first year), and you must pay attention to the final settlement amount before paying (some domain names are special and the price will be very high)
2. If you set up domain name resolution after registration, if there is a lot of domestic traffic, it is best to choose a domestic DNS server (specifically, I do not recommend it, so as not to be suspected of advertising)

concluding remarks

This is the first official blog post of the blogger, and there may be some shortcomings in the format and layout, please understand! If you have any questions or suggestions, please leave a message widely, I will try my best to reply, thank you for your support!