Site example: Personal blog with Lee

Build GithubPages

1. Create a repository on GitHub called yourname.github

If my GitHub account name is hanguilin, then I need to create a repository named hanguilin.github

2. Go to the warehouse and enter Settings

Find a lot Pages

The first part is your home page address, which should be initialized to yourname.github. IO.

The second part represents the root directory/associated with the GH-Pages branch.

The third part is to choose GitHub’s own theme.

The fourth part is associating custom domain names. Your custom domain name needs to be resolved to yourname.github. IO. For example, aliyun needs to enter the domain name console for domain name resolution. Select CNAME to resolve the customized domain name to yourname.github. IO domain name.

The fifth part is using HTTPS, which will automatically add HTTPS support to your domain name.

Here we go to choose a theme:

After the selection, follow the prompts to submit the initialization code.

Visit yourname.github. IO, and you’ll see your initial home page.

2. Use Hexo templates

After setting up the personal home page, I found that the page was very simple and could not support more functions of my own. So we can beautify our pages with other techniques, such as Hexo.

hexo

Hexo official website: Hexo

Hexo is a Nodejs-based static blog site generator that can be deployed to GitHub Pages, Heroku or other platforms with a single command.

Since Hexo is based on NodeJS, it is necessary to install the Node environment before using Hexo. The installation process can be searched by browser and there are many related tutorials online.

Initialize a Hexo project:

#Install hexo scaffolding
npm install hexo-cli -g
#Create a blog project
hexo init blog
#Go to the blog folder
cd blog
#Download the library package
npm install
#Run locally, default port 4000
hexo server
Copy the code

Replace the hexo project default template

If the hexo project’s default landscape doesn’t suit your aesthetic, you can replace it with a theme from the Hexo Theme library.

Hexo theme library: hexo. IO /themes/

Put the downloaded theme library into the blog/themes directory, then open the _config.yml configuration file under the blog directory and change the theme parameter to the name of your new theme in the blog/themes directory.

Set up the Github repository

Open the _config.yml configuration file in the blog directory and change the deploy parameter in it

Type: git indicates that code is managed with Git

Repo represents the repository path

Branch Indicates the push branch

Hexo common command

  • hexo clean

    Clear the Public folder

  • hexo g

    Generate the corresponding HTML from the MD file

  • hexo s

    Run locally

  • hexo d

    Publish to Github Pages

Localize the Markdown editor

Typora+PicGo+GitHub is recommended. For details, see the blog MarkDown.