Simple and elegant construction of personal blog

Time:2019-11-3

file

Preface

Ah ah ~ ~, after nearly two days of continuous exploration and optimization, personal blog is preliminarily completed, and now I see the effect is very good. This article is about how to build such a blog. As early as 17 years ago, I used hexo and GitHub to build a personal blog, but at that time, it was too young and not maintained, and then it was abandoned. 18 years later, another one was built. It’s better than it was in 17 years, but it doesn’t have a lot of traffic. It may not have SEO optimization, and it hasn’t been maintained for a long time. Looking up a few days ago, the interface display is still normal, but the content is too naive. So a year later, Hu Hansan came back. Painfully determined to build the whole blog, including interface rendering, RSS, comment system, website search, SEO optimization and so on. Now let’s start.
Blog portal:
coding:http://quellanan.coding.me/

github:https://quellanan.github.io/

Final effect

Let’s take a look at the effect first, which may be more attractive to you and more motivated to build a bolg of your own.
file

The main page is like this, including the home page, label, classification, archive, about, interaction, search, and the home page on the right.
Favorite tag this page, you can see the whole site to which kind of articles write more.

file

You can also find the corresponding article through the tag. There is also the website statistics of the footer, the statistics of the number of page visitors and the number of visitors. The number of words that have been posted throughout the site. These are the most concerned of self built bloggers. I’m also most concerned about this part of haha. After all, when the number of visitors and the number of visitors go up, there’s a driving force for continuous updating.
file
The reward function, the copyright announcement, and the article catalog on the side are also excellent.

file
Comment function, this comment is also very powerful, increased the communication between bloggers and readers. Similar to comments, there is another one, which is similar to wechat icon in the bottom right corner of the website. It can also communicate with bloggers directly, not bad. These are just some functions of the website. Let’s not talk about others. Let’s start

Environmental preparation

  1. Install git:
    Https://git-scm.com/book/zh/v2/getting started install Git
    After installing git, configure the user name and mailbox to be consistent with GitHub
#Global configuration user name
git config --global user.name "nameVal"
#Global configuration mailbox
git config --global user.email "[email protected]"
  1. Install node.js: https://nodejs.org/en/
    Both Linux and windows are very easy to install. Search for keywords on the Internet and have official tutorials.

  2. Sign up for GitHub login account: https://github.com/
    Create the same project as the user name
    file
  3. Register coding login account: https://coding.net/login
    Also, create a project with the same name. Here’s why we need to use coding. In fact, it’s not necessary. Coding and GitHub are both used as pages and domain names. The difference is that GitHub is foreign, while coding is domestic. The blog built by GitHub is not easy to be retrieved by Baidu, while coding can. You can choose according to your personal preference. Here I use both of them. Anyway, I have one more configuration.

    Configure secret key

$ cd ~
$ ssh-keygen -t rsa -C "[email protected]uremail.com"

Just configure the generated secret key to GitHub and coding

Install hexo

With GIT and node installed, it’s easy to install hexo

npm install hexo-cli -g

Then we create a blog folder to store our blog

cd blog
hexo init
npm install

In this way, the basic framework has been set up. You can start to see the effect

Hexo clean // clear cache
Hexo g // compilation
Hexo s // run locally
Hexo D // upload to GitHub or coding

Topic selection

After setting up the framework, of course, now I’m looking for a theme that I like. I like next personally, and then I found a theme on the Internet. The function configuration is basically available. I came here by referring to the configuration of this big guy.

Configuration: https://github.com/ipyker/hexo-next-theme

Download the theme of this big guy and put it in our own theme.
Common modification can be done according to the modification prompted by the big guy.

Save source code

Well, the theme and framework are all available. Then it’s better to blog and publish. In fact, I came here two years ago, so I didn’t talk about it in detail. But there are some basic people should be able to do, if not, through the keyword search I mentioned can also find a detailed tutorial online. Why do you need to rebuild this time? Because the source code has not been saved before, only the pages code is saved on GitHub. The source code is not saved, so if the source code is lost, it must be rebuilt. So this time I learned to be smart and know how to save the source code. No matter whether it’s a computer or something, I’m not afraid to make a number backup.
I’m going to talk about source code saving on GitHub. We create a branch save on GitHub project project to save source code. The master branch is used to display pages.
file
Set the created save branch as the default branch.

Then in the local clone project. Entry project

git add .
git commit -m "your description"
git push origin save

Our ﹤ config.yml configuration is submitted to the master branch
deploy: type: git repository: github: [email protected]:QuellanAn/QuellanAn.github.io.git coding: [email protected]:quellanan/QuellanAn.git branch: master

From now on, the operation is simple. If you want to compile and publish
hexo clean hexo g hexo d
Save to GitHub

git pull 
git add .
git status
git commint -m "description"
git push origin save

Source address of my blog: https://github.com/quellanan/quellanan.github.io
These are all configured by me. You can directly clone down, enter the blog folder, and then run and modify. So what I said earlier is relatively simple.
file

SEO

Now that our blog has been built, if we want to add a new blog, it’s better to add it under the source / Posts directory.

file

But now we are faced with a problem is that our blog does not have access to how to do, not through Google search and Baidu search, but directly through the input of accurate website to visit, which is certainly not conducive to our increase of blog views. So we need to add our website to Baidu and Google search.

Google: https://search.google.com/search-console
file
Put the downloaded HTML in the public folder.
file
file
Then?

hexo g
hexo d

Post to our website. Then the verification can be passed.
file
After this verification, we will submit the site map. I have configured the site map. If you use my template, you can submit the site map directly
file
file

Google will be able to search your blog in a while.

file

Baidu submission site: https://ziyuan.baidu.com/site/index
file
Add a website. The verification method is the same as Google. Just use HTML file to verify
After verification, click robots to detect and update.
file
My template has been configured. It can be detected directly.
file

Although I have done this, it seems that Baidu has not searched and recorded, and I have to wait another two days to see.
file

Off the coast

OK, so far, this is where personal blog is built. If you want to build your own blog, you can do the preparatory work mentioned in the article, then download my source code to use, and modify the information into your own. If you don’t understand anything, you can add me wechat communication in time. Because the original of my blog is in my template, please delete it or mark it as reprint. Thank you

Maybe the content is not detailed enough, there are no details, not very friendly to Xiaobai, but considering that there are many detailed tutorials on the Internet, I’ll tell you what I think is important here, hoping to help you.

Follow up

Welcome everyone to pay attention to the personal public number “programmers love yogurt”.

Share all kinds of learning materials, including Java, Linux, big data, etc. The materials include video documents and source code, and share the high-quality technical blog articles delivered by myself and others.

If you like, remember to pay attention and share
file

Recommended Today

The use of progressbarcontrol, a progress bar control of devexpress – Taking ZedGraph as an example to add curve progress

scene WinForm control – devexpress18 download installation registration and use in vs: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100061243 When using ZedGraph to add curves, the number of curves is slower if there are many cases. So in the process of adding curve, the progress needs to be displayed, and the effect is as follows     Note: Blog home page:https://blog.csdn.net/badao_liumang_qizhi […]