博客搭建

Posted on | In

博客搭建

环境搭建

安装 node.js 和 Git

Hexo 基于 Node.js，搭建过程中还需要使用 npm（Node.js 已带） 和 git，因此先搭建本地操作环境，安装 Node.js 和 Git。

Node.js: https://nodejs.org/

Git: https://git-scm.com/

下载安装基本默认，点击下一步直到安装完成。

验证是否安装完成：

1
2
3
node -v 
npm -v 
git --version

配置Github

打开 Git Bash, 设置 git 代理：

1
2
3
4
5
6
7
8
9
10
11
12
设置代理：
git config --global http.proxy 'http://127.0.0.1:1080' 
git config --global https.proxy 'https://127.0.0.1:1080'

查看代理：
git config --global --get http.proxy
git config --global --get https.proxy

取消代理：
git config --global --unset http.proxy
git config --global --unset https.proxy

设置用户名和邮箱

1
2
git config --global user.name "Name"
git config --global user.email "Email"

创建SSH密钥：

1
ssh-keygen -t rsa -C "Name"

查看密钥：

1
cat C:/User/用户名/.ssh id_rsa.pub

登录 Github 进入 Settings 页面，选择 SSH and GPG keys ，点击 New SSH key。Title 随便取个名字，粘贴复制的 id_rsa.pub 内容到 Key 中，点击 Add SSH key 完成添加

image-20210715090449869

验证连接：

1
ssh -T [email protected]

出现 You’ve successfully authenticated…. 即连接成功

创建 Github Pages 仓库：

GitHub 主页右上角加号 -> New repository，Repository name 中输入 name.github.io , 选择Add a README file , 填好后点击 Create repository 创建。

image-20210715091651156

创建后默认自动启用 HTTPS，博客地址为https://i01ortal.github.io

安装Hexo

创建一个空文件夹来存在 Hexo 的文件，在该处打开 Git bash。

设置 npm 源:

1
npm config set registry https://registry.npm.taobao.org

安装 hexo :

1
npm install -g hexo-cli

Hexo 初始化和安装组件：

1
hexo init      # 初始化npm install    # 安装组件

完成后启动本地服务器预览：

1
hexo g   # 生成页面hexo s   # 启动预览

访问 http://localhost:4000， 出现 Hexo 默认页面

Hexo 目录结构：

1
2
3
4
5
6
7
8
9
10
11
|-- _config.yml					//网站的全局配置文件
|-- node_modules				//nodejs库文件
|-- scaffolds					//模板文件
|-- source						//文章保存文件夹
   |-- _posts					//文章保存目录
|-- public						//编译后indexd等存放
|-- themes						//主题
|-- .gitignore					//声明不被 git 记录
|-- db.json						//source目录下数据
|-- package.json				//框架的基本参数信息
|-- package-lock.json			//上面备份

Next 主题配置

安装 Next :

1
cd your-hexo-sitegit clone https://github.com/iissnan/hexo-theme-next themes/next

打开站点配置文件 _config.yml ，找到 theme 字段，并将其值更改为 next

1
# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next

验证主题：

1
hexo s --debug

访问报错：

1
{% extends ‘_layout.swig‘ %} {% import ‘_macro/post.swig‘ as post_template %}.....

hexo在5.0之后把 swig 给删除了需要自己手动安装

1
npm i hexo-renderer-swig

无其他错误后本地访问：

image-20210715094704582

上传Github

freenom 域名注册：

freenom 能免费注册域名，且可以匿名注册，https://freenom.com .

image-20210722085650816

设置 dns 指向 github :

image-20210722100231015

image-20210722100321663

在 source 目录下新建 CNAME 文件：

image-20210722101117861

更改网站配置处 deploy :

1
2
3
4
deploy:
  type: git
  repo: https://github.com/i01ortal-Blog
  branch: master

安装 hexo-deploy-git 插件：

1
npm install hexo-deploy-git --save

hexo 上传 github :

1
2
3
4
hexo new "文章"
hexo clean 
hexo g
hexo d

image-20210722193559202

到此博客搭建完成。

发布文章

写文章需要插入图片时，安装 hexo-asset-image(hexo以下) :

1
npm install hexo-asset-image --save

该插件存在问题需修改下 hexo-asset-image 目录下 index.js

PS-已过时，最新使用

1
npm install hexo-asset-image-for-hexo5
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();
    }
  }
});

markdown 编辑器 ：

推荐使用 Typora 来进行文章编写，下载地址：

https://typora.io/

文章折叠：

1
2
3
4
5
This is a page.
.....
<!-- more -->
.....
...

每次发布文章则需要执行下面命令：

1
2
3
hexo clean
hexo g
hexo d

文章目录设置：

在 custom.styl 文件中添加 

1
2
3
4
5
//文章目录默认展开
.post-toc .nav .nav-child { display: block; }
.post-toc ol {  
  font-size : 13px;     
}

点击中文目录无法跳转：

修改 js/src/post-details.js 文件

1
2
# 第75行下添加
targetSelector = decodeURI(this.getAttribute('href')) //对获取到url重编码