Quickly set up a personal blog - nanny-level tutorial

This article is an integrated version of the column content. It was published in sections in the early stage. For the process, please refer to the serial number identification of this column.

Preface

Occasionally, I saw a question that was highly praised by someone: How to prove the ability of computer major students? As for the question below, there were many comments from netizens. The clearest and most realistic one I remember is: What ability do you have, just to pretend to be X?

Seeing this, I have to stand up and say something. The only way to prove your ability is to build a website, right? After all, it is still "specialization in the industry," right? I don’t know why training my practical skills and broadening my knowledge has become a pretense for keyboard warriors. I can’t beat it. I beg for mercy.

Okay, back to the topic, my original intention to build a personal website is actually very simple. Maybe you have thought about it, but you just haven’t done it. I think: There are many writing platforms on the Internet now, such as the C station I am using now. It is very mature and has community discussions, question postings, Blink updates, etc., all available. After I learn the relevant knowledge, why can't I write one myself? Maybe it’s more because I like to mess around, haha.

The first time I came into contact with it was in the “Section Customization” module for article publishing on station C. By entering a few lines of code, you can have a beautiful interface. At that time, because I had not yet come into contact with CSS and Web front-end, I got it from free prostitution on the Internet, which aroused my interest in in-depth study.

What is a blog? A blog is a platform for everyone to share and communicate. We can learn from other people’s experiences and improve ourselves. This is true for people who read blogs, and for bloggers who write blogs, it is a summary of what they have learned, which can clarify their own thinking, facilitate future review, and develop good habits. Technical blogs can record the problems we encounter and better bug handling solutions. If we encounter the same problems in the future development process, our memory will be more profound.

When you have an idea, you have to take action. When I actually started to implement it, I realized that it was not an article posted by some headline-makers, such as "Build your own website in ten minutes, and you still don't know how to build a website yourself?". When you actually watch their videos and articles and operate them, some of them are real masters. You should know some of the things they default to, and you should be able to write them simpler. There are also some "great porters" who simply publish other people's articles without linking to the original article.

It was precisely because I didn't find a complete set of resources that could help novices develop a website that I decided to write down the process of building a UP website and share some of my experiences from beginners to final implementation. So, if you also want to have a website of your own, you can follow along and get started. If you encounter any problems during the process, you can send a private message or leave a message. Now, let’s get started

Think about it, what do we use most to check information? Some friends will say: There is no need to ask, it must be "going to college at station B", or it must be a search engine. Yes, I think this is the tool most of us use the most when learning new things and moving forward. So, what do we search for? For example, you can do this:

Perhaps, you can also do this: You

can indeed search for a lot of videos and articles. But in this part, I describe my mental journey from the perspective of a beginner: because this thing is currently just a preliminary idea in my mind, and I don’t know how to implement it yet. It's like a person is lost in the mountains. I just know I want to get out, but I can't find the way.

In this session, let's talk about building a website and what I should prepare. Most of the tutorials on the Internet are long and long, and you can't finish them even after swiping the mouse several times. Friends who are just getting started will feel like: "Wow, it's so difficult, there are so many things." So here I have classified the contents of each part. You just need to follow the order and go down step by step.

local website

Why is it emphasized here that it is "local"? At the beginning, I also watched the tutorials and followed other people's ideas, such as buying a domain name first, buying a server, etc., I have encountered pitfalls. This will cause difficulty in purchasing or choosing for those who are just getting started. Why don’t we think in a different way? Now I build a website on my own computer and then “send” it out so that others can see it. Look, isn't this clear?

To implement a website on your own computer, you need two necessary things: a browser and development tools . Everyone must have the former, so I won’t go into details (otherwise why did you read this article of mine, hehe), let’s focus on it. the latter

development tools

WebStorm

WebStorm is a JavaScript development tool owned by JetBrains. It has been praised by the majority of Chinese JS developers as "Web front-end development artifact", "the most powerful HTML5 editor", "the most intelligent JavaScript IDE", etc. It has the same origin as IntelliJ IDEA and inherits the functions of the powerful JS part of IntelliJ IDEA.

Without further ado, come here to download the portal

. There is a small problem. This thing is chargeable. If you are a college student, you can apply for an education account for free through student certification. If... (I won’t say more, I’ll tell you. Ask Du Niang, you can find a way), just install it without any thought, don’t panic

Vscode

Visual Studio Code ("VS Code" for short) is a cross-platform programming language that Microsoft officially announced at the Build Developer Conference on April 30, 2015, that runs on Mac OS Platform source code editor that runs on the desktop and is available for Windows, macOS, and Linux. It has built-in support for JavaScript, TypeScript, and Node.js, and a rich ecosystem of extensions for other languages ​​(such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity)

The two tools of Portal

are specifically: the former is a family bucket (it has everything, you don’t have to worry about it, just use it), and the latter is a shell company that requires various employees (plug-ins) to implement some functions. So if you are too lazy to configure it, just download the first one. The second one may be more convenient in Markdown syntax for blogging , which I will talk about later. If you are a novice here, I suggest you download WebStorm . Some configurations in the following will be more convenient.

frame

What is "framework"? I'm confused, hehe. Don’t panic when something happens, just listen to what Jason has to say. Here we look at the explanation of a certain degree entry:

A framework is a frame—referring to its restrictive nature, and a shelf—referring to its supporting nature. It is a basic conceptual structure used to solve or deal with complex problems.
This broad definition of framework is very popular, especially in software concepts. Frames can also be used in mechanical structures

What does this thing mean? For example, if we build a house, how do you build it? We can't start without drawings and workers. Isn't this a "fantasy"? First of all, the designer must design the drawing according to the user's needs, and then the workers can start building the house based on the drawing, right? A lot has been omitted here. Big names in the industry please let me know. Let me give you an example.

The same goes for when we build websites. Do you really think that so many websites are written from scratch line by line by programmers day and night? emmm, actually, my answer to this question at the beginning was: Well, yes, that’s for sure. It wasn't until I went for an internship that I discovered that not all things in the company were developed from scratch. (Open source is good, hahaha) Do you want to be like this?

A product, project, website... As long as it is something that has been done by predecessors, we can learn from it. Learn good coding, open source, and why should we waste time doing it again if others have already implemented it? Especially WordPress , which will be described below , is simply a "brainless operation". You may not even know what you have done, but a website that belongs to you will just come out.

In layman's terms, a blog framework is a set of source code written by others. You just need to take it and be able to use it. You can change your own configuration and match it with the theme you want. This is enough (big guys, please take a detour) . So below I will share with you some frameworks that I learned about when building my personal website, and briefly analyze them for you to choose from.

As the old saying goes, the audience of this column is friends who are new to it, so I will not mention some complicated parameters that do not need to be known. I will only cover the most critical parts, so that everyone can quickly find the one that suits them.

Let me state in advance that the framework used by Jason isHexo, you can choose different ones from me, but the configurations are not the same, the same can be obtained

Hexo (highly recommended)

Hexo is a fast, simple and powerful blogging framework. You write your post in Markdown (or other markup language) and Hexo generates static files with beautiful themes in seconds. >Click here to get direct<

Hexo characteristics:

• Excellent operating results and low cost
• Multi-platform: local, cloud, PC, mobile terminal all-in-one
• Supports a variety of CDN services (enabled to increase the check-in speed of web pages)
• Major search engines have greater advantages in the inclusion and weighting of websites (users are more likely to find the content you publish)

If you like configuration and complete certain configurations after operating the code, this one will suit your taste. Post a configuration screenshot for reference:

WordPress

WordPress is a free and open source content management system (CMS) based on PHP and MySQL. It is the most widely used CMS software in the world. It started as a simple blog system and has developed into a fully functional CMS system with thousands of plug-ins, widgets and themes. >Click me directly<
WordPress features:

• Wide range of commercial applications
• Convenient for subsequent backup and transfer, with built-in tool support
• Powerful scalability (think Google’s plug-in mall here)
• Very user-friendly for customization (you can definitely build what you want)

If you don’t want to look at those codes, you can use this. WordPress comes with back-end management. Choose the theme you want, and then drag and drop the required controls (for example, if you want to implement the function of displaying time, there will be a mobile version like It’s like a desktop widget, just drag it to where you want it to be displayed). The most important thing is that to use it, you need to get a server first

In order for everyone to find the right one more quickly, I will not give you many options, let alone tell you what else is there (otherwise you will think that what I have now may not be the best, and I want to try more. If this is the case, you will waste a lot of time without realizing it. It is better to build it with one first, and then replace the others when you are familiar with it later.) When you get started independently, you will have a clear idea and will not be confused. spending too much time on one point

local environment

As for this, without too much introduction, it can be understood that we need cement, shovels and other tools and raw materials to build a house. The local environment is the shovel and tool we use. Hexo 's blog framework is made of raw materials like cement. We need tools to start working, otherwise you would have to do it with your hands ...

git

Briefly describe what it is used for, Look Here:

Git is an open source distributed version control system for agile and efficient handling of any project, small or large. It is an open source version control software developed by Linus Torvalds to help manage Linux kernel development. Git is different from commonly used version control tools such as CVS and Subversion. It uses a distributed version library and does not require server-side software support.

Ignore the words above that you have never heard before, here goes. Have you ever used a certain network disk? Does it have automatic backup? If you select a local folder, when the local file changes, as long as the software is running in the background, will the cloud automatically be consistent with the local one? The process is like this, but the current git operation can be likened to a cloud. With some commands, you can "send/backup" the local code to the cloud.

I have not discussed the distributed features, commands, etc. of git in depth. I recommend that friends who are getting started here can > read the tutorial here < to get started quickly.

Since we want to use Git, we must first install and configure the Git environment. Click here to download (Windows operating system) and click the Download button.

I won’t go into details about the installation process. Just use the default configuration and click “Next” to finish.

Next we configure the environment variable information. For details, refer here . After opening the Path variable, add the local environment installation directory (make sure the file location reaches cmd).

After the installation is completed, you may not see the desktop shortcut, don't worry. When we search for Git in the Windows search box, we can see several icons like this. You

can directly click Git Bash or right-click anywhere on the desktop to open Git Bash Here to use it.

node.js

>Download direct<

Many friends are confused between these two versions. After reading this explanation, I believe you will know which one you need. Jason uses the LTS version .

LTS stands for "Long Term Support", and Current stands for "current".
Current stands for the latest released version (once every 6 months), which may be an odd-numbered version or an even-numbered version.

Hexo

Install

Right-click on the desktop, open git bash here and enter the command to install (the default location is sufficient, and subsequent configuration is not recommended)

npm install -g hexo-cli

I have already installed it here. The display may be different from yours. Just close the window after execution. At this time, there is already a hexo environment locally. How about it? Isn’t it very simple?

initialization

For convenience, it is recommended to create a new directory directly under any drive letter except C drive, and name it any way. For example, I created a new hexo-jason-blog folder on D drive. You can refer to it

Originally, I wanted to use the local environment I had set up to demonstrate to everyone, but in order to truly reflect the operating environment of a "novice", Jason decided to re-establish it and re-operate step by step, just so that everyone can take every step until success.

Open git bash here in this folder and enter the command

hexo init

You may encounter this error at this time. Don't panic. It is caused by the network when cloning from GitHub

. Just try a few more times. For solutions to such problems, please refer to here<

Successful effect:

These files are added to the root file directory.

Let’s briefly introduce the file structure of hexo:

• public All content of the web page ultimately seen
• node_modules plug-in and node.js module required by hexo
• _config.yml site configuration file, set some public information, etc.
• package.json application information, configure the js package required for hexo to run
• scaffolds template folder, new articles will contain corresponding template content by default
• themes stores theme files, and hexo generates static web pages based on themes (very fast)
• source is used to store user resources (except for the posts folder, other files named with "+ file name" are ignored)

Our daily writing operations are all under source/_post. Since we already have a tool for "mixing mud" when building a house - WebStorm, why not use it?

Open the root directory hexo-jason-blog in WebStorm (just drag the file to the desktop WebStorm shortcut to open it), open the terminal and enter the command

hexo s

Click the link http://localhost:4000 (yellow underlined position in the picture) for local preview. The default is hexo's built-in landscape theme. The cursor

stays at the Terminal position, and the key combination Ctrl+ Cstops local preview. This is the simplest local website.

emmm, my friends have also successfully previewed the default page. It's probably like this. Hey:

But I always feel that something is missing. Without some of the things that a blog or website should have, how can it be made more like a website?

theme

Here we introduce the theme and framework . The Hexo we are using now is a fast and simple blog framework. The theme is an "accessory" developed by developers based on this framework with more complete functions, page styles, and more columns. Just like the mobile phone you use, replace it with a mobile phone case. When choosing a mobile phone case, you need to match the model of your mobile phone, otherwise it will not match, right?

To take another "chestnut", like an Android phone (IOS closed source, unless jailbroken), the default desktop theme produced by the manufacturer. In the theme store app, you can choose better-looking icons, backgrounds, and fonts according to your own preferences. It's like "putting on new clothes". From this perspective, we can understand what we are going to do next.

style

When it comes to topics, there will definitely be a lot of them. Again, everyone can choose according to their own preferences. Here is the official theme library . I prefer Butterfly theme. Let me give you a new look for your website.

Butterfly

Let me first show you the theme page

Blog homepage

Blog post page

From the topic documentation, it can be seen that the author has been maintaining it very recently. As the saying goes, a good product must have good documentation. The author is also very attentive. You can follow the documentation to configure it step by step. It is very simple, just forming a chain of some tools.

application

• Terminal input command

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

Wait for the installation to complete. Some files of the butterfly theme are displayed in the themes folder.

• Install plugin

Install pug and stylus renderer. If not installed, the preview interface is as follows.

Enter the command in the console, press Enter and wait for installation.

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

• Modify configuration file

Find the **_config.yml file in the root directory of the website and change the theme to butterfly** (note the yml file format)

• local preview

hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览

The renderings

may still look so "crude", well, this problem will involve the subsequent "theme beautification" (actually, it just adds some good-looking pictures, which is also very simple). My blog has not been optimized in detail. It is very rough and time is limited. I will talk about it later. You can take a look and leave a "thought". I believe you will do better than me.

my blog

Officially launched

picture bed

Is this a ma thing? ? ? Don't panic, don't you think our default theme website doesn't look good at all? That's because there are no pictures. Wouldn't it be much better if you replaced it with a set of pictures and optimized it? When we refer to images on the Internet, one way is to upload them locally and put the path reference in the code; the other way is through the URL, obviously the latter is more convenient (if compared to the server that will be used later, as the amount of pictures increases day by day As the number increases, the storage space gradually decreases. Every time you post a post, you need to upload it together with the picture. How much space will it take up?)

However, wouldn't it be great if we had a place that could convert local pictures into links (everyone can access the photos you posted through this link)? Picgo and some other plugins can do it

I updated an article some time ago, using GitHub and SM.MS. If you have friends who can’t operate by analogy, >Look here< Since GitHub is foreign after all, the access speed will be a bit slow. SM.MS is an old brand that has been running for a long time, but both of them are slightly slower in access speed.

Jason strongly recommends the domestic code cloud (Gitee) for use with Picgo . Stable, fast, and not easy to lose. (PS: Some friends will ask here. I have made my warehouse public, and all my photos are in it. Is there any privacy leakage or something?) For this kind of question, I can only say who has free time every day

. Are you okay and want to visit your warehouse? ? Furthermore, can you upload XXX (your own imagination) photos to the warehouse? ? So, feel free to use it and don’t think it’s really spicy.

In addition, friendly reminder: The maximum storage capacity of Gitee’s free version account is 5G. If the warehouse is full, remember to change the path from the software. After use, do not change the name of your Gitee account (not the nickname, the English name), otherwise you will wait for 404 Bar

Butterfly configuration

Put the official documentation directly , friends can configure it first, it is very simple. The page you see may be in Traditional Chinese. Do not use the translation engine that comes with the browser (part of the content may not be displayed after translation). The considerate author has already thought of it. We only need to switch it in the settings in the lower right corner of the website

. Sen will publish a special issue later to talk about some issues in theme configuration. I believe that the friends who see this can’t wait to post their websites online. Let’s focus on this issue.

GitHub Pages configuration

GitHub Pages are web pages created directly from repositories/projects in GitHub . Management is simple. Edit the content in the warehouse locally and upload it to GitHub. GitHub Pages can quickly complete the update. The key point is that it does not cost money, does not cost money, does not cost money. Create

a new warehouse and fill in the content as follows. Pay special attention to the red box position

guarantee . Warehouse public , fill in the correct name username.github.io , the system automatically changes to Pages

Find Pages in the warehouse settings

and remember the warehouse address. We will upload the local files to the warehouse. If you are using git

for the first time on your computer , please configure the SSH public key (a security protocol, you can understand it as logging in to a certain computer). Verification code required by the website)

Link to the remote in WebStorm and add the warehouse address. This is not the warehouse required to publish the website (not the "username" + github.io warehouse, create a new one to manage local code)

because these are basic git commands, which were also mentioned earlier. I've been here before. If you don't know, you can read the information in this column. They are all basic operations and are very easy to get started.

Modify the website deployment settings. Open git bash here

in the local root directory of the website and execute the following commands in sequence.

hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览
hexo d //部署项目

After the execution is completed, everyone can access your website through your username + github.io domain name. At this point, we have successfully launched our website

If you feel that the access speed of GitHub is slow (well, it is actually slow, and sometimes it cannot be opened), you can deploy it to Gitee . The operations are the same, and they are still in Chinese. Don’t be too simple. ei

Well, the release is indeed released. Do you think a name like username + github.io is easier to remember? ? I think if you are a newbie ( a user who may not even know what GitHub is), it will definitely be very difficult.

So, how to make it easy to remember and personalized enough?

Of course, this part is definitely not free. How can there be any reason to get everything for free? Right, it is recommended to complete the following operations on Alibaba Cloud or Tencent Cloud . If you use other platforms, it is not impossible, but it is recommended to purchase domain names and servers on the same platform for easy management.

Major domestic manufacturers have guarantees, so you don’t have to worry about it. From an economic point of view, choose whichever one has activities and is more affordable. Jason saw that Alibaba Cloud ’s activities at that time were more affordable than Tencent Cloud , so~~

Server purchasing guide

I received reactions from some friends: There are so many entrances, but I can’t find where to buy them/can’t find the entrance to the event. Here’s how to check the latest activities, what discounts the platform offers, and where to find the entrance

Ali Cloud

Exclusive for students

Complete student certification in the account center to purchase more discounts

Exclusive for events

Latest activities >Click me to get direct<

Tencent Cloud

I have to say that the interfaces of the two are basically the same. You only need to be familiar with one, so the locations are almost the same.

Exclusive for students

For student parties, check here >Click me to get direct<

Exclusive for events

Latest activities >Click me to get direct<

domain name

Domain name (English: Domain Name), also known as a domain, is the name of a computer or computer group on the Internet consisting of a string of names separated by dots. It is used to locate the computer during data transmission (sometimes also Refers to geographical location)
Since IP addresses are inconvenient to remember and cannot display the name and nature of the address organization, people have designed domain names and mapped domain names and IP addresses to each other through the Domain Name System (DNS, Domain Name System). , allowing people to access the Internet more conveniently without having to remember a string of IP addresses that can be directly read by machines

If you don't understand, it doesn't matter. Then listen to Jason in detail. Simply put, resources accessed on the public network have their fixed IP addresses , but if you want to access a specific IP , you need to remember it. However, it is not convenient to remember, so people came up with domain names .

Give the IP a personalized name. For example, the full name is "Jason the Siege Lion". My friends call me Sensen, Asen, and Xiaosen. They are all aliases, but they all point to the person "Jason the Siege Lion." So how to implement aliasing on the network? Here is an introduction to DNS , which is a service on the Internet that maps real domain names and IPs to each other. That is to say, what you enter the domain name to access is the IP address corresponding to the domain name.

Buy

Now that we understand what a domain name is , let’s buy a domain name first!
>Click here< to query the domain name you want

For example, you can search after entering the information, add it to the list after selecting it, and then pay to purchase. Different suffixes have different prices, it depends on personal preference

Domain name suffix, also known as top-level domain name, refers to the symbol that represents a domain name type. Domain names with different suffixes have different meanings. Domain names are divided into two categories: country-specific domain names (ccTLD), such as .cn in China, .us in the United States, .ru in Russia, and general international domain names (gTLD), such as .com, .xyz, .top, .wang There are more than 1,000 types such as , pub, .xin, .net, etc. All domain name suffixes have the same function, only the appearance and meaning are different. However, only a few domain name suffixes such as the ones in the examples can support the registration of websites in China.

For more domain name suffix information, view here

DNS resolution

Add domain name

Because we now have a website like username.github.io , to make it simple and easy to remember, we "resolve" "username.github.io" to the purchased domain name, so that the website has all domain names and usernames. github.io has two URLs

Open the warehouse, find settings, enter pages settings, add a domain name.

You can also use free forced HTTPS .

HTTPS (full name: Hyper Text Transfer Protocol over SecureSocket Layer) is an HTTP channel aimed at security. Based on HTTP, it ensures the security of the transmission process through transmission encryption and identity authentication. HTTPS adds SSL and HTTPS on the basis of HTTP
. The security foundation is SSL [SSL (Secure Sockets Layer), and its successor Transport Layer Security (TLS)) is a security protocol that provides security and data integrity for network communications. TLS and SSL encrypt the network connection between the transport layer and the application layer]
so the details of encryption require SSL. HTTPS has a different default port than HTTP and an encryption/authentication layer (between HTTP and TCP). This system provides authentication and encrypted communication methods. It is widely used for security-sensitive communications on the World Wide Web, such as transaction payments, etc.

Turn on this option

Add parsing record

Enter the domain name console on the Alibaba Cloud official website

. If not, search here

to find the domain name that needs to be bound to username.github.io. Click "Resolve"

to enter, and click "Add Record". You need to add two records.

The first time

and the second time

DNS resolution takes time. After a while, if you enter your domain name in the browsing box, the resolution will be successful for normal access.

Why is it said that it is officially online? After all, the website can only be viewed on the server, so it is more formal, right? Like GitHub Pages , it is free, but in China, it takes time after DNS resolution, and there will always be inaccessible or disconnected websites. The situation is too inconvenient

server

Let’s take a look first, who is the server ?

A server is a type of computer that runs faster, carries a higher load, and is more expensive than a regular computer. The server provides computing or application services to other clients in the network (such as PCs, smartphones, terminals such as ATMs, and even large equipment such as train systems). The server has high-speed CPU computing capabilities, long-term reliable operation, strong I/O external data throughput capabilities, and better scalability.
According to the services provided by the server, generally speaking, the server has the ability to respond to service requests, undertake services, The ability to guarantee services. As an electronic device, the internal structure of a server is very complex, but it is not much different from the internal structure of an ordinary computer, such as: CPU, hard disk, memory, system, system bus, etc.

Simple understanding: A theme with continuous power and space is always serving the resources you place (deploy) in the "sky (cloud)" and can handle various requests (for example, if you enter a domain name in the navigation bar to access the website)

There are two types of servers, domestic and foreign . According to our country's laws, websites in mainland China need to be registered, and the waiting time may be a little longer. Foreign countries do not need to register, but the stability and access speed cannot be guaranteed. You can judge by yourself. Jason uses a personal blog website deployed by Alibaba Cloud's light application server.

Buy

This is my server configuration, you can refer to it.

If you are a beginner, this entry-level configuration is enough for a student machine and can be obtained for free. For detailed rules, please see the community > Click me to go directly<

Developer->Growth Plan

Exclusive for students (after trying it, you can get half a month of free ECS server, and if you post your experience in the community (post a blog), you can renew for two months for free), for specific rules, please check the official website account center->basic information

location Complete student certification

Purchase discounts at the latest event location will be even greater

deploy

Password setting

Change the remote connection password at the location shown in the figure and save it.

Although you can use a browser to connect remotely , it is not recommended because some keyboard shortcuts will be mistaken by the system as operations on the browser instead of a dialog box.

remote connection

In order to avoid such problems, we chose to use the third-party tool Putty . The specific operation steps are very detailed in Alibaba Cloud's help document and will not be repeated here.

Start here and follow the prompts to complete the operation

Start the Putty tool, connect to the server, the login user name is root , and the password is the password set on the server location (the password entered in the Linux operating system is not displayed for security, so don’t worry). When the following interface appears, it means that the configuration is normal, and you can continue to the next step.

git configuration

1. Enter the command to install git

yum install git

If it is paused during the process, enter yes / y / Y according to the prompts to continue the installation. When complete appears at the end, the installation is successful.

2. Create a git account

adduser git

3. Add git account permissions

chmod 740 /etc/sudoers
vim /etc/sudoers

4. After executing the last command, click the keyboard ikey to enter the editing mode, find the location code shown in the icon, and

add a line below

git     ALL=(ALL)     ALL

Press Esckey and enter:wq(Meaning: Exit after saving)

5. Change permissions back

chmod 400 /etc/sudoers

6.Set git account password

sudo passwd git

Enter the command and press Enter. Enter the password twice in a row (not displayed, normal). When the icon appears, it is successful.

7. Switch to the git account

su git

Create ~/.ssh and ~/.ssh/authorized_keys files

mkdir ~/.ssh
vim ~/.ssh/authorized_keys

Click the keyboard ikey to enter the edit mode and paste the SSH public key generated by the local computer . The file location is as shown in the figure

. After pasting, press Escthe key and enter:wq(Meaning: Exit after saving)

Grant permissions

chmod 600 /home/git/.ssh/authorized_keys
chmod 700 /home/git/.ssh

8. Test whether password-free login is successful in local git bash here

ssh -v git@服务器公网IP

The icon content appears indicating that the connection is successful

9. Create a warehouse in the server and complete the configuration.
Switch to the root account

sudo su root

Create repo warehouse directory

mkdir /www/repo

Grant permissions

	
chown -R git:git /www/repo
chmod -R 755 /www/repo

Create website root directory hexo

mkdir /www/hexo

Grant permissions

chown -R git:git /www/hexo
chmod -R 755 /www/hexo

Create a new blank git repository and initialize it

cd /www/repo
git init --bare hexo.git

10. Create Git hooks for automatic deployment

vim /www/repo/hexo.git/hooks/post-receive

Same as above, enter edit mode, paste the following code and save and exit

#!/bin/bash
git --work-tree=/www/hexo --git-dir=/www/repo/hexo.git checkout -f

Modify permissions

chown -R git:git /www/repo/hexo.git/hooks/post-receive
chmod +x /www/repo/hexo.git/hooks/post-receive

Warehouse established

Install nginx

Nginx is a lightweight web server/reverse proxy server and email (IMAP/POP3) proxy server, released under the BSD-like protocol. Its characteristics are that it occupies less memory and has strong concurrency capabilities. In fact, nginx’s concurrency capabilities perform better among web servers of the same type.
Nginx (engine x) is a high-performance HTTP and reverse proxy web server, and also provides IMAP /POP3/SMTP service, which releases source code under a BSD-like license, is known for its stability, rich feature set, simple configuration files, and low system resource consumption.

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

Enter y halfway to continue the installation (same as above) and wait for the installation to complete. The login URL and initial password will be displayed. Pay attention to the

position of the red box. If both URLs are inaccessible, please open port 8888 in the server security group/firewall and

enter the initial account. Log in with your name and password.

After entering, search for Nginx and click to install (I have already installed it here)

Website->Add site, the domain name is xxx.com without any prefix

. Settings->Configuration file, modify the content in the red box

Settings->Website directory, modify for/www/hexoAnd save

the server terminal and restart the service

service bt restart

At this point, the server-side configuration is completed

Hexo configuration modification

Enter the local blog root directory and modify the deployment location of the _config.yml file

GitHub Pages settings

server settings

source code is as follows

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: 
  type: git
  repo: git@你的域名:/www/repo/hexo.git
  branch: master # 注意此处分支设定,需在仓库中选择默认的分支

Open the Putty tool, connect to the server and grant permissions

chown -R git:git /www/repo/
chown -R git:git /www/hexo/

Open git bash here in the local root directory and execute the command

hexo clean //清除缓存
hexo d -g //快速部署

The icon content appears indicating that the deployment is successful. After the registration is completed, you can access it through the domain name.

Filing

Jason's website has only been registered recently, so if you can't wait, just find another way. In China, we don't dare to make mistakes. You will go through
the following stages

after purchasing the server and binding the domain name to the system. You will be prompted that there is no registration, just follow the prompts to complete it.

ICP

Full English name: Internet Content Provider, full Chinese name: Internet Content Provider
ICP can be understood as a telecommunications operator that provides Internet information services and value-added services to users. It is a formal operating enterprise or department approved by the national competent authority.

Online filing

Enter the official website . After Alibaba Cloud completes the ICP registration, the system will also prompt you to operate.

After the deployment is completed, select Online Registration to

log in. Submit the website owner information and some basic materials for review and approval. Finally, insert the code at the bottom of the web page. The effect is as shown in the figure.

---

At this point, your personal website is successfully online and deployed to the server. The content will be continuously updated based on your feedback! ! !

Finally, put the address of Jason’s little website, welcome to visit haha ​​>>> Jason’s little website

---

References

How to build a website for a technical novice

Picgo+Gitee builds a personal free picture bed