前言

那么问题来了，现有的博客还是现有的这篇文章呢？

软件安装

安装node.js, git, hexo

博客搭建

初始化

推荐使用git命令窗口，执行如下指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$ mkdir Blog
$ cd Blog
$ hexo init
INFO  Cloning hexo-starter to ~\Desktop\Blog
Cloning into 'C:\Users\LouisHsu\Desktop\Blog'...
remote: Enumerating objects: 68, done.
remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 68
Unpacking objects: 100% (68/68), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'C:/Users/LouisHsu/Desktop/Blog/themes/landscape'...
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 867 (delta 0), reused 0 (delta 0), pack-reused 866
Receiving objects: 100% (867/867), 2.55 MiB | 494.00 KiB/s, done.
Resolving deltas: 100% (459/459), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
Install dependencies
npm WARN deprecated titlecase@1.1.2: no longer maintained
npm WARN deprecated postinstall-build@5.0.3: postinstall-build's behavior is now built into npm! You should migrate off of postinstall-build and use the new `prepare` lifecycle script with npm 5.0.0 or greater.

> nunjucks@3.1.6 postinstall C:\Users\LouisHsu\Desktop\Blog\node_modules\nunjucks
> node postinstall-build.js src

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 422 packages from 501 contributors and audited 4700 packages in 59.195s
found 0 vulnerabilities

INFO  Start blogging with Hexo!

生成目录结构如下

1
2
3
4
5
6
\-- scaffolds
\-- source
    \-- _posts
\-- themes
|-- _config.yml
|-- package.json

继续

1
2
3
4
5
6
$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 4700 packages in 5.99s
found 0 vulnerabilities

现在该目录执行指令，开启hexo服务器

1
2
3
$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

hexo_server

生成目录和标签

1
2
3
4
$ hexo n page about
$ hexo n page archives
$ hexo n page categories
$ hexo n page tags

修改/source/tags/index.md，其他同理

1
2
3
4
5
6
7
8
9
10
11
12
13
01| ---
02| title: tags
03| date: 2019-01-04 17:34:15
04| ---

->

01| ---
02| title: tags
03| date: 2019-01-04 17:34:15
04| type: "tags"
05| comments: false
06| ---

关联Github

在Github新建一个仓库，命名为username.github.io，例如isLouisHsu.github.io，新建时勾选Initialize this repository with a README，因为这个仓库必须不能为空。
github_io

打开博客目录下的_config.yml配置文件，定位到最后的deploy选项，修改如下

1
2
3
4
deploy:
    type: git
    repository: git@github.com:isLouisHsu/isLouisHsu.github.io.git
    branch: master

安装插件

1
$ npm install hexo-deployer-git --save

现在就可以将该目录内容推送到Github新建的仓库中了

1
$ hexo d

使用个人域名

  1. 在source目录下新建文件CNAME，输入解析后的个人域名
  2. 在Github主页修改域名

备份博客

没。没什么用
我。我不备份了
可以新建一个仓库专门保存文件试试

现在博客的源文件仅保存在PC上， 我们对它们进行备份，并将仓库作为博客文件夹

  1. 在仓库新建分支hexo，设置为默认分支
    create_branch_hexo
    change_branch_hexo

  2. 将仓库克隆至本地

    1
    $ git clone https://github.com/isLouisHsu/isLouisHsu.github.io.git

  3. 克隆文件
    将之前的Hexo文件夹中的

    1
    2
    3
    4
    5
    6
    scffolds/
    source/
    themes/
    .gitignore
    _config.yml
    package.json

    复制到克隆下来的仓库文件夹isLouisHsu.github.io
    backup_blog

  4. 安装包

    1
    2
    3
    $ npm install
    $ npm install hexo --save
    $ npm install hexo-deployer-git --save

    备份博客使用以下指令

    1
    2
    3
    $ git add .
    $ git commit -m "backup"
    $ git push origin hexo

  5. 部署博客指令

    1
    $ hexo g -d

  6. 单键提交
    编写脚本commit.bat，双击即可

    1
    2
    3
    4
    git add .
    git commit -m 'backup'
    git push origin hexo
    hexo g -d

使用方法

  • 目录结构

    • public 生成的网站文件，发布的站点文件。
    • source 资源文件夹，用于存放内容。
    • tag 标签文件夹。
    • archive 归档文件夹。
    • category分类文件夹。
    • downloads/code include code文件夹。
    • :lang i18n_dir 国际化文件夹。
    • _config.yml 配置文件

  • 指令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    $ hexo help
    Usage: hexo <command>

    Commands:
        clean     Remove generated files and cache.
        config    Get or set configurations.
        deploy    Deploy your website.
        generate  Generate static files.
        help      Get help on a command.
        init      Create a new Hexo folder.
        list      List the information of the site
        migrate   Migrate your site from other system to Hexo.
        new       Create a new post.
        publish   Moves a draft post from _drafts to _posts folder.
        render    Render files with renderer plugins.
        server    Start the server.
        version   Display version information.

    Global Options:
        --config  Specify config file instead of using _config.yml
        --cwd     Specify the CWD
        --debug   Display all verbose messages in the terminal
        --draft   Display draft posts
        --safe    Disable all plugins and scripts
        --silent  Hide output on console

    For more help, you can use 'hexo help [command]' for the detailed information or you can check the docs: http://hexo.io/docs/

拓展功能支持

插入图片

1
$ npm install hexo-asset-image --save

修改文件_config.yml

1
post_asset_folder: true

在执行$ hexo n [layout] <title>时会生成同名文件夹，把图片放在这个文件夹内，在.md文件中插入图片

1
![image_name](https://cdn.jsdelivr.net/gh/isLouisHsu/resource@master/blog_resource/_posts/title/image_name.png)

搜索功能

1
2
$ npm install hexo-generator-searchdb --save
$ npm install hexo-generator-search --save

站点配置文件_config.yml中添加

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主题配置文件/themes/xxx/_config.yml

1
2
local_search:
  enable: true

带过滤功能的首页插件

在首页只显示指定分类下面的文章列表。

1
2
$ npm install hexo-generator-index2 --save
$ npm uninstall hexo-generator-index --save

修改_config.yml

1
2
3
4
5
6
7
index_generator:
  per_page: 10
  order_by: -date
  include:
    - category Web  # 只包含Web分类下的文章
  exclude:
    - tag Hexo      # 不包含标签为Hexo的文章

数学公式支持

hexo默认的渲染引擎是marked，但是marked不支持mathjax。kramed是在marked的基础上进行修改。

1
2
3
4
$ npm uninstall hexo-math --save              # 停止使用 hexo-math
$ npm install hexo-renderer-mathjax --save    # 安装hexo-renderer-mathjax包：
$ npm uninstall hexo-renderer-marked --save   # 卸载原来的渲染引擎
$ npm install hexo-renderer-kramed --save     # 安装新的渲染引擎

修改/node_modules/kramed/lib/rules/inline.js

1
2
3
4
5
6
7
8
9
11| escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
...
20| em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

->

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

修改/node_modules/hexo-renderer-kramed/lib/renderer.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
64| // Change inline math rule
65| function formatText(text) {
66|   // Fit kramed's rule: $$ + \1 + $$
67|   return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
68| }

->

64| // Change inline math rule
65| function formatText(text) {
66|   // Fit kramed's rule: $$ + \1 + $$
67|   // return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
68|   return text;
69| }

在主题中开启mathjax开关，例如next主题中

1
2
3
4
# MathJax Support
mathjax:
  enable: true
  per_page: true

在文章中

1
2
3
4
5
6
7
8
---
title: title.md
date: 2019-01-04 12:47:37
categories:
tags:
mathjax: true
top:
---

测试

A=[a11a12a21a22]A = \left[\begin{matrix} a_{11} & a_{12} \\ a_{21} & a_{22} \end{matrix}\right]

背景图片更换

在主题配置文件夹中，如next主题，打开文件hexo-theme-next/source/css/_custom/custom.styl，修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Custom styles.

// 添加背景图片
body {
  background: url(/images/background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

// 修改主体透明度
.main-inner {
  background: #fff;
  opacity: 0.95;
}

// 修改菜单栏透明度
.header-inner {
  opacity: 0.95;
}

背景音乐

首先生成外链

bgm1

bgm2

添加到合适位置，如Links一栏后

bgm3

鼠标特效

  1. hustcc/canvas-nest.js

  2. 点击文本特效
    新建hexo-theme-next/source/js/click_show_text.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array
        ("for", "while", "catch", "except", "if", "range", 
        "class", "min", "max", "sort", "map", "filter", 
        "lambda", "switch", "case", "iter", "next", "enum", "struct",  
        "void", "int", "float", "double", "char", "signed", "unsigned");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 3) % a.length;
        var x = e.pageX, 
        y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#333333"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
			3000,
			function() {
			    $i.remove();
			});
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

在文件hexo-theme-next/layout/_layout.swig中添加

1
2
3
4
5
6
7
8
9
10
<html>
<head>
	...
</head>
<body>
	...
	...
	<script type="text/javascript" src="/js/click_show_text.js"></script>
</body>
</html>

看板娘

xiazeyu/live2d-widget-models，预览效果见作者博客。

1
2
npm install --save hexo-helper-live2d
npm install live2d-widget-model-hijiki

站点配置文件添加

1
2
3
4
5
6
7
8
9
10
11
live2d:
	enable: true
	scriptFrom: local
	model: 
		use: live2d-widget-model-hijiki #模型选择
	display: 
		position: right  #模型位置
		width: 150       #模型宽度
		height: 300      #模型高度
	mobile: 
		show: false      #是否在手机端显示

人体时钟

新建hexo-theme-next/source/js/honehone_clock_tr.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/******************************************************************************
	初期設定
******************************************************************************/
var swfUrl = "http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf";

var swfTitle = "honehoneclock";

// 実行
LoadBlogParts();

/******************************************************************************
	入力		なし
	出力		document.writeによるHTML出力
******************************************************************************/
function LoadBlogParts(){
	var sUrl = swfUrl;
	
	var sHtml = "";
	sHtml += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="' + swfTitle + '" align="middle">';
	sHtml += '<param name="allowScriptAccess" value="always" />';
	sHtml += '<param name="movie" value="' + sUrl + '" />';
	sHtml += '<param name="quality" value="high" />';
	sHtml += '<param name="bgcolor" value="#ffffff" />';
	sHtml += '<param name="wmode" value="transparent" />';
	sHtml += '<embed wmode="transparent" src="' + sUrl + '" quality="high" bgcolor="#ffffff" width="160" height="70" name="' + swfTitle + '" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
	sHtml += '</object>';
	
	document.write(sHtml);
}
1
<script charset="Shift_JIS" src="/js/honehone_clock_tr.js"></script>

代码雨

新建hexo-theme-next/source/js/digital_rain.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
window.onload = function(){
    //获取画布对象
    var canvas = document.getElementById("canvas");
    //获取画布的上下文
    var context =canvas.getContext("2d");
    var s = window.screen;
    var W = canvas.width = s.width;
    var H = canvas.height;
    //获取浏览器屏幕的宽度和高度
    //var W = window.innerWidth;
    //var H = window.innerHeight;
    //设置canvas的宽度和高度
    canvas.width = W;
    canvas.height = H;
    //每个文字的字体大小
    var fontSize = 12;
    //计算列
    var colunms = Math.floor(W /fontSize);	
    //记录每列文字的y轴坐标
    var drops = [];
    //给每一个文字初始化一个起始点的位置
    for(var i=0;i<colunms;i++){
        drops.push(0);
    }
    //运动的文字
    var str ="WELCOME TO WWW.ITRHX.COM";
    //4:fillText(str,x,y);原理就是去更改y的坐标位置
    //绘画的函数
    function draw(){
        context.fillStyle = "rgba(238,238,238,.08)";//遮盖层
        context.fillRect(0,0,W,H);
        //给字体设置样式
        context.font = "600 "+fontSize+"px  Georgia";
        //给字体添加颜色
        context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 标准色，十六进制颜色
        //写入画布中
        for(var i=0;i<colunms;i++){
            var index = Math.floor(Math.random() * str.length);
            var x = i*fontSize;
            var y = drops[i] *fontSize;
            context.fillText(str[index],x,y);
            //如果要改变时间，肯定就是改变每次他的起点
            if(y >= canvas.height && Math.random() > 0.99){
                drops[i] = 0;
            }
            drops[i]++;
        }
    };
    function randColor(){//随机颜色
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb("+r+","+g+","+b+")";
    }
    draw();
    setInterval(draw,35);
};

hexo-theme-next/source/css/main.styl添加

1
2
3
4
5
6
7
8
9
10
canvas {
  position: fixed;
  right: 0px;
  bottom: 0px;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  z-index: -1;
}

hexo-theme-next/layout/_layout.swig添加

1
2
<canvas id="canvas" width="1440" height="900" ></canvas>
<script type="text/javascript" src="/js/DigitalRain.js"></script>

留言板

用来比力作为后台系统。

打开主题配置文件hexo-theme-next/_config.yml，修改

1
2
3
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uid

在hexo-theme-next/layout/_scripts/third-party/comments/ 目录中添加livere.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}

  {% if theme.livere_uid %}
    <script type="text/javascript">
    (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];

        if (typeof LivereTower === 'function') { return; }

        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;

        e.parentNode.insertBefore(j, e);
    })(document, 'script');
    </script>
  {% endif %}

{% endif %}

在hexo-theme-next/layout/_scripts/third-party/comments.swig

1
{% include './comments/livere.swig' %}

评论无法保留？？？换成Gitment。

安装模块

1
npm i --save gitment

在New OAuth App为博客应用一个密钥
new_oauth_app

定位到主题配置文件，填写``enable，github_user，github_repo，client_id，client_secret`

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
  enable: false
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: # MUST HAVE, Your Github Username
  github_repo: # MUST HAVE, The name of the repo you use to store Gitment comments
  client_id: # MUST HAVE, Github client id for the Gitment
  client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

如果遇到登陆不上的问题，转到gh-oauth.imsun.net页面，点高级->继续访问就可以了。

服务器问题不能解决，换成Gitalk。

定位到路径 themes/next/layout/_third-party/comments下面，创建一个叫做 gitalk.swig的文件，写入如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.githubID }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: md5(window.location.pathname),
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')
       </script>
{% endif %}

在 上面的同级目录下的 index.swig 里面加入：

1
{% include 'gitalk.swig' %}

在使能化之前，我们还需要修改或者说是美化一下gitalk的默认样式，如果你不进行这一步也没有影响，可能结果会丑一点。
定位到： themes/next/source/css/_common/components/third-party. 然后你需要创建一个 gitalk.styl 文件。

这个文件里面写入：

1
2
3
4
.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

然后同样的，在 third-party.styl里面导入一下：

1
@import "gitalk";

在 layout/_partials/comments.swig 里面加入

1
2
3
4
{% elseif theme.gitalk.enable %}
  <div id="gitalk-container">
  </div>
{% endif %}

在主题配置文件_config.yml

1
2
3
4
5
6
7
8
gitalk:
  enable: true
  githubID:   # MUST HAVE, Your Github Username    
  repo:       # MUST HAVE, The name of the repo you use to store Gitment comments
  ClientID:   # MUST HAVE, Github client id for the Gitment
  ClientSecret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
  adminUser: isLouisHsu
  distractionFreeMode: true

Reference

基于hexo+github搭建一个独立博客 - 牧云云 - 博客园 https://www.cnblogs.com/MuYunyun/p/5927491.html
hexo+github pages轻松搭博客(1) | ex2tron’s Blog http://ex2tron.wang/hexo-blog-with-github-pages-1/
hexo下LaTeX无法显示的解决方案 - crazy_scott的博客 - CSDN博客 https://blog.csdn.net/crazy_scott/article/details/79293576
在Hexo中渲染MathJax数学公式 - 简书 https://www.jianshu.com/p/7ab21c7f0674
怎么去备份你的Hexo博客 - 简书 https://www.jianshu.com/p/baab04284923
Hexo中添加本地图片 - 蜕变C - 博客园 https://www.cnblogs.com/codehome/p/8428738.html?utm_source=debugrun&utm_medium=referral
hexo 搜索功能 - 阿甘的博客 - CSDN博客 https://blog.csdn.net/ganzhilin520/article/details/79047983
为 Hexo 博客主题 NexT 添加 LiveRe 评论支持 https://blog.smoker.cc/web/add-comments-livere-for-hexo-theme-next.html
终于！！！记录如何在hexo next主题下配置gitalk评论系统 https://jinfagang.github.io/2018/10/07/终于！！！记录如何在hexo-next主题下配置gitalk评论系统/