image frame

博客

知足常乐

63.将Hexo推送至Github Pages

hexo-deployer-git的GitHub项目页：点击此处

1.安装hexo-deployer-git插件

1
npm install hexo-deployer-git --save

2.修改blog文件夹下的_config.yml
修改前：

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

修改后：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/kukusun/kukusun.github.io.git
  branch: master

3.推送至Github Pages
在自己的GitHub帐号中创建一个repository，名称为：用户名.github.io
设置git的邮箱与名称，以前设置过就无需再次设置

1
2
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

用命令推送：

1
hexo d

此时可能需要设置GitHub帐号的登陆，可以直接登录，也可以用token方式推送Blog
如果选择用token方式则点击此处跳转token管理界面
token创建步骤

  • 右上角Generate new token处选择Generate new token (classic)
  • Note写入自定义的名称
  • Expiration设置过期时间
  • Select scopes中将repo栏中的选项全部勾选

62.为Hexo文章生成永久固定链接

hexo-abbrlink的GitHub项目页：点击此处

1.安装hexo-abbrlink插件

1
npm install hexo-abbrlink --save

2.修改blog文件夹下的_config.yml
修改前：

1
2
3
4
5
6
7
8
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

修改后：

1
2
3
4
5
6
7
8
9
10
11
12
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
#permalink: :year/:month/:day/:title/
permalink: posts/:abbrlink.html
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

3.修改blog –> node_modules –> hexo-asset-image文件夹下的index.js
修改前：

1
2
3
4
5
6
7
8
9
if(/.*\/index\.html$/.test(link)) {
  // when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
  // image in xxtitle/ will go to xxtitle/index/
  appendLink = 'index/';
  var endPos = link.lastIndexOf('/');
}
else {
  var endPos = link.length-1;
}

修改后：

1
2
3
4
5
6
7
8
9
if(/.*\/index\.html$/.test(link)) {
  // when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
  // image in xxtitle/ will go to xxtitle/index/
  appendLink = 'index/';
  var endPos = link.lastIndexOf('/');
}
else {
  var endPos = link.length-5;
}

参考出处：点击此处

61.为Hexo启用文章加密

hexo-blog-encrypt的GitHub项目页：点击此处

1.安装hexo-blog-encrypt插件

1
npm install hexo-blog-encrypt --save

2.修改配置文件
修改blog文件夹下的_config.yml，追加以下内容：

1
2
3
4
5
# hexo-blog-encrypt
encrypt: 
  abstract: 该文章已加密，请输入密码后查看
  message: 请在此处输入密码
  wrong_pass_message: 密码不太对哦，请重新输入！

abstract为主页显示的加密提示语
message为密码输入框的提示语
wrong_pass_message密码输入错误的提示语
3.修改blog –> node_modules –> hexo-blog-encrypt –> lib文件夹下的hbe.js(非必要步骤)
修改前

1
2
3
4
const hideButton = document.createElement('button');
hideButton.textContent = 'Encrypt again';
hideButton.type = 'button';
hideButton.classList.add("hbe-button");

修改后

1
2
3
4
const hideButton = document.createElement('button');
hideButton.textContent = '重新进行加密';
hideButton.type = 'button';
hideButton.classList.add("hbe-button");

4.在需要加密的文章头部添加password选项

60.为Hexo启用文章搜索功能

hexo-generator-search的GitHub项目页：点击此处

1.为hexo添加hexo-generator-search插件

1
npm install hexo-generator-search --save

2.修改配置文件
对blog文件夹下的_config.yml添加以下内容

1
2
3
4
# hexo-generator-search
search:
  path: search.xml
  field: post

59.为Hexo启用图片功能

hexo-asset-image的GitHub项目页：点击此处

1.修改blog文件夹下的_config.yml里的post_asset_folder: false为post_asset_folder: true
2.为hexo添加hexo-asset-image插件

1
npm install hexo-asset-image --save

修改blog –> node_modules –> hexo-asset-image –> index.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
58
59
60
61
62
63
64
65
66
67
68
69
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    var link = data.permalink;
    var beginPos = getPosition(link, '/', 3) + 1;
    var appendLink = '';
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    // if not with index.html endpos = link.lastIndexOf('.') + 1 support hexo-abbrlink
    if(/.*\/index\.html$/.test(link)) {
      // when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
      // image in xxtitle/ will go to xxtitle/index/
      appendLink = 'index/';
      var endPos = link.lastIndexOf('/');
    }
    else {
      var endPos = link.length-1;
    }
    link = link.substring(beginPos, endPos) + '/' + appendLink;

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];

      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
        if ($(this).attr('src')){
          // For windows style path, we replace '\' to '/'.
          var src = $(this).attr('src').replace('\\', '/');
          if(!(/http[s]*.*|\/\/.*/.test(src)
            || /^\s+\//.test(src)
            || /^\s*\/uploads|images\//.test(src))) {
            // For "about" page, the first part of "src" can't be removed.
            // In addition, to support multi-level local directory.
            var linkArray = link.split('/').filter(function(elem){
              return elem != '';
            });
            var srcArray = src.split('/').filter(function(elem){
              return elem != '' && elem != '.';
            });
            if(srcArray.length > 1)
            srcArray.shift();
            src = srcArray.join('/');

            $(this).attr('src', config.root + link + src);
            console.info&&console.info("update link as:-->"+config.root + link + src);
          }
        }else{
          console.info&&console.info("no src attr, skipped...");
          console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});

3.把图片放入blog –> source –> _posts的文章同名文件夹下
4.添加图片

1
2
3
4
使用方法
![你想输入的替代文字](xxxx/图片名.jpg)
举例：
![](53-Windows%E4%B8%8B%E5%AE%89%E8%A3%85Apache/53-1.png "")

58.用Hexo制作个人博客

Hexo官网：https://hexo.io
Hexo主题Ayer：https://github.com/Shen-Yu/hexo-theme-ayer
Git官网：https://git-scm.com
Node.js官网：https://nodejs.org

1.安装Git和Node.js

访问Git官网和Node.js官网，Git下载64位版本即可，Node.js下载长期维护版(LTS)，如无特殊需求，两个组件均一直按下一步按照默认的安装就可以。
桌面右键菜单有Git选项就是安装成功。在CMD中输入node -v如果有显示版本号则Node.js也安装成功

2.安装Hexo

先新建一个文件夹，进入新建的文件夹中选择右键菜单的Git Bash Here，在出现的Git窗口中文件路径会显示为刚才新建文件夹的路径。接着依次输入下面的命令

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo s

命令执行完成后访问Git窗口中出现的网址(localhost:port)即可浏览刚刚创建好的博客网站

3.添加一篇文章

在blog文件夹中选择右键菜单的Git Bash Here，输入下面的命令创建新文章

1
hexo new "文章的标题"

创建好的文章在blog –> source –> _posts文件夹中，文章为Markdown文件

4.生成文章的网页文件

输入下面的命令，将新文章的md文件生成为网页文件

1
hexo g

如需查看用hexo s命令

5.更换Hexo的主题(非必要步骤)

这里以Ayer主题为例子，别的主题请参考对应说明文件
Ayer主题使用说明：https://shen-yu.github.io/2019/ayer

1.进入blog文件夹并选择右键菜单的Git Bash Here输入下面的命令

1
git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer

执行完成后blog –> themes文件夹中会出现ayer文件夹，ayer文件夹存放了该主题的所有文件
2.修改blog文件夹下的_config.yml，将theme的值改为主题文件名(theme: ayer)
3.使用hexo g和hexo s查看更换主题后的网页样式

  • Copyrights © 2023-2024 kukusun