This article is not updated in this site, please go to the original view!

Original link:Godweiyang.com/2018/04/13/…

If you have any questions, please contact me on QQ: 792321264, vx: Weiyang792321264.

My blog source code address

You can direct quality erlian, Star&fork my blog source code: github.com/godweiyang/… , and then change the configuration can write articles.

preface

I started to set up my first independent blog in September of ’17, and now I am a little bit more decent. Many of you have thought about setting up your own blog, and there are plenty of tutorials online. I in this a little summary of the specific steps to build, in addition, there are few online modification blog source personalized tutorial, I will share a little about some of my modification experience, more personalized operations need you to explore later.

You can visit my blog: godweiyang.com for specific effects. Welcome your support.

I am not a front-end programmer, some things do not understand, write problems or improvements please point out.

First, look at the framework we will use to build our blog. Hexo is an efficient static site generation framework based on Node.js. With Hexo, you can blog directly using Markdown syntax. I believe many friends write projects have written readme. md file, right, is this format! With just a couple of commands, you can upload the resulting page to your Github site, where others can see it. Isn’t that easy? You don’t need to worry about the nuts and bolts of the source code, you just need to write your blog.

The directory structure

Installation Node. Js
Add a domestic mirror source
Install Git
Set up a Github account
Install Hexo
Connect Github to local
Write and publish articles
Binding domain
Personalization (Matery Theme)
Back up your blog source files
Blog source code download
Frequently Asked Questions (FAQ)
Personalization (Beantech theme, discontinued)

Installation Node. Js

First download the stable version of Node.js, which I’ve given in 64-bit.

Install options are all default. Click Next.

Finally, when the installation is complete, press Win+R to open the command prompt, type node -v and NPM -v, if the version number appears, then the installation is successful.

Add a domestic mirror source

If you don’t have a ladder, you can use ali’s domestic mirror to accelerate.

npm config set registry https://registry.npm.taobao.org
Copy the code

Install Git

To upload local web files to Github, you need to use the distributed version control tool ————Git.

The installation options remain the default, except that the last step to add a path is to Use Git from the Windows Command Prompt so that you can open Git directly at the Command Prompt.

After the installation is complete, enter git –version at the command prompt to verify the installation.

Set up a Github account

Next, register a Github account to host our website. Most small partners should have it, as a qualified program ape (yuan) or to have one.

Open github.com/ and create a new project as follows:

.github.io

Settings
GitHub Pages
Choose a theme
GitHub Pages

Install Hexo

Create a new folder where you can store your blog files. For example, my blog files are stored under D: study program blog.

In this directory, right click Git Bash Here to open the Git console window. From now on, all operations will be performed on the Git console instead of using the Windows console.

To locate the directory, enter NPM I hexo-cli -g to install hexo. There will be a few errors, just ignore them.

After the installation is complete, enter hexo -v to verify the installation.

We then initialize our website by typing hexo init to initialize the folder, followed by NPM install to install the required components.

Hexo g to generate static web pages, then hexo s to open the local server, then open the browser to http://localhost:4000/, and you can see our blog:

Press CTRL + C to shut down the local server.

Connect Github to local

Start by right-clicking git bash and typing the following command:

git config --global user.name "godweiyang"
git config --global user.email "[email protected]"
Copy the code

The username and email address will change according to the information you signed up for Github.

Then generate the SSH key:

ssh-keygen -t rsa -C "[email protected]"
Copy the code

Open Github, click Settings under your profile picture, then SSH and GPG Keys, and create a new SSH with whatever name you want.

Enter git bash

cat ~/.ssh/id_rsa.pub
Copy the code

Copy the output to the box and click OK to save.

Type SSH -t [email protected], and if your username appears as shown below, you’re done.

Open the _config.yml file in the root directory of your blog. This is the configuration file for your blog, where you can modify various information related to your blog.

Modify the configuration of the last line:

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

Change repository to your own Github project address.

Write and publish articles

Start by right-clicking git bash in your blog root and installing an extension NPM I hexo-deployer-git.

Then type hexo new post “article title” to create a new article.

Then open the directory D: study\program\blog\source\_posts and you will find a new folder and a.md file, one for your photos and other for your posts.

After compiling the Markdown file, type hexo g in the root directory to generate a static web page, then hexo s for a local preview, and finally hexo d to upload to Github. Go to your github. IO home page and you’ll see the post.

Binding domain

The default domain name is XXX. Github. IO. Do not want to also like me to get an exclusive domain name, first of all you have to buy a domain name, XX cloud can buy, see your personal preference.

Take my Baidu cloud as an example, as shown in the picture below, add two parsing records:

Then open your Github blog project, click Settings, drag to the Custom Domain below, fill in your own domain name, and save:

A file named CNAME should now appear in your project root directory. If not, go to your local blog /source directory, mine is D: study program blog source, and create a new CNAME file with no suffix. Then write your domain name in it and save. Finally, run hexo G, hexo D and upload to Github.

Back up your blog source files

Sometimes you want to switch to a new computer to continue blogging, so you can upload all the source files in your blog directory to Github.

Create a new branch named Hexo in the Github blog repository, and clone it with git.

Git branch -b hexo switch to hexo branch, git add., git commit -m “XXX”, and git push origin hexo commit.

Of course, I created a new repository to store the source file, the specific effect can be seen in my blog source file repository: github.com/godweiyang/… . You can also use below hexo installation method first installed hexo, then direct git clone [email protected]: godweiyang/hexo – matery – modified. Git clone all of my source files, And then this is basically bug-free custom blog I’ve modified, and it’s ready to go.

I this source file and the original theme is no different, but I put the plug-in installed, some small bug also fixed, so it can be directly used, convenient everyone.

Blog source code download

If you don’t want to go through the hassle of installing a bunch of stuff and fixing bugs yourself, just do the work above, download my source code, and change your profile.

Source code address: github.com/godweiyang/… . You can directly download down to use, modify the personal configuration information, of course, the environment should be built first.

If you download the source code, you can use it directly, you can skip the rest of the article! Like remember star and fork oh!

Personalization (Matery Theme)

The personalization below is for the Matery theme, if you want to use the theme of my current blog, you can read this chapter directly.

Replace the topic

Over the past two days I have changed my blog to a theme that now looks more zhuang cool and responsive, comfortable to click on and has a lot more features.

The original address of the theme is here: hexo-theme-matery, which is also documented in great detail in both Chinese and English versions, with timely replies from the author. The effect picture is as follows, which is very to my taste:

But I still encountered several problems with my own use, after two days of unremitting fishing, finally basically solved, here to share.

First of all, install a theme according to the document tutorial, and then it can be opened normally, if you are general use, basically no problem. But I am a severe obsessive-compulsive disorder, a little trouble looks uncomfortable, the following is a list of my problems and solutions.

Article Header Settings

First, to facilitate the creation of articles, we recommend that /scaffolds/post.md be modified to the following code:

---
title: {{ title }}
date: {{ date }}
top: false
cover: false
password:
toc: true
mathjax: true
summary:
tags:
categories:
---
Copy the code

In this way, you don’t need to add your own new article, just modify the information on the line.

Adding a 404 page

The original theme didn’t have a 404 page, so adding one wasn’t too hard. Create a new 404. Md file under /source/ :

Description: "You have come to a wasteland without knowledge :(" --Copy the code

Then create a new 404.ejs file under the /themes/matery/layout/ directory with the following contents:

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>

<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <% = page.description% >
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Switch the banner every day. Switch banner image every day.
    $('.bg-cover').css('background-image'.'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>
Copy the code

Add resume to “About” page (optional)

Modify/themes/matery/layout/about ejs, find < div class = “card” > tag, and then find its corresponding < / div > tag, followed by the new one card, statement is as follows:

<div class="card">
    <div class="card-content">
        <div class="card-content article-card-content">
                <div class="title center-align" data-aos="zoom-in-up">
                    <i class="fa fa-address-book"></i>&nbsp; &nbsp;<% - __('myCV') % >
                </div>
                <div id="articleContent" data-aos="fade-up">
                    <% - page.content% >
                </div>
        </div>
    </div>
</div>
Copy the code

This will create an extra card, and then you can put your resume under /source/about/index.md, of course, the location of this is up to you, you can also put your resume as the first card.

Resolve MathJax conflicts with code highlighting

If you install the code highlighting plugin hexo-Prism-Plugin as per the tutorial, it is fine to use it alone, but if you use MathJax and follow the online tutorial, After installing the Kramed plugin and modifying the regular expressions in the JS file (to resolve markdown and MathJax syntax conflicts), well, your code won’t be highlighted. The solution is simple: don’t use kramed, but use the marked plugin to change the regular expression.

Open D: study\program\blog\node_modules\marked\lib\marked.

escape: /^\\([`*\[\]()#$+\-.!_>])/,
Copy the code

Em: is replaced by:

em: /^\*((? :\*\*|[\s\S])+?) A \ * (? ! / \ *),Copy the code

At this time in the article to write mathematical formula basically no problem, but pay attention to: mathematical formula if there are two consecutive {, the middle must add space!

Increase station construction time

Modify /themes/matery/layout/_partial/footer.ejs to add at the end

<script language=javascript>
    function siteTime() {
        window.setTimeout("siteTime()".1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date(a);var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* date.utc () -- Returns the number of milliseconds (timestamp) between the Date object and midnight of January 1, 1970 (UTC) year - Specifies the year of the Date object. The value is an integer ranging from day - 1 to 31 of the date object, from hours - 0(24:00 midnight) to 23 of the date object, and from minutes - 0 to 59 of the date object. The value is an integer ranging from -0 to 59. The value is an integer ranging from -0 to 999. The value is the number of milliseconds of the date object */
        var t1 = Date.UTC(2017.09.11.00.00.00); // Beijing time 2018-2-13 00:00:00
        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
        var diff = t2 - t1;
        var diffYears = Math.floor(diff / years);
        var diffDays = Math.floor((diff / days) - diffYears * 365);
        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
        document.getElementById("sitetime").innerHTML = "This site is running" +diffYears+"Year"+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + "Minutes" + diffSeconds + "Seconds";
    }/* The site was created less than a year ago, so it was commented out. If necessary, you can cancel */
    siteTime();
</script>
Copy the code

Then add the following code where appropriate (such as after the copyright declaration) :

<span id="sitetime"></span>
Copy the code

Modifies the initial count of non-garlic

Because garlic son has not been open registration, so there is no way to modify the official website initialization, can only do it yourself. As before, add the following at the end of /themes/matery/layout/_partial/footer.ejs:

<script>
    $(document).ready(function () {

        var int = setInterval(fixCount, 50);  // 50ms cycle detection function
        var pvcountOffset = 80000;  // Initializes the first data
        var uvcountOffset = 20000;

        function fixCount() {
            if (document.getElementById("busuanzi_container_site_pv").style.display ! ="none") {$("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + pvcountOffset);
                clearInterval(int);
            }
            if ($("#busuanzi_container_site_pv").css("display") != "none") {$("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + uvcountOffset); // Add initial data
                clearInterval(int); // Stop the test}}});</script>
Copy the code

Then put the code in the top few lines:

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
    <span id="busuanzi_container_site_pv">
        <i class="fa fa-heart-o"></i>Total Site visits<span id="busuanzi_value_site_pv" class="white-color"></span>
    </span>
<%} % >
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
    <span id="busuanzi_container_site_uv">Passengers, & have spent visitors<span id="busuanzi_value_site_uv" class="white-color"></span>People.</span>
<%} % >
Copy the code

Is amended as:

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
    <span id="busuanzi_container_site_pv" style='display:none'>
        <i class="fa fa-heart-o"></i>Total Site visits<span id="busuanzi_value_site_pv" class="white-color"></span>
    </span>
<%} % >
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
    <span id="busuanzi_container_site_uv" style='display:none'>Passengers, & have spent visitors<span id="busuanzi_value_site_uv" class="white-color"></span>People.</span>
<%} % >
Copy the code

Style =’display:none’

Add anime characters

In fact, there are three steps, not as complicated as some online tutorials.

The first step:

npm install --save hexo-helper-live2d
Copy the code

The second step:

npm install live2d-widget-model-shizuku
Copy the code

Step 3: Add the following code to the root configuration file:

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-shizuku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7
Copy the code

Then hexo G and hexo S will preview the effect, but there is one caveat. I found that the character should not be used with Buisako at the same time, otherwise buisako will not display.

Image Watermarking

To prevent others from copying your articles, it’s easy to watermark all your images.

Create a new watermark.py in your blog root directory as follows:

# -*- coding: utf-8 -*-
import sys
import glob
from PIL import Image
from PIL import ImageDraw
from PIL import ImageFont


def watermark(post_name):
    if post_name == 'all':
        post_name = The '*'
    dir_name = 'source/_posts/' + post_name + '/ *'
    for files in glob.glob(dir_name):
        im = Image.open(files)
        if len(im.getbands()) < 3:
            im = im.convert('RGB')
            print(files)
        font = ImageFont.truetype('STSONG.TTF', max(30, int(im.size[1] / 20)))
        draw = ImageDraw.Draw(im)
        draw.text((im.size[0] / 2, im.size[1] / 2),
                  u'@yourname', fill=(0.0.0), font=font)
        im.save(files)


if __name__ == '__main__':
    if len(sys.argv) == 2:
        watermark(sys.argv[1])
    else:
        print('[usage] <input>')
Copy the code

Font also put in the root directory, find your own font. Python3 watermark.py postname can then be run to add watermarks each time an article is written, or python3 watermark.py all can be run to add watermarks to all articles in the first run.

Added NetEase Cloud Music BGM

When writing an article, want to insert a paragraph BGM how to do?

First open NetEase Cloud web page version, find the song you want to listen to, and then click to generate external chain:

Just paste it into the article. For aesthetics, set the center. The specific code is as follows:

<div align="middle">Here I paste the code I just copied</div>
Copy the code

Add Baidu statistics and Google statistics code

Open Themes /matery/layout/_partial/head.ejs and modify the following two lines:

<meta name="baidu-site-verification" content="fmlEuI34ir" />
<meta name="google-site-verification" content="yCy2azpds5XSuGZvis6OuA-XIGF5GuGpYRAaGfD6o48" />
Copy the code

Just change the content to your own.

Fix code block line number does not show bug

Modify themes/matery/source/CSS/matery. CSS pre and code around line 95 two paragraphs to the following code:

pre {
    / * padding: 1.5 rem! important; * /
    padding: 1.5 rem 1.5 rem 1.5 rem 3.3 rem ! important;
    margin: 1rem 0 ! important;
    background: # 272822;
    overflow: auto;
    border-radius: 0.35 rem;
    tab-size: 4;
}

code {
    padding: 1px 5px;
    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
    / * the font - size: 0.91 rem; * /
    color: #e96900;
    background-color: #f8f8f8;
    border-radius: 2px;
}
Copy the code

Then set prism_plugin.line_number to true in the root directory _config.yml.

Optimize the article URL path

Some tutorials suggest that changing the blog directory structure to the following will reduce hierarchy and help search engine SEO. In fact, the content level of the website is calculated according to the number of clicks from the home page to reach your article, so whether you change it or not, you can reach it in two layers. If it is not on the home page, you can also reach it through index-archives-post, which has nothing to do with the length of the URL of the article, so the following operations are invalid, you can change it if you want to, or you can not change it. However, it is recommended that students who have established the website for a period of time do not change, otherwise there will be a lot of dead links, and all the comment issues will be emptied, which is very troublesome.

Seo seo believes that the optimal structure of a site is for users to reach any page with three clicks from the front page, but our hexo-compiled site opens the article at a URL like:sitename/year/mounth/day/titleFour-layer structure, such URL structure is not conducive to SEO, crawlers will often fail to climb our articles, so we can directly change the URLsitename/title, and the title is best in English, in the root directory_config.ymlModify permalink under file as follows:

# permalink: :year/:month/:day/:title/
permalink: :title/
Copy the code

Frequently Asked Questions (FAQ)

This chapter updates some of the questions that many students have asked me in the process of setting up their blogs.

Why is there no.ssh folder after the SSH key is generated locally?

This is a problem THAT I did not expect to encounter, but many people still encounter, the main problem is that after typing ssh-keygen -t rsa-c “[email protected]”, many students did not follow the prompts to continue typing, but so ended, and then error is not found. The correct way is to follow the prompt and press Enter all the way.

Why is there a problem with block display?

To display the code correctly, note the following:

The root directory_config.ymlUnder the filehighlightIn theline_numberTo set up forfalse, because the line number temporarily has a bug, has not been fixed.
Do not follow online tutorials to installkramedUninstall the plugins that are already installed.
Modify thenode_modules/marked/lib/marked.jsIn the fileescapeandemTwo lines (around 538), change to the following:

escape: /^\\([`*\[\]()#$+\-.!_>])/, em: /^\*((? :\*\*|[\s\S])+?) A \ * (? ! / \ *),Copy the code

Why does the local preview of the blog work, but push to Github does not work?

There are many possible reasons for this problem, but I will briefly list the situations encountered:

Make sure your github blog repository name is exactly the same as your Github name, such as your Github nameabcThen the name of the warehouse must beabc.github.io. This is a mistake most people make and can result in an abnormal display.

After the theme is changed, is the configuration file changed in the root directory or the theme directory?

In fact, this has to change, generally do not appear duplicate attributes. XXX is the root directory configuration file to use, or theme. XXX is the theme directory configuration file to use.

Where is the Github branch set up?

Click on settings-branches of the warehouse, click on the right side of Add New Branch.

Personalization (Beantech theme, discontinued)

The following personalization Settings are mainly for the ones I used beforebeantechTheme, of course, if you want to use the theme of my current blog, you can skip this section. This part has stopped updating, I will only update in the futuremateryVarious configurations of topics.

Replace the topic

Most of the themes on the web are github’s number one Next theme, but I personally don’t like it very much. I prefer the Beantech theme, which is on the portal.

The first thing to note is that the Github project contains not only theme files, but also various files for Hexo.

So download the project first, and then replace all the files in your original blog root directory with the following:

Of course, common themes are a little different from this one, and only contain theme folders, so just drop the entire folder under Theme.

Then run Hexo Clean to clean all generated page caches, hexo G, hexo D. At this point, the new theme page is generated, and the blog root directory should look something like this:

The blog directory constitutes an introduction

As you can see from the figure above, the directory structure of a blog is as follows:

- node_modules
- public
- scaffolds
- source
	- _posts
	- about
	- archive
	- img
	- tags
- themes
Copy the code

Node_modules is the node.js library directory, public is the generated web files directory, and scaffolds contains three files that store the initial Settings for the new articles and pages. Source is the most commonly used directory for storing articles, pages, images, and other files. Themes stores theme files and are not generally used.

We usually only need to focus on the source/_posts folder to write articles.

The website pictures are saved in the D: study\program\blog\source\img directory, can be modified into their own pictures.

Fix document classification bug

There is a bug in the topic document classification feature that has not been resolved until recently when I discovered that the word in the source file was misspelled…

D:\study\program\blog\scaffolds\post.md, change the word catagories to categories.

Add free comments plugin

Themes came with the Chatmore comment plugin, but chatmore was disabled, so I switched to chatmore.

First you have to set up an account, address. Then open the following page and copy the code:

D:\study\program\blog\themes\beantech\layout\post.ejs

Add image enlargement function

Download the zooming. Js file and save it in D: study program blog themes beantech source js.

Open D: study\ Program \blog\themes\beantech\ Layout \post.ejs and paste the following code at the bottom:

<script type="text/javascript" src="/js/zooming.js"></script>
Copy the code

The image in the article can then be clicked full screen.

Add mathematical formula display

Open D: study\ Program \blog\themes\beantech\ Layout \post.ejs and paste the following code at the bottom:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>
Copy the code

Because markdown syntax conflicts with MathJax syntax, you also need to modify the source file.

Open D: study\program\blog\node_modules\marked\lib\marked.

escape: /^$[`*\[\]()#$+\-.!_>])/
Copy the code

Em: is replaced by:

em: /^\*((? :\*\*|[\s\S])+?) A \ * (? ! / \ *)Copy the code

At this time in the article to write mathematical formula basically no problem, but pay attention to: mathematical formula if there are two consecutive {, the middle must add space!

An example is the inline formula:Code:

$y = f(x)$
Copy the code

\[y = {f_{{g_1}}}(x)\] code:

\\[y = {f_{ {g_1}}}(x)\\]
Copy the code

Notice the space between the curly braces above!

Add a message board

Create bbs.ejs in D: Study program blog themes beantech layout.

---
layout: page
---
<style type="text/css">
    header.intro-header{
        background-position: right; 
    }
</style>
<! -- Chinese Version -->
<div class="zh post-container">
    <% - page.content% >
</div>
Copy the code

D: study\program\blog\source > BBS > study\program\blog\source > D: study\program\blog\source

-- Layout: "BBS" Title: "BBS" Date: 2017-09-19 12:48:33 Description: "Welcome to exchange friends chain, exchange and study together!" Header-img: "img/header_img/home-bg-2-dark. PNG "comments: true -- replace this with your comment code ~~~Copy the code

Add top function

Run the following two commands to install the top plug-in:

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
Copy the code

Then open D: study\ Program \blog\themes\beantech\ Layout \index.ejs and add the following code:

<% if (post.top) {% >
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>Placed at the top</font>
    <span class="post-meta-divider">|</span>
<%} %>
Copy the code

Then add the following configuration options to the article md file that you want to top:

top: true
Copy the code

Add visitor count and word count

We use a foreign traffic statistics website: Gostats.com. Register first.

Then add the website address by yourself, the process is not detailed, then click Get Counter Code, choose a style you like. Select a style, select HTML, and generate code as shown below:

Copy this code to D: study\program\blog\themes\ layout\_partial\footer.ejs as follows:

Word count first install the plug-in

npm i --save hexo-wordcount
Copy the code

Then open D: study program blog themes beantech layout _partial footer.ejs and add the following code:

<span class="post-count"><% = totalcount(site) % > words altogether</span>
Copy the code

The specific location is shown in the figure above.

Article Property Configuration

First, explain the property configuration at the beginning of this article, as shown below:

Title: Catalog: Whether paragraphs are displayed Date: date of the article subtitle: subtitle: header-img: background image: Top: Whether categories are displayedCopy the code

Change each value every time you write an article.

Hexo+Github – Hexo+Github

This article is not updated in this site, please go to the original view!

My blog source code address

preface

Installation Node. Js

Add a domestic mirror source

Install Git

Set up a Github account

Install Hexo

Connect Github to local

Write and publish articles

Binding domain

Back up your blog source files

Blog source code download

Personalization (Matery Theme)

Replace the topic

Article Header Settings

Adding a 404 page

Add resume to “About” page (optional)

Resolve MathJax conflicts with code highlighting

Increase station construction time

Modifies the initial count of non-garlic

Add anime characters

Image Watermarking

Added NetEase Cloud Music BGM

Add Baidu statistics and Google statistics code

Fix code block line number does not show bug

Optimize the article URL path

Frequently Asked Questions (FAQ)

Why is there no.ssh folder after the SSH key is generated locally?

Why is there a problem with block display?

Why does the local preview of the blog work, but push to Github does not work?

After the theme is changed, is the configuration file changed in the root directory or the theme directory?

Where is the Github branch set up?

Personalization (Beantech theme, discontinued)

Replace the topic

The blog directory constitutes an introduction

Fix document classification bug

Add free comments plugin

Add image enlargement function

Add mathematical formula display

Add a message board

Add top function

Add visitor count and word count

Article Property Configuration

Related Posts

Probably the best state management tool based on Hooks and Typescript

Canvas generates images and converts them to base64 and converts them to BLOB

Docker walkthrough: build a portable development environment @.. @ for good