简介

hexo是一个开源的博客系统，对md有很好的支持，在本地安装后，可以推送到git上开启page即可使用github的服务器资源

优点：

  • md格式本身的通用性强，且无迁移成本
  • Typora编辑md非常方便
  • hexo的页面优化做得不错，解除软件和终端的限制
  • 点名批评有道云，对md的支持是真的差，还有致命bug

缺点：

  • 多端编辑不方便，需要搭建环境，列举一些解决的思路
    • 封装为Docker，进行一键化环境部署
    • 在服务端的admin中进行简单的编辑

一、首次搭建

安装

依赖 nodejs，这里不赘述 nodejs 安装方式，请先安装 nodejs 和 npm 后继续

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 安装hexo依赖
npm install -g hexo-cli

# 创建文件夹初始化一个hexo项目
mkdir blog
hexo init

# 看下生成了一下目录文件
ls
_config.landscape.yml node_modules          scaffolds             themes
_config.yml           package.json          source                yarn.lock

# 静态部署和启动服务
hexo g
hexo s

访问 localhost:4000 出页面则本地安装成功

git 部署

  • 在 git 上创建一个项目 fireflyso/fireflyso.github.io

  • 修改本地配置文件_config.yml

    1
    2
    3
    4
    deploy:
      type: git
      repository: git@github.com:fireflyso/fireflyso.github.io.git  #你的仓库地址
      branch: master

  • 安装部署插件：npm install hexo-deployer-git --save

  • 部署

    1
    2
    3
    hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
    hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
    hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

定制化

  • 安装主题，官方教程
    # 使用 gitee 安装，github 网络不稳定
    git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

    1
    2
    3
    4
    5
    # 修改hexo根目录_config.yml文件
    theme: butterfly

    # 安装渲染器（非必要）
    npm install hexo-renderer-pug hexo-renderer-stylus --save

  • 安装 admin 插件
    npm install –save hexo-admin

二、新设备搭建

下面的方式太繁琐了，后面封装为 Docker

  • 克隆 git 项目
  • 环境依赖
1
2
3
4
5
6
7
nodejs
npm install -g hexo-cli
npm install hexo-deployer-git --save
npm install --save hexo-admin
# 字数统计
npm install hexo-wordcount --save
npm install hexo-asset-image --save

三、相关配置

Typora 配置

图床配置

方法一

图片插入

在 Typora 的偏好设置中选择图像，配置插入图片时，自动将图片复制到./img 目录中

image-20230414194621453

打包插件（未完成）

需要安装插件 npm install hexo-asset-image --save，该插件原本是适配方案三的，需要进行修改，将 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');
const fs = require('fs');

// 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;
  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 + 'img/' + src);

          // console.info&&console.info("update link as:-->"+config.root + link + src);
          var bash_path = data.asset_dir.split('_posts')[0]
          var img_path = decodeURI(bash_path + '_posts/' + link.split('/').slice(3,-2).join('/') + '/img/' + src)
          var target_path = decodeURI(bash_path + 'img/' + src)
          fs.copyFile(img_path, target_path, (err) => {
            if (err) throw err;
            console.log(target_path + ' File was copied successfully!');
          });

        }
      }else{
        console.info&&console.info("no src attr, skipped...");
        console.info&&console.info($(this));
      }
    });
    data[key] = $.html();
  }
});
  • 将各个 img 目录下的图片统一复制到 blog/source/img 中，hexo 打包时将此目录文件复制到 public 的更目录，从而到达服务端访问目的
  • 将 md 中图片的路径从 img/123.png 修改为 /img/123.png 来保证服务端通过绝对路径访问

方法二 （已放弃）

路径配置

首先在 hexo 项目的 source 目录下创建文件夹 img 用于存储图片，hexo 项目在打包的时候会将该文件夹复制到更目录下，所以对于服务端的页面来说，图片的访问地址为 img/123.png，但是 Typora 通过这个绝对路径是无法找到图片的

配置图片根目录：菜单栏中’格式’–图像–设置图片根目录（设置为 hexo 的 source 目录）

图片插入

在 Typora 的偏好设置中选择图像，配置插入图片时，自动将图片复制到 hexo 的 source/img 目录中，图床脚本可以下岗了

image-20230414194621453

方法三

一个比较通用的方法，hexo 打开相关配置，在使用自己的命令创建文章的时候会生成一个同名的文件夹，用于存放该 md 的图片，后续打包过程中将 md 中图片的路径进行修改，来达到资源访问，这种方法逻辑有些绕，且会创建好多相关文件夹，让文件目录看起来混乱，这里就不进行详细说明了，可以自行搜索插件 hexo-asset-image

四、云服务器搭建

将 hexo 部署到自己的云服务器上

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
# 添加一个叫git的账号，并且给找个账号授权、设置密码
adduser git
chmod 740 /etc/sudoers
vi /etc/sudoers
#在 root    ALL=(ALL)       ALL下面添加一行配置：git ALL=(ALL) ALL
chmod 400 /etc/sudoers
sudo passwd git

# 创建ssh秘钥并将本地的秘钥拷贝到服务器认证，这样后续就可以通过git方式访问服务器
su git
cd ~
mkdir .ssh
cd .ssh
ssh-keygen
cp id_rsa.pub authorized_keys
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh
# 将本地id_rsa.pub内容拷贝到云服务authorized_keys文件末尾

# 创建静态页面文件目录，创建git仓库
mkdir -vp ~/blog_page
cd ~
git init --bare blog.git
vi ~/blog.git/hooks/post-receive
# 内容为：git --work-tree=/data/blog_page --git-dir=/home/git/blog.git checkout -f
chmod +x ~/blog.git/hooks/post-receive

# 实际指定的静态目录为/data/blog_page，需要root去创建，并且把权限给出来
su root
chmod +777 /data
chmod +777 /data/blog_page

hexo 配置

修改 hexo 配置文件_config.yml

1
2
3
4
deploy:
  type: git
  repository: git@49.0.0.109:/home/git/blog.git
  branch: master

nginx 配置

服务器上启动 Nginx 作为服务器访问静态页面，在 /data/nginx 目录下创建 Nginx 配置文件 host.conf，内容如下

1
2
3
4
5
6
7
server{        
        listen    80;		# 端口
        root /data/blog_page;	# 静态页面路径，要和上面git仓库配置路径对应上
        server_name test.top;	# 这个好像没啥用
        location /{        
        }
}
  • 启动 Nginx：docker run -d --net=host -v /data/nginx/:/etc/nginx/conf.d/ -v /data/blog_page:/data/blog_page --name nginx nginx

由于监听了 80 端口，直接通过服务器 IP 即可访问到了，如果出现访问失败，请检查以下几个配置：

  • 数据推送确认：通过 ssh -v git@49.0.0.109，能够正常免密登录说明 git 配置成功，本地通过 hexo d 推送数据，查看云服务器上 git 仓库是否正常同步数据，以及静态页面目录数据同步情况
  • nginx 启动的时候要将本地的静态资源映射到容器内，且 nginx 配置文件中的路径要对应上

五、网站分析

既然都搭建到个人云服务器上了，那就可以做一些 SEO 和分析的工作

  • Google analysis：Google 的分析平台，帮助分析网站访客信息，具体配置方法自行搜索，非常简单
  • Google Search Console：Google 搜索引擎的 sitemap 管理平台，这里稍微解释一下，如何让自己的网站页面出现在 Google 的搜索引擎结果中，也就是让别人用 Google 搜索的时候能出现你的网页，这样才会有更多的访问流量，Google 的爬虫自己会去爬取网站页面，但是速度会比较慢，我们可以手动将网站的页面以 xml 的数据格式记录下来提交给 Google，这样就能快速的被 Google 收录
  • 百度 sitemap：这个没搞过后面补充

sitemap

上面说到将网站中页面记录到 xml 文件中，这个事情可以自己写脚本去做，也有现成的插件：hexo-generator-sitemap

  • 访问 git 主页，按说明安装配置

    1
    2
    3
    4
    5
    6
    7
    8
    # 在_config.yml配置文件中添加一下内容
    sitemap:
      path:
        - sitemap.xml
      template: ./sitemap.xml
      rel: false
      tags: true
      categories: true

  • 注意需要在 hexo 跟目录创建一个 sitemap.xml 文件，且将标准模板内容复制进去

  • 然后确认_config.yml 配置文件中 url 参数内容与自己的域名对应上，默认为 example.com，sitemap 插件需要根据 url 去生成内容

  • 执行hexo clean && hexo g && hexo s 就会生成 sitemap 文件了

提交 sitemap

确认一下 sitemap 文件，访问 http://localhost:4000/sitemap.xml，能访问则成功了 ，404 说明插件没有正常运行请到 git 主页寻求帮助

最后将 sitemap 地址提交给 Google 和百度或者任意的搜索引擎