description: “使用Hexo搭建属于自己的博客”
作者:大超 转载请标明出处
1.安装Node.js(过程省略)
2.查看Node.js的版本
【win+R输入cmd以下同】 node -v
3.查看npm的版本
npm -v
4.切换成国内的打包工具(使用淘宝的)
npm install -g cnpm --registry=https://registry.npm.taobao.org
5.查看cnpm的版本
cnpm -v
6.安装博客的框架(hexo)
cnpm install -g hexo-cli
7.查看hexo框架的版本
hexo -v
8.安装git(具体步骤省略)
9.创建一个本地目录(最好不要放到c盘)
E:/blog
10.初始化hexo
【在E:/blog中运行cmd以下同】hexo init
会自动下载hexo框架
11.启动hexo服务
hexo s
(s:start server)
12.访问
http://localhost:4000/
13.创建一个自己的博客
hexo n ""
14.创建git的仓库
https://gitee.com/AngeGit/TestBlog.git
15.安装git的部署工具
cnpm install --save hexo-deployer-git
16.修改blog根目录下的_config.yml
deploy:
type: 'git'
repo: https://gitee.com/AngeGit/TestBlog.git
branch: master
17.报错
git config --global user.name "ange"
git config --global user.email "1351261434@qq.com"
ssh-keygen -t rsa -C "1668455462@qq.com"
18.发布项目到码云
hexo d
19.使用Gitee Pages 服务发布项目成一个网站
20.添加样式
修改blog根目录下的_config.yml
url: http://angegit.gitee.io
root: /testblog/
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
21.修改hexo的主题
使用yilia-plus
cd ./themes/
git clone https://github.com/JoeyBling/hexo-theme-yilia-plus.git
mv hexo-theme-yilia-plus yilia-plus
22.显示侧边栏
cnpm i hexo-generator-json-content --save
编辑 _config.yml 添加如下内容
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
23.图片不显示问题
- 安装和配置插件
首先我们需要安装一个图片路径转换的插件,这个插件名字是hexo-asset-image
npm install https://github.com/CodeFalling/hexo-asset-image --save
但是这个插件的内容需要修改【不然可能会出Bug】
打开/node_modules/hexo-asset-image/index.js,将内容更换为下面的代码
'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;
}
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();
}
}
});
打开_config.yml文件,修改下述内容
post_asset_folder: true
搞定!