Don't spend money, spend an hour to build your own blog website

Click to follow brother Qiang , See more wonderful articles

I don't know if you usually have the habit of blogging , What do you usually record when you write a blog ？ Where do you write your own blog ？

Brother Qiang usually has the habit of blogging , However, I didn't force myself to write an article as often as possible , Generally, I will write a blog to share when I encounter problems at work and solve them .

Before and after , stay CSDN It's also written on the 217 The blog , original 87 piece . The latest total ranking has reached 3823 name .

ha-ha , Although I have no special way to organize my blog , There is no series of summary articles , But I'm very happy to help you through the usual summary and sharing .

But then again , Brother Qiang also felt recently , Always write articles on the blog platform , There has never been a blog website belonging to itself , It's always a little low-end and classy . therefore , The other day , It took a little time , use Hexo stay Gitee I set up my own blog website ：Hexo. After choosing your favorite theme and building it , It's like this ：

ha-ha , I don't know what people think , But this theme is really my favorite style ： Simple and straightforward , No fancy , The most important thing is to be clear at a glance .

Don't talk much , If you are also moved by the blog website above , Just do it . The point is not to spend a dime , Follow the tutorial , It can be built in about an hour . Although it took more than an hour to build it at the beginning , But after all the detours . Now I want to build a similar website , Follow the tutorial below , One hour will be enough .

My friends have no brain to follow the tutorial , After successful construction , Naturally, many things will be understood .

One 、 Local environment construction

1.1、 install git:

Install according to the following address ：Git Installation configuration | Novice tutorial

1.2、 install node：

(Node.js Version should be no less than 10.13, It is recommended to use Node.js 12.0 And above ) Install according to the following address ：Node.js Installation configuration | Novice tutorial

1.3、 install hexo：

The previous step is completed node after , Open the terminal directly , Enter the command ：

npm install -g hexo-cli

1.4、 establish gitee account number

A lot of people gitee Maybe I don't know what it is ,gitee Ma Yun , Oh no , Code cloud . That is, domestic “github”. Log in to the website and create it by yourself ：Gitee - be based on Git Code hosting and R & D collaboration platform

1.5、 After setting up the account , To configure gitee Of ssh Public key （ Optional ）：

This step is not necessary , Use http Clones are negligible . However, it is strongly recommended to configure , It will be much easier to submit code later . Configuration tutorial ： Generate / add to SSH Public key - Gitee.com

Two 、 build Hexo Blog

2.1、 initialization Hexo Blog

Just create an empty directory , Enter the following command , And install the front-end dependency package

cd <folder> // Go to the empty directory 
hexo init     // initialization 
npm install    // Install dependency packages 

After operation , The directory structure is as follows ：

2.2、 Local commissioning Hexo service

Enter the following command to run the most primitive Hexo service

hexo s    // On the left is hexo server Simplified commands 

After input, the terminal displays as follows ：

Browser access http://localhost:4000/ as follows

2.3、 Choose the theme

ha-ha , This can be said to be the most time-consuming , Why? , because hexo There are too many good-looking themes supported . Subject address ：Themes | Hexo Qiangge blog website uses pure, Corresponding subject address ：https://github.com/cofess/hexo-theme-pure Use the tutorial for the corresponding topic ：Hexo Blog theme pure Instructions | Cofess - Web Developer & Designer

After configuring the theme , Run locally again . If all goes well , Restart hexo After service , Should be able to http://localhost:4000/ See the new theme blog website .

3、 ... and 、 establish Gitee Warehouse

First of all, many people will ask why they don't go github To build , But in Gitee On . There are two reasons ： 1、Github After all, the website is an overseas website , Visit the comparison card 2、Gitee Support directly on Hexo Compile and update the source code , and Github For the time being, it only supports Jekyll Compile and update .Jekyll Is similar to Hexo Another static website generation tool .

3.1、 Create repository

Pay attention here , If you want to create a homepage access address without a secondary directory pages, Such as ipvb.gitee.io, instead of ipvb.gitee.io/blog , that , You need to build a warehouse with the same name as your personal address , Such as Jiang 23 (ipvb) - Gitee.com This user , Want to create your own site , But I don't want to access... As a subdirectory , Want to ipvb.gitee.io Direct access , Then he can create a name ipvb The warehouse of ipvb: gitee pages After deployment , You can to Charlie's Rethinking Visited .

Sign in gitee after , Click the upper right corner to create a warehouse

3.2、 Clone warehouse to local

Copy the warehouse address in the following location

Select an appropriate empty directory for blog storage in the local terminal , Enter the following command to clone the warehouse ：

git clone [email protected]:xxx/demo.git  // Modify the address corresponding to your warehouse 

After cloning , Enter local warehouse directory . Http If you clone in this way, change the above address to Http Just clone the warehouse address of .

3.3、 add to gitignore file

In the local warehouse Directory , New file ：.gitignore, The contents are as follows ：

/node_modules
/public
/.deploy_git

3.3、 Copy the blog code to the current directory

Directly create the blog code in the second step ( Don't use the outermost folder , As long as with _config.yml All files or folders at the same level ) Copy to the current warehouse directory . Then in the current folder , Restart hexo server See if you can browse again （ Brother Qiang tried , It should be able to display normally ）

3.4、git Submission code

Directly enter the following command to synchronize the code to the warehouse

git add .    // Add all code strips under the folder git
git commit -m "xxx"    // Submit the code and add the message xxx（ The message content can be modified by itself ）
git push -u origin master    // Push the source code to gitee On remote warehouse 

Four 、 Online service deployment

4.1、 Check whether the code is successfully pushed

Refresh directly gitee Go to the warehouse , See if the code is successfully submitted

4.2、 Opening gitee pages service

First click on services ,gitee pages service ：

Click in for the first time , You need to submit your ID card information for authentication ： Certification requirements 1 Review within working days , One working day after certification , The page is like this ：

4.3、 Start the service

One thing to note here is ：gitee Upper hexo Source code , You can update it directly into a static website , It doesn't need to be like many tutorials , It should also be carried out locally hexo g -d The operation of , Push the compiled code to gitee On the warehouse .

Directly click the start button （ The second time it will become an update button ）,gitee It will automatically compile and deploy the service online （ Automatically npm install,hexo deploy). After starting , The page is as follows ：

Directly click the link to see that our website has been successfully deployed on the public network .

4.4、 Modify the configuration

ha-ha , If you worked on the topic before ,url If the configuration of is not modified , That page might look like this

This is the time , Just modify the blog source code _config.yml Of url The parameter is your new domain name ： And then in gitee pages page , After you click Update , The website will display normally .

5、 ... and 、 Blogging

newly build Markdown file

Directly create a new one locally Markdown The file of , And write our own blog content .

Add tags and other information to blog files

At the top of the blog file , Add the following information ：

title: Happy new year, everyone ~ date: 2022-01-31 22:54:00 categories:

• life tags:
• Life records toc: true # Whether to enable content indexing The effect is as follows ：

  

  Then put the new blog file into source/_posts Under the table of contents , Finally upload to gitee On the warehouse , to update gitee pages The service can be .

Picture address about blog

Because blog is Markdown Written documents , So if we paste the image address directly locally , The address will be the local host , So wait gitee After updating the service on the warehouse , It will make the picture unable to be displayed . therefore , There are two solutions ：

• We put the image files corresponding to the blog into a fixed source directory , And then in Markdown Use a relative address on the file to reference it .
• We send the pictures to the public drawing bed （ The picture bed is the server that installs the pictures of the door side provided by other companies , Such as ： Seven cattle picture bed 、 Microblog drawing bed, etc ）. then Markdown Files directly use links to reference pictures .

At the end

All right. , Through the above tutorial , Everyone follow , You should soon have your own blog website .

Brother Qiang still strongly suggests that you go and do something , After setting up your own website for the first time, you should still have a sense of achievement . Of course if there's a problem , You can also leave a message under this tweet or in the background , Brother Qiang will reply in time when he sees it .

Click to follow brother Qiang , See more wonderful articles

Follow official account for more content , You can also ask questions on official account ：

Brother Qiang nags and forces him to nag

Talk about programming 、 Internet insights and news