第一篇文章记录下博客搭建与latex环境

一、软件

  1. 下载并安装node.js和git
  2. node.js网址,检查方法:cmd里输入node -vnpm -v
  3. git的国内镜像源,git是用来上传到github的

二、博客

  1. 创建一个文件夹,用于专门放博客的内容,如在D盘新建blog的文件
  2. 打开CMD,输入d:cd blog,定位到blog文件夹啊
  3. 在输入npm i -g hexo,这里可以使用淘宝的镜像源,注意cnpm可以代替npm
    • 这里可以使用淘宝的镜像源npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 然后再输入npm i -g hexo,或者cnpm i -g hexo更快
  4. 输入hexo init,完成hexo的安装
  5. 输入hexo install,安装组件(虽然不知道这个组件有啥用)
  6. 在自己的电脑上检查
    • 输入hexo g
    • 输入hexo s,这个可以在游览器上输入localhost:4000

三、github账号

  1. 在GitHub上安装仓库,这个仓库用来存放博客,名字就是XXX.github.io。换句话理解,就是将博客放到github上。
  2. 配置SSH key,这个key可以理解为许可证。上传就不用每次输入github的密码了。
    • git bash中输入cd ~/. ssh
    • 输入ssh-keygen -t rsa -C 'xxx@xx.com',生成类似许可证的东西
    • 在C盘,用户文件夹里找到.ssh文件夹,打开id_rsa.pub文件,全部复制
    • 在GitHub上,打开settings,打开SSH and GPG keys,点New SSH key,将复制的内容粘贴到Key中,title随便写
    • git bash中输入ssh -T git@github.com测试上述步骤是否成功
    • git bash中输入git config --global user.name "GitHub名字"
    • git bash中输入git config --global user.email "GitHub注册邮箱"
  1. 第一次上传需要的命令和配置,在blog的文件夹里,打开_config.yml并在里面更改
1
2
3
4
deploy:
type: git
repository: git@github.com:名字/名字.github.io.git
branch: master
  1. 最后输入命令
1
npm install hexo-deployer-git --save
  • 博客常用命令,在git bash中输入
1
2
3
4
5
6
7
8
9
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
hexo s #生成并本地预览
hexo d #生成并上传
  • 插入图片

    • 安装插件cnpm install hexo-asset-image --save
    • 在基本配置上改post_asset_folder: true
    • 替换/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
'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();
}
}
});
  • 测试是否成功上传图片

  • latex,这是latex:$\alpha$

    • 卸载插件npm uninstall hexo-renderer-marked
    • 安装插件npm install hexo-renderer-kramed --save
    • 在站点的_config.yml里加入
1
2
3
4
5
6
7
8
kramed:
gfm: true
pedantic: false
sanitize: false
tables: true
breaks: true
smartLists: true
smartypants: true

四、主题

  • 虽然用了next,但还是觉得太简洁了,换成butterfly了

  • butterfly

1
2
3
4
5
6
7
8
# 记录下front-matter
title: 博客搭建
date: 2020-04-20 15:03:57
description: hexo博客搭建的方法
categories:
- 博客
top_img: hexo.jpg
cover: img/cat.jpg
  • 这里top_img的图片放到markdown的同名文件夹中就ok了
  • 但是cover要放到img里去,不知道为啥这个路径是这样的