参考文章：
个人博客网站：
搭建前提准备：
- node环境
- GitHub账号
- 安装有git，并配置了用户以及ssh密钥
大致流程为：
在GitHub上面初始化一个仓库，开放master主干为GitHub Pages的源文件，复制该仓库的ssh地址。在本地通过初始化hexo根目录，并安装所需依赖，配置_config.yml文件，安装hexo提供的上传插件，生成博客并上g传到GitHub上面
0.记录点不同
大致的流程都在参考文章有了详细的描述，这里只记录自己根据参考文章实现的过程中遇到的一些小的坑
一.关于_config.yml的配置
这里只记录配置第一次博客上传的要点
1.上传地址的配置
上传地址的配置关系着能否准确的连接仓库完成上传指令
以下是我的上传配置
deploy:
type: git
repo: git@github.com:Abell99/Abell99.git
branch: master
1.1repo的准确获取
- 找到目标仓库
- 使用ssh连接
- 复制上传地址
2020042501.png
2.css样式的地址配置
因为上传到仓库后，引用地址发生改变，因此我们需要配置基准地址，以确保在上传至仓库后，css样式得以完整的显示
以下是我的配置
url: https://abell99.github.io
root: /Abell99/
细节：url为网址，root为仓库名，区分大小写，url地址最后不跟“/”，而root要使用“/”包住
注意：url,root并非必须设置成这样，可根据资源所在位置进行调整。
2.1url地址的获取
2020042502.png
2020042503.png
- 打开仓库设置界面
- 找到GitHub Pages下提供的url地址
二.新建文章以及图片显示问题
默认的新建文章是不配对应的图片文件的，需要安装插件
1.配置_config.yml
- post_asset_folder的值设为true
2.安装插件
npm install https://github.com/CodeFalling/hexo-asset-image --save
3.修改插件内容
- 打开/node_modules/hexo-asset-image/index.js，将内容更换为下面的代码
'use strict';
var cheerio = require('cheerio');
function getPosition(str, m, i) {
return str.split(m, i).join(m).length;
}
var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
var config = hexo.config;
if(config.post_asset_folder){
var link = data.permalink;
if(version.length > 0 && Number(version[0]) == 3)
var beginPos = getPosition(link, '/', 1) + 1;
else
var beginPos = getPosition(link, '/', 3) + 1;
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
var endPos = link.lastIndexOf('/') + 1;
link = link.substring(beginPos, endPos);
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)) {
// 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();
}
}
});
4.引入方法
图示文件地址目录结构
如何在博客文档中插入图片
---图片1.jpg
如何在博客文档中插入图片.md
- 使用
[图片上传失败...(image-d560b6-1587900101516)]
