preface

The last two months should be the peak season for programmers looking for a new job. How do you get HR to think more highly of you with the same technical skills? Am I a continuous learner who likes to learn new things and keep an eye on new technologies in my industry? You can’t just talk about it. You need something.

Having a good personal blog may not prove how niubility you are, but at least it shows that you are also a person who has her own ideas and likes to learn and write articles.

So I don’t want to hold you up at this important time, but I’ll cut to the chase:

This is an article to teach you to quickly build your own blog and online deployment of the article.

Whether you’re front-end or not, and no matter how much you know about Hexo, if you follow these steps step by step, I guarantee you’ll be able to create the personal blog you want in an hour.

Can you see the effect?

We must have a purpose before we do something, and I think I know your purpose after you are drawn into the title. So let’s take a look at the final result of the blog to be built next: Lin Dull’s personal blog: https://lindaidai.wang

Learn about Hexo in 30 seconds

Hexo is a fast, concise, and efficient blogging framework. It uses Markdown (or some other rendering engine) to parse articles and generate static web pages with beautiful themes in seconds. That is to help us quickly build their own blog. Hexo’s blog is based on the following:

  • Installation node. Js
  • Install Git
  • Install Hexo
  • Create the Hexo project and run a local test run
  • Sign up for Github and create a repository for Hexo blog projects
  • Deploy your blog project
  • Modify the blog theme

preparation

Installation node. Js

You can skip this step if you already have Node.js installed on your computer. Hexo is node.js based, so we need to use the NPM installation tool before installing it, which is a tool for the Node.js installation package, so we need to install Node.js first. Installing Node.js is easy, just go to nodejs and download the corresponding version. After downloading and installing, you can check to see whether the installation is normal. Open your CMD (terminal), type node -v and press Enter to see if the version number is displayed. So let’s say I’m showing here

v10.14.1
Copy the code

The installation is complete. After installing NodeJS, your computer has NPM installed and you can use NPM commands to download other things. For example, we can install a CNPM first. It is actually a taobao NPM mirror, which will make the download speed faster in China.

$NPM install CNPM -g //Copy the code

(The $sign doesn’t need to be typed, just to indicate that the command is running on a terminal, and -g means global installation, so you can use it in any folder on your computer.)

Install Git

You can skip this step if you already have Git installed on your computer. Git’s main function is to host code, so why use Git here? The reason is that once you’ve created your blog project, you need to deploy it to Git, essentially live the blog, so that other people can access your blog directly from a web site. If you want to know about Git, you can see it here

Install Hexo

Now we can use NPM or CNPM to install hexo:

$ npm i hexo-cli -g
Copy the code

Similarly, you can use the following command to check whether the installation is successful:

$ hexo -v
Copy the code

The diagram below:

Create a blog

With all the preparation done, let’s create our first blog.

Create a website called my-hexo-blog

Set the path on the terminal to where you want your blog project to go. For example, if I want to put my blog project in the projects folder on drive D, open D://projects on terminal. Enter the folder and enter the command in the terminal:

$ hexo init my-hexo-blog
Copy the code

If you don’t want to use my-hexo-blog you can use something else. (If my-hexo-blog is not written, it will be initialized in the current directory. If it is followed by a name, the directory is created and initialized, using that name as the directory name.

Run blogs locally

afterinitAfter the command, you will see an extra directory in your directorymy-hexo-blogFolder, this is the blog project you just generated. You should see a folder like this:

At this point we are entering the contents of the project. Use instructions:

$ cd my-hexo-blog
Copy the code

Jump to the project directory.

After entering the project directory, execute the command:

$NPM install // or $NPM I // or $CNPM ICopy the code

Dependencies for installing projects (which you can think of as various packages in Java).

Now we can start it with the command:

$hexo server $hexo server $hexo serverCopy the code

At this point, it will prompt you

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

To prove that your blog project is up and running, just open your browser and type in the urllocalhost:4000You can visit your blog now. As you can see, a blog should look like this:

Deploying a blog project

Now that we have the blog project running properly locally through the above steps, how do we deploy online?

Create a Github account and create a repository

Create a warehouse

If you have your own Github account, you can log ingithubCreate first on. Click on the top right after you have logged in successfullyNew repositoriesCreate a new repository for your blog deployment. The repository name should match your Github name in the format yourname.github. IODue to my Github nameLinDaiDaiSo I created the project namedLinDaiDai.github.io.

See the SSH

By default, the SSH public key is stored in the ~/. SSH directory of the account home directory. Enter:

$ cd ~/.ssh
$ ls
Copy the code

If something and something. Pub are returned, the SSH public key is available. The diagram below:

If SSH is not available, you need to manually generate it. In the.ssh directory, run the following command:

Ssh-keygen -t rsa -c "Your email address"Copy the code

Press enter 3 times, the password is empty.

Under C:\Users\ administrator. SSH, you get two files id_rsa and id_rsa.pub.

Add an SSH key to GitHub

Open the id_rsa pub, copy the full text to https://github.com/settings/ssh, the Add SSH key, paste into it.

Modify the _config.yml configuration file in the blog project directory

Open the _config.yml file in our blog project directory (use notepad or Notepad++) and add the following code to the bottom of the file:

deploy:
  type: git
  repository: [email protected]:LinDaiDai/LinDaiDai.github.io.git
  branch: master
Copy the code

Change the repository address to the address of the repository you just created. Ctrl + S to save the changes. Note: You need to add two Spaces before type and one space after the colon of type. Keep your code style consistent, otherwise errors or incorrect problems will occur.

Install and deploy the git plug-in you used

Here we are using git source management tools, so we need to install git package to deploy, install the plug-in to use Git for automatic deployment. Execute commands in the blog project directory:

$ npm i hexo-deployer-git --save
Copy the code

Automatically generate and deploy web sites

Before we deploy the site, we need to turn it into a static site. It will automatically create a public directory under the directory and store the newly generated pages in this directory. Just execute the command in the blog project directory:

$ hexo g
Copy the code

The public directory is generated.

Then automate the deployment of the site:

$ hexo d
Copy the code

You can combine one of the above two steps:

$ hexo g -d
Copy the code

If the deployment is successful, the following message is displayed:

[INFO] Deploy done: git
Copy the code

If the following error information is displayed during deployment, refer to the preceding steps to install the Git plug-in

ERROR Deployer not found: git
Copy the code

After the completion of the steps above all: congratulations, you have successfully completed the deployment of online personal blog, now open your browser and type https://userName.github.io and have a look.

Of course, the successful deployment of the blog is only the first step, how to maintain their own blog is always to do in the future, the most difficult thing in the world is to insist, come on…