I have heard for a long time that GIthub can be used to build a blog of my own, but I have not started it yet. Now I finally have the opportunity to try it. I have checked some information and finally made it, so I will record it here, hoping to help people in need. Let’s put up my blog address: GItHub blog address. It feels good.

First, the premise of building a blog

  1. Have your own GitHub account. If you don’t have one, create one yourself

  2. If you have installed Git, you can go to Baidu to find out how to install Git. If you have not used Git before, you can also use it.

  3. I can use Markdown, which is mainly used for blogging, but I can’t search for relevant tutorials.

Note: For Git and Github tutorials, I highly recommend stormZhang’s blog tutorials and link to them hereStormzhang blogs Git and GitHub tutorialsThe content is easy to understand and very suitable for us to learn.

Second, the principle of using GitHub to build blog

GitHub provides a service called GitHub Pages, which allows users to host static web Pages and assign a domain name to them. This saves us the trouble of buying maintenance servers and databases. This tutorial focuses on building our own blog using Hexo, an efficient blogging framework that can quickly render Markdown text into HTML pages.

Install NodeJS

Since Hexo is a nodeJs-based blog framework, we must install the NodeJs environment before we can use Hexo to build our blog. NodeJS download address, you can choose the appropriate version according to your computer, easy to install, between the next step can be installed.

Install the Hexo blog framework

This installation uses NodeJS package management tool NPM to install. Right-click and select Git Bash Here to open the Git command line and run the following command:

npm install hexo-cli -g
npm install hexo --save
If the command does not run, try replacing the NPM source
npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

Initialize the Hexo configuration

Create a Hexo folder under the “Blog” folder. Go to the “Hexo” folder, right-click the “Git” command line, and run the following command:

hexo init
npm install
Copy the code

This will generate folders in the current directory, which are the files we need for our blog.

Install the Hexo plugin

In order for our blog to be rendered locally to generate HTML pages and then deployed to GitHub, we need to install the following plug-in, right click on the Git command line and execute the following command:

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install [email protected] --save
npm install [email protected] --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save
Copy the code

Git is now available to view your blog locally. If you are excited, go to the Git command line and run the following command:

Generate static pages
hexo g
Start the local Node server
hexo s
Copy the code

Then type localhost:4000 into the address bar and press Enter to see our blog.

Deploy your blog to GitHub

  1. We first logged on to our GitHub account

  2. Create a new repository on GitHub. The repository name must be

    .github

  3. Add your SSH secret key to your GitHub account, so that you can upload your blog code to GitHub through Git. (This step is also explained on StormZhang’s blog, which we recommend above, and will not be described here.)

  4. Get the HTTPS address of the blog repository we created in step 2. Note that this is an HTTPS address, not a git address, and copy that address

  5. To modify the blog configuration file, go to the directory where the blog is located, find the _config.yml file, open it, find the following code and modify it as follows:

deploy:
  type: git
  repo: < HTTPS address of your blog repository >
  branch: master
Copy the code

Note: there is a space between the repO and your blog address above

  1. Right click on the Git command line in your blog directory and type the following command:
hexo g -d
Copy the code

You may be asked to enter your Github account password during the command execution. After executing the command, enter https://< your github username >.github. IO in the browser to see the online deployment effect

Change the theme of your blog

By default, the Hexo blog framework provides a set of themes. If you don’t like the theme, you can download it from the Hexo theme website and change it. You can also write your own theme.

  1. Open up Hexo’s theme site Hexo theme site

  2. Choose your favorite theme, click the GitHub address that will jump to the theme, and then copy the HTTPS address of the theme. Then you can open the themes folder in the directory where your blog is located, right click on the Git command line and run the following command:

git clone< HTTPS address for the topic >Copy the code

3. Modify the configuration file, open the _config.yml file in the root directory of your blog, find the theme:, add a space and write the name of the theme after it, as follows:

theme: yelee
Copy the code
  1. To check the effect, right-click the root directory of your blog and run the following command:
hexo g
hexo s
Copy the code

Then type localhost:4000 in your browser to see the effect

  1. To deploy the new theme on GitHub, run the following command:
Clear the server cache first
hexo clean
hexo g -d
Copy the code

In fact, the attention of the blog can also be customized to configure a lot of content, which needs to be modified according to the specific theme of the accompanying instructions, which will not be described here.

Publish your own articles

  1. To create an MD file, run the following command in the root directory of your blog:
hexo n "Article Title"
Copy the code

  1. To write a blog, open the md file you created in your blog root directory /source/_posts and write a Markdown post in it

  2. Post to GitHub, right click on the root directory of your blog, open the Git command line, and run the following command:

hexo g -d
Copy the code

10. Give your blog your own domain name

GitHub allows us to access our blogs by default at https://< GitHub username >.github

  1. Apply for their own domain name, we can go to the nets, tencent cloud, western digital, and so on many websites to apply for a domain name that oneself like, seems all domain names are now need to put on record to normal access, this site offers free registration service, slightly cumbersome process, step by step, but usually website will teach you how to put the domain name for the record, go here.

  2. If the domain name is applied from other websites, then we must change the DNS server to the following:

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net
Copy the code

  1. Go to DNSPOD website, DNSPOD website, register an account, and add your domain name to it

  2. To get the IP address of your blog, open the command line, type ping < your github account >.github. IO, and then you can see the IP address of your blog, copy it

  3. Add domain name resolution, go to DNSPOD website, find the newly added domain name, click Add resolution, and then add two resolutions respectively, their host records are @ and WWW, record values are our previous step obtained IP, paste in to add success.

  4. Create a file named CNAME in your blog root /source directory and write your domain name in it, such as mine:

www.codekong.cn
Copy the code

Then switch to the blog root directory, right-click the Git command line and execute the commit command:

hexo g -d
Copy the code
  1. Wait up to 72 hours before we can access our blog via our own domain.

conclusion

The above is some of the records I set up my blog, hoping to help people in need.