This post was first posted on my blog, and you are welcome to visit 😊 in the comments

Said in the previous

My blog in the past for a long time, I am the blog static page hosting to Github pages for rendering, but as we all know, our domestic access to Github if not hung over the wall, the access speed is very slow ☚ī¸. Although my blog has not been a lot of visitors, but as a person who pursues the ultimate experience, how can I stand 🤟.

Looking for solutions

So I searched the Internet for the best solution. I thought the rendering framework for generating the blog would still use Hexo, but I had to find a new host for page hosting, so I found out about Netlify on vue’s website. What Netlify is:

Netlify is a unified platform that automates your code to create high-performant, easily maintainable sites and web apps.

I have read the introduction of the official website. To sum up, it has the following functions:

  • You can host static resources
  • Static web sites can be deployed to the CDN
  • When you commit changes to the Git repository, it automatically runs build Command for Continuous Deployment
  • You can add custom domain names
  • You can enable the free TLS certificate and enable HTTPS

Oh my God!! Github Pages 👏

  • Github is not blocked, but the access speed is very slow and the experience is terrible for domestic users

  • Baidu can not crawl, it is well known that the domestic use of Baidu or more, if you write the article, can not be baidu crawl included, it is still a little pit

  • HTTPS certificate configuration is cumbersome and unfriendly to use

  • Unable to do CDN acceleration. Without the registered domain name server, the CND acceleration service cannot be used in China

So, I’m going to use Netlify as my page host. Now we are going to set up a blog!

start

As a first step, we need to install Hexo

Before installing Hexo, you need to install the following environment:

  • Node.js
  • Git

Install NPM after installing Node:

$ npm -g install npm
Copy the code

Students who can not climb the wall can use NPM Taobao mirror CNPM:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

Note: after installing the mirror CNPM of Taobao source, all subsequent commands starting with NPM will be replaced by CNPM

Next we install Hexo:

$ npm install -g hexo-cli
Copy the code

Test whether the installation is successful:

$ hexo version
Copy the code

Then on our computer, select a directory:

$ hexo init "Blog Directory" # Use hexo to initialize a blog project in the specified < Folder > folder
$ cd "Blog Directory"         Go to the created project directory
$ npm install         Install the required dependencies using NPM.
Copy the code

This new “blog directory” is used as your future blog directory, including the blog configuration, articles and everything. Once the new directory is created, we use any code editor to open our newly created directory with the following directory structure:

. ├ ─ ─ _config. Yml ├ ─ ─ package. The json ├ ─ ─ scaffolds ├ ─ ─source| ├ ─ ─ _drafts | └ ─ ─ _posts └ ─ ─ themesCopy the code

Note: There are some hexo CLI commands involved here, please learn for yourself and use them in the future.

Then we’ll try a run to see if it works:

$ hexo clean Clean up various caches and old files
$ hexo g     Generate static files
$ hexo s     Enable server preview
Copy the code

After executing hexo s, the command line window will prompt you with the following information:

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
Copy the code

To preview your first Hexo blog post, go to http://localhost:4000.

The deployment of

Now comes the big part: deployment. Before we start deploying, let’s talk about what deployment is:

When we use hexo g and hexo S commands to generate and enable the service, the test domain we access locally -http://localhost:4000 actually points to the public directory in our current directory, that is, the hexo g command will generate public Directory, which holds our static page files and dependencies. The process of deployment is to place the files in this public directory on our server and complete the deployment.

Now let’s deploy:

Synchronization to making

Create a repository on GitHub:

Copy the location of your newly created repository like this:

  https://github.com/xieyezi/your-Repository.git
Copy the code

Go back to the project root directory and associate your local project with the new repository:

  git remote add origin https://github.com/xieyezi/your-Repository.git
Copy the code

Create a. Gitignore file under the current root directory to write files and directories that do not need to be synchronized.

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
themes/
.deploy*/
Copy the code

When done, go to the root directory:

  git add ./
Copy the code
  git commit -m 'commit information'
Copy the code

Then push it to GitHub:

 git push --set-upstream origin master
Copy the code

At this point, we’ve pushed our project to GitHub under the Master branch. Next we’ll do some configuration for Hexo:

Open the _config.yml file in the root directory of hexo to locate the deploy item:

deploy:
  type: git # Deployment mode
  repository: [email protected]:xieyezi/your-Repository.git # Associate the Github repository
  branch: run-page # Deploy branch
Copy the code

In this case, we will create a new run-page branch under the project repository. I will explain how it works in a moment.

Once configured, save and exit, let’s re-execute:

$ hexo clean Clean up various caches and old files
$ hexo g     Generate static files
Copy the code

Finally, we’ll sync the public directory to Github:

$ hexo d # Deploy the application
Copy the code

When executing this command, we may get the following error:

$ ERROR Deployer not found: git
Copy the code

That’s because we’re missing a dependency. Let’s install:

npm install hexo-deployer-git --save
Copy the code

Then execute it again. When we get to Github, we will find that our project has a run-Page. This branch is the one we will use to generate our static pages.

Managed to Netlify

We first register our account on the official website of Netlify. Since we host the project on GitHub, we choose GitHub to log in:

Enter the official website and click New:

Select GitHub source:

Then select the project we just created:

Enter the configuration step:

Then wait for Netlify to automatically generate the url for us:

The first time it is created, it will randomly generate a Netlify secondary domain name, we can customize the secondary domain name, click “Change site name” to set, like this:

Click Save and wait for Netlify to hot deploy.

Then click on the created secondary domain name and successfully visit ✌ī¸!!

After we write the blog, we will directly execute:

$ hexo clean 
$ hexo g     
$ hexo d
Copy the code

Our personal blog will automatically refresh, isn’t it super powerful!!

Train of thought

After the deployment, some of you may feel dizzy when you come here. I drew a flowchart of the deployment:

That’s why we use two branches. We host our project branch to the master branch, and then host the generated public directory to the run-Page branch, so that we can type:

$ hexo clean 
$ hexo g     
$ hexo d
Copy the code

Once we push to the run-Page branch,Netlify detects changes to our repository and pulls and deploys in real time based on changes to the branch.

Bind your own domain name

Under this project on Netlify’s website, go to Domain Settings and set:

After setting, it will remind you what to set up domain name resolution. My domain name provider is Ali Cloud, so I go to Ali Cloud to parse records:

Set two records, write the record value to netlify provide you with the second level domain name, return netlify query result:

Successfully displaying your domain name, you can now access your blog by using your custom domain name.

Setting the Https Certificate

We can choose netlify to automatically generate the certificate for us, it will help you go to Let’s Encrypt to apply for a free certificate, we can also use our own certificate, I used ali Cloud free certificate, first download Apache certificate:

Then go to Netlify’s Domain Settings to set:

Click Install certificate and wait for the result.

You are done!! Visiting the site again, the browser has marked our site as secure.

How about, have you learned it? Let’s do it!!