1. Why build a personal blog?

I personally read some of the best bloggers every day, both technical and non-technical. A blog of my own is like a nest of my own. You can decorate it to your liking, you can write about your life, you can be more motivated to write articles, and most importantly, it is yours and unique. So how to build a blog of their own? There are a lot of information on the Internet, but I still want to write one of my own, of course, if it can help you better.

2. Procedure (Based on Mac)

2.1 Installing Git(since I have Xcode installed, Git comes with me)

Open Cmd, type git and you will be prompted to install it. After the installation is complete, run the following command on the terminal to check the Git version.

➜  ~ git --version 
git version 2.14.3 (Apple Git-98)
Copy the code

Now that git is installed, git configuration should be handled as well. Since GitHub Pages is a project hosted on GitHub, you need a GitHub account and a new project repository on GitHub.

2.1.1 Registering a GitHub Account

You can click here to register

2.1.2 Creating a project Repository


01.jpg

Github. IO: your username. Github. IO: your username.


02.jpg

2.1.3 configure SSH

Git can connect to a repository on a server using EITHER HTTPS or SSH. SSH compresses data before transmission, which is efficient. And you don’t need to enter your account and password every time.

  • Git username and mailbox Settings
$git config --global user.name "your name "$git config --global user.email "your email"Copy the code
  • To obtain SSH, enter the following command
CD ~/. SSH // As shown in the following figure, a key is available. You can delete the key to generate a new oneCopy the code


03.jpg

A). The terminal can enter the following commands and operate as prompted.

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


04.jpg

If you go into SSH, you can see the.pub file, open this.pub file, which you can edit with Vim, copy SSHKey.

➜. SSH vim SSHKey. PubCopy the code


05.jpg

  • Add SSHKey to the Github Settings page.


    06.jpg

  • You can test it to see if it was successfully added and connected to GitHub. see

➜ ~ ssh-t [email protected]Copy the code

If the following information is displayed, it is successful.

Hi XXX! You've successfully authenticated, but GitHub does not provide shell access.
Copy the code

2.2 Installing the Hexo Environment

2.2.1 Building node.js Environment (Hexo blog system is written based on Node.js)

Node.js can be downloaded and installed here

2.2.2 build Hexo

  • You can create a folder by selecting a location to store your blog files. Here I create a folder in the document called DPBlog and enter it on terminal.
➜ NPM install hexo-cli -g ➜ hexo init <folderName> ➜ CD./blog ➜ NPM install // The deployment itinerary file ➜ hexo G/hexo generate ➜ hexo s/hexo server // Start the serverCopy the code

Now, you can type http://localhost:4000/ in your browser and the result is shown below. I have changed the template, which would normally be the default template for Hexo. Here’s how to change a template.


07.jpg

  • Now that you have done with Git, configure the Deployment, as shown in the figure, and modify the _config.yml file


    08.jpg 

# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: [email protected]: your github account/your Github account. github.io. Git branch: masterCopy the code


09.jpg

  • After modification
Hexo clean // Delete old public file hexo generate/hexo g // generate new public fileCopy the code
  • Deploy (Install git extensions before deploying)
npm install hexo-deployer-git --save
hexo deploye / hexo d
Copy the code
  • After successful deployment, enter your blog address in the browser (there is no associated domain name at this time) and it will be displayed as http://localhost:4000/ before. In addition, the terminal deployment is successful.
INFO Deploy done: git
Copy the code
  • To install themes, you can go to (hexo. IO /themes/) to find your favorite themes. Execute in Hexo directory:
 git clone https://github.com/iissnan/hexo-theme-next themes/next
Copy the code

Change the name of theme landscape in _config.yml to next or whatever theme you want to download.

2.3 Domain Name Binding

  • In the hexo root directory, create a new CNAME file with no suffix (MAC can do this via terminal), add your domain name to the CNAME file and save.
~ CD hexo directory ~ touch CNAMECopy the code
  • After the configuration is successfully saved, deploy it again. Redeploy after each change.
 hexo g 
 hexo d
Copy the code

You have completed your personal blog. There are many channels for the purchase of domain names. Tell me about my personal purchase channel and domain name activation.

3. About domain names

There are a lot of online recommendations, among which the strong push is GoDaddy,Name.com, Wanwang, Tencent Cloud,nameCheap, I use nameCheap, about the advantages and disadvantages I did not study too much, according to the need to buy it. NameCheap, for example, is pretty much the same.

  • Choose a domain name purchase channel, buy a domain name. You can find coupons here

  • Perform domain name resolution (DNSPod is used here). Go into your domain name administration background and find the place to change DNS resolution. Here I have added, the host record is filled with @ to visit xxx.com, if the resolution of www.xxx.com host name is filled with WWW, generally we add these two records can be. The log value is the IP address of your server. Here we use GitHub Pages so just use your blog address. Or you can switch to IP. Remember to save the configuration after adding.

    10.jpg

Log in to nameCheap and click Manage


11.jpg

Add the two records of DNSPod and click Save.


12.jpg

Domain name resolution takes some time, mine will be accessible in a few hours, you can Ping your domain name to see if it can be pinged, if you can return data, it means that the resolution is successful.

4. Overseas payment

Namecheap requires a Visa card for payment, or if you don’t have one, you can opt for Paypal, which requires an associated credit card.

5. To summarize

Above, that is the complete step of setting up a personal blog. Still want to be a little more careful, hope you can succeed once.