Why blog, how to use GithubPages+hexo to build a personal blog site

introduction

We often read blogs, many people write blogs, and many people build their own blog sites, so why do we blog? Why build a personal blog? How to build a personal blog?

To do a thing we need to know its meaning, otherwise you won't get anything from it. So, we need to figure out why we want to write a blog first, and then why we want to build a personal blog. Next, I will expand my content from these aspects.

1. Why write a blog?

1.1, good memory is not as good as bad pen

Blogging is to write down an event or a question, whether you write it in your own cloud notes or a certain blogging platform. In short, when you forget, you can find it and see what you wrote before s things.

In many cases, we may think that the answers to some questions or the thinking process that we have memorized are actually found out after a while, but there are traces to memorize them, and we can save a lot when we encounter the same problem in the future. time.

1.2 Teaching is the best learning

The process of writing a blog is a process of clearly explaining a problem, a matter, and a point of knowledge. Whether this blog is well written and whether it makes sense depends on whether the problem is clearly stated and whether to let it be read The people of your blog will understand after reading it.

If you can't explain one thing clearly, you have not mastered it in all likelihood. When we describe a problem, we must first know what concepts and knowledge points my readers need to know if we want to explain the problem clearly, and then we need to search for these knowledge points in our knowledge system, and only fully understand one. Only the person with the problem can make it clear.
Improve yourself in the discussion . After the things we write are posted on the Internet, we can often see some opposing remarks or different solutions or bugs, and these things can let us see what we have left in the process of thinking about this problem. , So as to continue to improve.

1.3, create value

Keep on writing a blog and record some of your thought process and research results. This will be a valuable blog and will undoubtedly add points to your resume.
You can invest in advertising in your blog and get profit.

2. Why build a personal blog

With so many blogging platforms nowadays, why build a personal blog? Although it takes some time for a personal site, there are still many benefits.

  • More freedom, my site listens to me (style, content, advertising)
  • Don’t worry about the content being changed or the blog deleted, all rights are in your hands
  • It can prevent the company from shifting its focus and no longer pay attention to or promote the blog.
  • Become your own business card and build your own brand

3. How to build a personal blog

3.1. Preparation

To build a blog site, you first need storage space to store your content, second , you need a domain name that can be linked to the site, and third, you need a bunch of static web pages and style files . This is what your site displays. However, not everyone can build a server, not everyone can write css and html on the front end, so we can use some existing tools or frameworks to help us build it.

3.1.1、 GithubPages

Websites for you and your projects.Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

This is the introduction of the official website. It is not difficult to understand. The translation is: a webpage that belongs to you and your project. You can build a website directly from the Github repository, and the web page will dynamically change with your editing and publishing.

Features of GithubPages:

  • Static blog, strong configuration
  • Lightweight blog system, simple configuration, no need to build a server by yourself
  • Each site has 300M free space
  • You can bind your own domain name.

3.1.2 、 hex

Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.

Hexo is a fast, simple and powerful blog framework based on Node.js. You can use markdown or other languages ​​to write content, hexo will use some good-looking themes to quickly generate corresponding static pages.

Features of hexo:

  • Wind speed: Hexo is based on Node.js, supports multiple processes, and hundreds of articles can be generated in seconds.
  • Smooth writing: Support GitHub Flavored Markdown and all Octopress plugins.
  • Strong scalability: Hexo supports EJS, Swig and Stylus. Support Haml, Jade and Less through plugins.

Therefore, hexo is a framework that helps those of us who do not understand the front-end to build static web pages .

3.2. Start to build the site

3.2.1、 New Github warehouse

Needless to say, github registration and login are the same as major websites.
Create a new warehouse, pay attention to the fixed format of the warehouse name, xxx.github.io, where xxx is the name filled in when github registered. Follow the prompts to complete it step by step.
Write picture description here

3.2.2, configuration environment

First, you need to install Git to upload and download code and files.
Hexo is based on Node.js , so Node.js also needs to be installed. Both are to find the version corresponding to your computer on the official website to download and install, the environment variables do not need to be configured, and they are already configured during the installation process.

Finally, we need to install hexo . Right-click anywhere and select gitBash to enter the git command line

Write picture description here

Enter the command: npm install hexo-cli -g After the
installation is complete, enter the command: npm install hexo –save and
finally enter the -v command to view the version information to verify whether the installation is successful:

Write picture description here

3.2.3, initialize hexo

After installing and configuring these environments, you can use hexo to start managing our blog. First of all, we need to specify a folder (it is better to create a new folder, do not have a Chinese path) to store some configuration and content of hexo. Then enter the git command line in this directory and enter the hexo init command to start initializing hexo.

The init command may take a long time, please be patient.

ok, things are finally doing a good job, this time, we can see the effect on the local, the same open git command line, type the command:
HEXO G : generated content
HEXO S : Turn on the machine server
in the browser address bar enter: localhost: 4000, you will see the default site style!

Write picture description here

3.2.4, upload to github

I saw the effect of the site locally, but what I want is that everyone can see it, not only in the local area network. Don't worry, it will be ok when we post it to github.
First configure the site file (the _config.yml file in the hexo home directory you just created), and set the deploy option to your github information.

Write picture description here

After configuration, save, and then enter the command in the command line:
hexo g
hexo d : publish and upload to github

This process is to upload the code to github via git, so a pop-up window will ask you to enter the username and password of github, and the input is ok. If you don't want to be so troublesome every time, you can set up SSH, which is a digression.
After the upload is successful, the browser enters: xxx.github.io , you can see that your blog site has default content! Almost succeeding!

3.2.5, set theme

After the build is successful, it is our configuration. If you don’t like the default theme of hexo, you can download the theme you like and put it in the themes folder under the hexo root directory (there will be a default landscape), and then edit the site Configuration file, replace the theme with the theme you just downloaded.

You can go to the hexo wiki to view some of the available themes:
https://hexo.io/themes/

Write picture description here

3.2.6, blog configuration

First of all, we need to know two configuration files, one is _config.yml in the hexo root directory, we call it the site configuration file, and the other is the _config.yml file in a theme under the themes folder, we call it It is the theme configuration file. Modify the title, avatar, theme, language, github address and other settings of your blog site in the site configuration file. Modify the content style, menu bar, page classification and other settings displayed on the site in the theme configuration file .
Take the most used next theme as an example. The detailed configuration can be viewed on the official website:
Getting started-NexT documentation

The operations of blogging and adding pages can be found in the document, which is relatively simple.

The necessary comment sharing function of the blog , the next theme is also prepared for us, just register on the corresponding website and fill in the key value to ok.

In addition, if you want to know the access status of the site , you can add statistics such as Baidu statistics , Tencent statistics , Google analysis, etc., register the domain name on the corresponding website and configure the id or key into the theme configuration file.

3.2.7, domain name binding

This is an optional operation, if you want to use your own domain name to visit the site, of course, some configuration is required.

The first is to buy a domain name, which can be purchased on Alibaba Cloud or Godaddy (supporting Alipay payment). Just choose a domain name that you like and has not been registered, and it is not too expensive.

Set the domain name resolution, you can use the domestic DNSPod to resolve the domain name, the speed is relatively fast, please see the official website introduction for specific settings.

Finally, it is set in the github warehouse. Create a new CNAME file in the root directory of our newly built warehouse. No suffix is ​​required. The content is the domain name you applied for.

Write picture description here

3.3. Start the blog journey

At this point, the configuration of the blog is all OK, open the browser, enter the domain name you applied for, such as http://lizebin.info , and you can start your personal blog journey~

Finally, thank you all for your patience, and welcome everyone to visit my personal blog site:
Moore’s Android Road

Write picture description here

Thanks again!
Please indicate the source

Guess you like

Origin blog.csdn.net/lizebin_bin/article/details/54318314