Hexo + making site

preface

I have been envious of those who have their own personal websites before, and have always wanted to build their own personal websites, but also want to make a record for their growth.

What is Hexo?

Hexo is a Static blog framework based on Node.js, which is easy to install and use, and can easily generate static web pages hosted on GitHub. Hexo is an open source project on GitHub. See Git for Hexo. For more information about Hexo, visit Hexo’s website. Because the creator of Hexo is Taiwanese and friendly to Chinese support, you can choose Chinese for viewing.

Set up steps

GitHub creates a personal repository
Install Git
Installation Node. Js
Install Hexo
Associate GitHub with Hexo

GitHub creates a personal repository

Log in to GitHub, if you don’t have a GitHub account, create a GitHub account: GitHub, as shown below to create a personal repository, the repository name should be: username.github. IO, for example, my repository name: celesteting.github

Install Git

What is Git? To put it simply, Git is an open source distributed version control system. Our website has been built locally and needs to be synchronized to GitHub using Git. If you want to know more about Git, please refer to Liao Xuefeng’s Git tutorial: Git Tutorial. Download the Git- installation package from the official Git website, and install it. Enter Git in the command line to test whether the installation is successful. After the installation is successful, bind Git to the GitHub account and right-click Git Bash Here.

Set the user.name and user.email configurations

$ git config --global user.name "Your GitHub username"
$ git config --global user.email "Your GitHub registered email address"
Copy the code

Generate an SSH key file

$ ssh-keygen -t rsa -C "Your GitHub registered email address"
Copy the code

I’m going to go to the id_rsa.pub key in my.ssh folder and copy it all.

Open the GitHub_Settings_keys page and create a new SSH Key with Title as the Title. Copy the id_rsa.pub content and click Add SSH Key.

Check whether the GitHub public key is set successfully in Git Bash

$ ssh [email protected]
Copy the code

Success is illustrated in the following figure:

Installation Node. Js

Hexo is based on node.js, node.js.

Check whether Node.js is installed successfully

$ node -v
Copy the code

Check whether the NPM is installed successfully

$ npm -v
Copy the code

Install Hexo

Hexo is the framework of our personal blog. You need to create a folder on your computer, which I will name Hexo. The Hexo framework and your own website will be in this folder, after creating it, go to the folder -> Git Bash Here -> install Hexo using the NPM command

$ npm install -g hexo-cli
Copy the code

This is taking a long time to install (waiting patiently). After the installation is complete, initialize our blog by typing:

$ hexo init Hexo
Copy the code

To test the prototype of the site, type three commands in order:

$ hexo new test
$ hexo g
$ hexo s
Copy the code

When you’re done, type http://localhost:4000/ into your browser to see our first blog post, Test.

The Hexo command is commonly used

Hexo n “My Blog” # New Post
Hexo generate can also be shortened to hexo G # generate
Hexo Server can also be shortened to Hexo S # Launch service Preview (monitors file changes and updates automatically without restarting the server)
Hexo deploy can also be shortened to hexo D # deploy
Hexo server -s # Static mode
Hexo server -p 5000 # Modify port
Hexo server -i 192.168.1.1 #
Hexo Clean # Clean cache

Associate GitHub with Hexo

Yml file becomes the site configuration file in the Hexo root directory. Open _config.yml to change deploy:

deploy:
    type: git
    repository: https://github.com/celesteting/celesteting.github.io.git
    branch: master
Copy the code

Save the site configuration, so Hexo knows where you want to deploy hexo. Obviously, we deploy hexo in our GitHub repository, and finally install Git deployment plug-ins

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

At this point, we each input three commands, you can see our blog through xxx.github.

$ hexo clean
$ hexo g
$ hexo s
Copy the code

Hexo personalization

Replace the topic

I really don’t like the default theme of Hexo, Hexo provides many themes, I use the Oishi theme, open the command line in the Hexo directory (i.e. the folder I created my blog), type below, download the Oishi theme into the Oishi folder under Themes in the Hexo directory.

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

Open Hexo’s _config.yml configuration file and change the theme as follows:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Oishi
Copy the code

Site configuration

Basic Website Configuration

Yml (” timezone “, “timezone”, “timezone”, “timezone”)

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: CelesteDescription: Better Me # Author: Huiting Cai # Timezone: Asia/Shanghai timezone, Hexo uses your computer's timezone by default.Copy the code

Other Site configuration

When the site was first created, the navigation only had “Home page”, “Archive” and “tag”, and clicking on “tag” would result in a 404 error.

Handle the error of clicking “tag” 404

A 404 error is reported because the tag page does not exist. You need to create a tags page.

$ hexo new page "tags"
Copy the code

After republishing, it is found that clicking “label” shows normal

Add navigation options such as “categorize”

Find menu at Hexo\themes\Oishi\ _config.yml:

menu:
  home: /
  categories: /categories/
  #about: /about/
  archives: /archives/
  tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404/

Copy the code

Create a new “taxonomy” page in git shell, otherwise click “taxonomy” in navigation and a 404 error will be reported

$ hexo new page "categories"

Copy the code

Remove the Hexo power-driven, theme and other information from the footer

Edit Hexo themes\Oishi\layout\ _partials\footer.swig and delete the following code (note: I am using the Oishi theme, so delete the layout\ _partials\footer.swig)

{% if theme.copyright %}
  <div class="powered-by">
    {{ __('footer.powered'.'<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
  </div>

  <span class="post-meta-divider">|</span>

  <div class="theme-info">
    {{ __('footer.theme') }} &mdash;
    <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
      NexT.{{ theme.scheme }}
    </a>
  </div>
{% endif %}
Copy the code

Integrating third-party services

Source: NexT

Baidu statistics

1. Log in to Baidu statistics and locate the code acquisition page of the site;

2. Copy. Hm. Js? The following string of statistics script id;

3. Edit Hexo themes\Oishi\ _config.yml and set the value of baidu_Analytics to your Baidu statistics script ID.

Read Count (LeanCloud)

After registering our LeanCloud account and verifying our email address, we can log in to our LeanCloud account, do some configuration, and then get the App ID and App Key to use the article read statistics function normally.

1. Apply -> Create a new App -> Create 2. Settings -> Apply Key -> Copy the App ID and Key in the corresponding position of edit Hexo\themes\Oishi\ _config.yml.

leancloud_visitors:
  enable: true
  app_id: yOW0YyukmCgRVHTlVKQrwuCX
  app_key: 8Cdt8dmYHgvO6tUDiD

Copy the code

Modify the hashtag at the bottom of the article

To implement the image, modify the template Hexo\themes\Oishi\layout\ _macro\post.swig, search rel=”tag”># and replace # with #

Add a border effect to the article

Open Hexo themes\Oishi\source\ CSS \ _custom\custom.styl and add:

 .post {
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
Copy the code

Add the number of visitors at the bottom of the site

Open the file Hexo themes\Oishi\layout\ _partials\footer.swig and add the following code before copyright

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
Copy the code

Add the following code to display statistics in an appropriate place

<div class="theme-info">
  <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_uv""> <span id="busuanzi_value_site_uv"< / span > < / span > time > < / div >Copy the code

The following image appears at the bottom of the page

Here are two statistical codes of different calculation methods: 1. Pv method, a single user clicks n articles continuously and records N visits

<span id="busuanzi_container_site_pv"< p style = "max-width: 100%"busuanzi_value_site_pv"< / span > < / span > time >Copy the code

2. In uv mode, a single user clicks on n articles continuously and only records the number of visitors once

<span id="busuanzi_container_site_uv"< p style = "max-width: 100%"busuanzi_value_site_uv"< / span > < / span > time >Copy the code

Modify the Chinese display on the page

Open the Hexo \ themes, Oishi, languages, useful – Hans. Yml

Realize the statistical function of the article

Install hexo – wordcount:

$ npm install hexo-wordcount --save
Copy the code

Then in the theme configuration file (Themes \Oishi\ _config.yml), configure as follows:

post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
Copy the code

To display statistics and reading time in line, open Hexo themes Oishi source CSS custom custom. Styl

.post-wordcount{ display: block; }
Copy the code

The renderings are as follows:

Add a top loader bar

Open the file \Hexo\themes\Oishi\layout\ _partials\head.swig and add the following code

<script src="/ / cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="/ / cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
Copy the code

However, the default is pink. Change the color to add the following code to the file

<style>
    .pace .pace-progress {
        background: #1E92FB; /* Progress bar color */
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /* Shadow color */
    }
    .pace .pace-activity {
        border-top-color: #1E92FB; /* Top border color */
        border-left-color: #1E92FB; /* Left border color */
    }
</style>
Copy the code

Modify font size

Open the “Hexo themes\Oishi\source\ CSS \ _variables\base.styl” file and change $font-size-base to 16px

Modify page Styles

Open Hexo themes/Oishi/source/CSS / _custom/custom.styl and edit the style accordingly

Modify the HTML structure of the page

I would like to add units to the font statistics and reading time, edit Hexo\themes\Oishi\layout\ _macro\post.swig

{% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}
            <div class="post-wordcount">
              {% if theme.post_wordcount.wordcount %}
                {% if not theme.post_wordcount.separated_meta %}
                  <span class="post-meta-divider">|</span>
                {% endif %}
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                {% if theme.post_wordcount.item_text %}
                  <span class="post-meta-item-text"> {{__ ('post.wordcount') }}</span>
                {% endif %}
                <span title="{{ __('post.wordcount') }}"> {{wordcount (post. The content)}} word < / span > {% endif %} {%if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %}
                <span class="post-meta-divider">|</span>
              {% endif %}

              {% if theme.post_wordcount.min2read %}
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                {% if theme.post_wordcount.item_text %}
                  <span class="post-meta-item-text"> {{__ ('post.min2read') }}</span>
                {% endif %}
                <span title="{{ __('post.min2read') }}">
                  {{ min2read(post.content) }} min
                </span>
              {% endif %}
            </div>
          {% endif %}
Copy the code

Set head

Open Hexo\config.yml and add the following code to it

avatar: http://ounwd2b8q.bkt.clouddn.com/timg.jpg
Copy the code

To edit the avatar style, open the Hexo\themes\Oishi\source\css_common\ Components \sidebar\sidebar-author. Styl file and add the following code

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  border-radius: 80px; 
  box-shadow: inset 0 -1px 0 #333sf;

  transition: transform 1s ease-out;
}

img:hover{
  animation-play-state: paused;
  transform: rotateZ(360deg);
}
Copy the code

Setting website ICONS

Find a (32×32) ICO icon in EasyIcon and change the name of the icon to favicon.ico, then put the icon in the seven ox and add the following code in Hexo\themes\Oishi\ _config.yml

favicon: http://ounwd2b8q.bkt.clouddn.com/favicon.ico
Copy the code

Binding domain

To buy a domain name, I bought a domain name from Godaddy;
Create a new CNAME file in the site directory \Hexo\source (no suffix) and edit the contents to the domain name:

celesteting.com
Copy the code

Run hexo g-d at Git Bash

The DNS server of Godaddy is blocked and the domain name cannot be accessed. Therefore, you have to migrate the DNS Service to a stable Service provider in China. In this case, DNSPod is selected. Set up two A records, @ and WWW, with the IP address of git page (you can ping celesteting.github.

4. Configure DNS Service for the domain name

Add the following two records obtained in DNSPod to the custom domain name server in Godaddy’s administrative DNS

celesteting.com

Post operation

The new post

In git shell type:

$ hexo new [layout] "Blog name"
Copy the code

You can find the file “blogname.md” in the Hexo\source\ _posts directory. If the name of a blog post contains a space, it must be surrounded by “”. It can also be in Chinese.

You can then use the Markdown editor to open the blog content and edit it. I directly used Markdown in Youdao Cloud Notes to edit my blog posts. Layout is optional and defaults to POST. Layout can be viewed under Hexo\scaffolds. You can also add your own layout by adding a file or editing an existing layout, such as the layout for Post which defaults to Hexo\scaffolds\post.md.

---
title: {{ title }}
date: {{ date }}
tags:
---

Copy the code

I want to add categories to avoid manual input each time, just modify the file to add one line.

---
title: {{ title }}
date: {{ date }}
categories: 
tags:
---

Copy the code

Note that the: of all files must be followed by a space, otherwise an error will be reported

Edit the post

Edit the main information of the blog

The blog file just generated

-- Title: Hexo+GithubThe name displayed on the article page can be modified at will and will not appear in the URL
date: 2017/8/14              # The generated time of the article is generally unchanged, of course, can also be arbitrarily modifiedCategories: Hexo site# article category directory, can be empty
tags: [Hexo]                 [tag1,tag2,tag3]
---

Copy the code

The article based on

If you don’t want the article to be displayed on the home page, you can add code where you want it to be captured

<! --more-->Copy the code

Insert images into your blog

The local path

Use the local path: Create a new img folder in the Hexo/source directory, place the image in this folder, and insert the image path.

Use seven niuyun to reference external links

Seven cattle cloud storage: need to register, fast. Upload the file as shown below, and then copy the outer chain.

Refer to the article

The theme of shenzekun.cn/hexonext…
GitHub+Hexo
cherryblog.site/
nextT
Binding domain