Spent a day and a half of time, finally put my personal blog to build completed, I write down the process of building a blog, in fact, very simple 🙃

Blog Technology (Hexo + Next + GitHubPages)

At the end of the article I will post a link to the article I used to build my blog based on Hexo + Next + GitHubPages.

If you want to build great blogs using these techniques, you need to know Hexo, Next, and GitHubPages, which are explained below.

What is a Hexo

Hexo is a fast, concise, and efficient blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles and generate static web pages with beautiful themes in seconds. — Hexo

What is the Next

NexT is a Theme for Hexo with a rich and simple configuration that, combined with third-party services, allows you to create your own blog. — Next

What is a GitHubPages

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository. — GitHubPages

GitHub pages are a static site-hosting service designed to host your personal, organizational, or project pages directly from the GitHub repository.

So, Hexo, Next, and GitHubPages can work together to create beautiful personal blogs for free 😆

How to build a blog based on Hexo

Build a blog based on Hexo, you can build a personal blog in a few simple steps.

The preparatory work

Download and installnodejs

Node comes with the NPM package management tool. It is recommended to install YARN to manage dependencies (because hexo seems to use YARN to manage dependencies, otherwise dependency problems can occur).

Mac users can install on BREW, Windows users can install on CMder or go to the official website to install the package.

    brew install node
Copy the code

Then install YARN using NPM

    npm install yarn
Copy the code
The installationgit

Mac users can install Git using the newly installed YARN package management tool. Windows users can install git using cmder or go to the official website.

    yarn add git -g
Copy the code
The installationhexo

Go into your project directory, like mine is MyBlog,

    cd myblog
Copy the code

Then install hexo with YARN.

    yarn add hexo -S
Copy the code

At this point, the environment is ready to set up the Hexo blog 😜

Setting up a Local blog

Go to your project directory

For example: Mine is myblog.

    cd myblog
Copy the code
Project initialization

After project initialization, the blog template will be automatically generated. In the future, you only need to use Markdown syntax to write the corresponding.md file ✍️.

    hexo init
Copy the code
Install all dependencies

You are advised to use YARN. Otherwise, dependency problems may occur (described later in this article).

    yarn install
Copy the code
Finally, start the local service

To preview the blog, type localhost:4000 in your browser

    hexo server
Copy the code

As shown in figure: 🌁

Hexo’s original look 😂

Associated with making

With GitHub’s Pages feature, we can host our blogs on GitHub without having to buy a cloud server, 😋, and easily build free blogs.

Create a GitHub account

I believe that 🤔 everyone should have a GitHub account, if not can go to GitHub official website according to the steps to create an account.

Configure GitHub association

  • There are theGitHubAfter the account, log inGitHubCreate a project with the same name as your local project, for example:myblog

{% note Danger %} after the project is built, must enable GitHub Pages function ⚠️

  • Click on the figureSettingsOpen,GitHub Pagesfunction
GitHubPages Settings

  • choosemaster branchAnd thenSave
GitHubPages Source

  • Copy your project link as shown
GitHubPages URL

  • Then find it in your local project root directory_config.ymlPaste the file in the following location
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/persilee/MyBlog.git
  branch: master
Copy the code

Complete the associated

After completing the above steps, you can push your local project to GitHub hosting, which only leaves 3 steps: 😋

  1. The installationhexo-deployer-gitPlug-in (file generation and push function can be completed through simple commands)
    yarn add hexo-deployer-git -S
Copy the code
  1. runhexo g(Generate local file)
    hexo g
Copy the code
  1. runhexo d(Push local files toGitHub, andgit pushSame function)
    hexo d
Copy the code

At this point, GitHub should have generated an access connection for you in the following format: Your account name +.github. IO + \ project name, you can also go to the GitHubPages Settings page to see for example mine: HTTPS :\ persile.github

At this point, you can send the link to your friends, and they can all access your blog 🙃.

Dnote %} dnote %} dnote %} dnote %} dnote %} dnote %} dnote %}

ERROR Plugin load failed: hexo-renderer-marked
Error: EISDIR: illegal operation on a directory, read
ERROR Plugin load failed: hexo-server
Error: EISDIR: illegal operation on a directory, read
ERROR Plugin load failed: hexo-renderer-stylus
Error: EISDIR: illegal operation on a directory, read
Copy the code

To solve the problem, remove and reinstall yarn, as follows

## Remove YARNremove hexo-renderer-marked

yarn remove hexo-renderer-stylus

yarn removeHexo-server ## Install YARN againadd hexo-renderer-marked -S 

yarn add hexo-renderer-stylus -S

yarn add hexo-server -S
Copy the code

In executing hexo G, successfully execute 👌

Binding domain

We already have access to blogs from the address GitHub has given me, but that’s not enough for us fidgety programmers 👨💻 to get our own domain name 😂.

So…

Start binding your own domain name lishaoy.net

However, after we bind the domain name, we only support HTTP protocol, so when we visit Google Browser, there will be an insecure standard, and it will be easy to insert ads, so… Toss about go 🌝 : make an HTTPS

To get down to business, after some twists and turns, a third-party service called Netlify is used to provide free SSL/TLS certificates.

Of course, HERE I provide two ways to bind the domain name, one is HTTP (insecure Internet protocol) and the other is HTTPS (secure Internet protocol, there is a small lock in Google Browser, as shown in the picture).

Google HTTPS status identifier

HTTPBinding domain

Set domain name resolution rules

First, we need to go to the operator and add domain name resolution rules, as shown in the figure

Domain name Resolution Rules

newCNAMEfile

After configuring the domain name resolution rules, you also need to add a CNAME file in the.\source\ path of your project. Type in your domain name, for example: lishaoy.net

Rebuild the generated file and push it to GitHub

Rebuild the file and run hexo G

    hexo g
Copy the code

Push a lot

    hexo d
Copy the code

HTTPSBinding domain

registeredNetlifyaccount

First, we need to register a Netlify account. The address is Netlify. You can choose to register with GitHub.

Netlity Login

The new site
  • Click the button as shownNew site from GitTo addsite
New site from Git

  • Then, click the button as shownGitHub
GitHub

  • Choose your project, like mineMyBlog
Select Site

  • Click on theDeploy site
Deploy site

  • If you see the page shown in the picture, it means success, and click againSite settings
Getting started

Site details

  • Click Change Site Name to Change the short name for easy memorization

  • I set DNS in my own domain name management. I used Ali Cloud and added the rules as shown in the figure on the management interface

Setting Domain Name Rules

  • The clickDomain managementUnder theHTTPS, follow the steps to complete the operation, wait a moment, you can see ourThe domain nameLocked 🔐
Lishaoy.net locked

😝 😜 😄 😆 😜…

replacenextThe theme

Hexo has many themes, you can choose other themes like ❤️, I used the next theme.

The installationnextThe theme

Execute the following command to install the next theme

    git clone https://github.com/iissnan/hexo-theme-next.git themes/next
Copy the code

Changing a Configuration file

Modify the./_config.yml file in the root directory as follows

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
Copy the code
Rebuild the generated file and push it to GitHub

Rebuild the file and run hexo G

    hexo g
Copy the code

Push a lot

    hexo d
Copy the code

You can also run the following command to start a local service, debug it and push it to GitHub

    hexo s --debug
Copy the code

After the local service is started, you can preview it by typing http://localhost:4000 in the browser, as shown in the figure

What the next theme originally looked like 🙃

This concludes the article onnextFor questions on theme beautification, please refer to the following linked article 🤗

Below is the link to my blog reference article 👇

  • Hexo’s Next Theme personalized tutorial: Building cool Websites
  • Hexo Build Blog Tutorial
  • Hexo Blog Building Walkthrough ii: NexT Theme configuration