Hexo + GitHub Page was used to set up a technical blog, realizing its own unique blog, and defining a domain name: Gain-wyj.cn /. It contains a lot of dry goods, welcome to come to see.

My blog source code address

You can direct quality erlian, Star&fork my blog source code: github.com/gain-wyj/wy… , and then change the configuration can write articles. Instructions can be found in readme.md, another branch in main.

First run [email protected]:gain-wyj/wyj-matery-modified.git to download all files locally.

There is still one font missing (needed for watermarking images), go to C:\Windows\Fonts, find STSong Regular and copy it to wyJ-matery-Modified.

Quickly build

If you don’t want to customize your theme from scratch, you can just download my modified theme and make a few minor changes:

Root configuration file_config.ymlAnd subject directory configuration files_config.ymlTo modify personal information.
Modified in the root directory configuration filedeployA column ofrepository.
Modified in the root directory configuration filebaidu_url_submitA column oftoken.
Modified in the topic configuration filegitalkFor the modification method, see the text.
Of course, the premise is that the environment before the chapter of personalized Settings still needs to be configured!

Common Commands

hexo g  Generate a blog page file
hexo s  # Local preview blog
hexo d  # Upload web files to Github
Copy the code

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/gain-wyj/wy… . 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!

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.

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.

Now that the local site configuration is ready, type hexo g to generate a static web page, then type hexo s to open the local server, and then open the browser to http://localhost:4000/ to 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 "xxxxx"
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.

The inputssh -T [email protected], show up your username, and you’re done.Open the blog root directory_config.ymlThis is the blog configuration file, where you can modify all kinds of information related to the blog.

Modify the configuration of the last line:

deploy:
  type: git
  repository: https://github.com/gain-wyj/gain-wyj.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.

gain-wyj.cn/

Home page /

List of blogs /

Label /

Classification /

Archive /

About /

Links /

Message board /

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

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

Add snow effects

First in the themes/matery/source/libs/others under new file snow. Js, and insert the following code:

/* Style a */
(function($){
    $.fn.snow = function(options){
    var $flake = $('<div id="snowbox" />').css({'position': 'absolute'.'z-index':'9999'.'top': '-50px'}).html('the & # 10052; '),
    documentHeight  = $(document).height(),
    documentWidth   = $(document).width(),
    defaults = {
        minSize     : 10.maxSize     : 20.newOn       : 1000.flakeColor  : "#AFDAEF" /* Here you can define the snow color, if you want white you can change it to #FFFFFF */
    },
    options = $.extend({}, defaults, options);
    var interval= setInterval( function(){
    var startPositionLeft = Math.random() * documentWidth - 100,
    startOpacity = 0.5 + Math.random(),
    sizeFlake = options.minSize + Math.random() * options.maxSize,
    endPositionTop = documentHeight - 200,
    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
    durationFall = documentHeight * 10 + Math.random() * 5000;
    $flake.clone().appendTo('body').css({
        left: startPositionLeft,
        opacity: startOpacity,
        'font-size': sizeFlake,
        color: options.flakeColor
    }).animate({
        top: endPositionTop,
        left: endPositionLeft,
        opacity: 0.2
    },durationFall,'linear'.function(){$(this).remove()
    });
    }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
        minSize: 5./* Define the minimum snowflake size */
        maxSize: 50./* Define the maximum snowflake size */
        newOn: 300  /* Define density. The smaller the number, the more dense */
    });
});
/* Style two */
/* Control snow */
function snowFall(snow) {
    /* Configurable properties */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200;   /* Maximum number of slices */
    this.flakeSize = snow.flakeSize || 10;  /* Snowflake shape */
    this.fallSpeed = snow.fallSpeed || 1;   /* Fall speed */
}
/* Compatible with */
requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) { setTimeout(callback, 1000 / 60); };

cancelAnimationFrame = window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
    window.oCancelAnimationFrame;
/* It starts to snow */
snowFall.prototype.start = function(){
    /* Create canvas */
    snowCanvas.apply(this);
    /* Create snowflake shape */
    createFlakes.apply(this);
    / * * / painting snow
    drawSnow.apply(this)}/* Create canvas */
function snowCanvas() {
    /* Add a Dom node */
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = document.body.clientHeight;
    snowcanvas.setAttribute("style"."position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
    document.getElementsByTagName("body") [0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    /* Handle window size changes */
    window.onresize = function() {
        snowcanvas.width = window.innerWidth;
        /* snowcanvas.height = window.innerHeight */}}/* Snow movement object */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth);   /* x coordinate */
    this.y = Math.floor(Math.random() * canvasHeight);  /* y coordinate */
    this.size = Math.random() * flakeSize + 2;          / * * / shape
    this.maxSize = flakeSize;                           /* Maximum shape */
    this.speed = Math.random() * 1 + fallSpeed;         /* Fall speed */
    this.fallSpeed = fallSpeed;                         /* Fall speed */
    this.velY = this.speed;                             /* Y direction */
    this.velX = 0;                                      /* X direction */
    this.stepSize = Math.random() / 30;                 * / / * step length
    this.step = 0                                       Steps / * * /
}
flakeMove.prototype.update = function() {
    var x = this.x,
        y = this.y;
    /* Swing left and right (cosine) */
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
        this.velY = this.speed
    }
    this.velX += Math.cos(this.step += .05) * this.stepSize;

    this.y += this.velY;
    this.x += this.velX;
    /* Fly out of the boundary processing */
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
        this.reset(canvas.width, canvas.height)
    }
};
/* Fly out of bounds - place the top to continue falling */
flakeMove.prototype.reset = function(width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
};
// Render snowflake - random shape (you can change snowflake color here!!)
flakeMove.prototype.render = function(ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0.this.x, this.y, this.size);
    snowFlake.addColorStop(0."Rgba (255, 255, 255, 0.9)");  /* Snowflake color, white by default */
    snowFlake.addColorStop(. 5."Rgba (255, 255, 255, 0.5)"); /* If you want to change to another color, please check */
    snowFlake.addColorStop(1."rgba(255, 255, 255, 0)");    /* Find hexadecimal RGB color code. * /
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0.Math.PI * 2);
    ctx.fill();
    ctx.restore();
};
/* Create snowflake - define shape */
function createFlakes() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes = [],
        canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
        flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
    }
}
/ * * / painting snow
function drawSnow() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    /* Empty the snowflakes */
    ctx.clearRect(0.0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
        flakes[e].update();
        flakes[e].render(ctx);
    }
    /* Frame by frame */
    this.loop = requestAnimationFrame(function() {
        drawSnow.apply(that);
    });
}
/* Call and control methods */
var snow = new snowFall({maxFlake:60});
snow.start();
Copy the code

Then add a line snow: /libs/others/snow.js to libs.js in the theme configuration file.

Ejs in themes/matery/layout/layout. Add the following code:

<! -- Snow Effects -->
<% if (theme.snow.enable) { %>
<script type="text/javascript" src="<%- theme.libs.js.snow %>"></script>The < %} % >Copy the code

Finally, at the end of the topic profile add:

# Snowflake effects
snow:
  enable: true
Copy the code

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/ :

---
title: 404
date: 2019-07-19 16:41:10
type: "404"
layout: "404"
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.

Resource portal

Pay attention to [be a gentle program ape] public account
In [do a tender program ape] public account background reply [Python information] [2020 autumn recruit] can get the corresponding surprise oh!

“❤️ thank you.”

Click “like” to support it, so that more people can see this content.
Share your thoughts with me in the comments section, and record your thought process in the comments section

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Hexo+Github blog building tutorial

My blog source code address

Quickly build

Common Commands

Blog source code download

Installation Node. Js

Add a domestic mirror source

Install Git

Install Hexo

Connect Github to local

Write and publish articles

gain-wyj.cn/

Home page /

Recommended Article /

List of blogs /

Label /

Classification /

Archive /

About /

Links /

Message board /

Increase station construction time

Fix code block line number does not show bug

Add snow effects

Adding a 404 page

Add resume to “About” page (optional)

Resource portal

“❤️ thank you.”

Hexo+Github blog building tutorial

My blog source code address

Quickly build

Common Commands

Blog source code download

Installation Node. Js

Add a domestic mirror source

Install Git

Install Hexo

Connect Github to local

Write and publish articles

gain-wyj.cn/

Home page /

Recommended Article /

List of blogs /

Label /

Classification /

Archive /

About /

Links /

Message board /

Increase station construction time

Fix code block line number does not show bug

Add snow effects

Adding a 404 page

Add resume to “About” page (optional)

Resource portal

“❤️ thank you.”

Related Posts

【 Python 】 The decoration of the N times do not remember, after reading this article you will understand

[Algorithm series]- Algorithm brush questions and summary about citation -2

Personal blog development stomp records (to be sorted)