博客：1.vuepress搭建

鹿酒 2022/5/25 Github Pagevuepress

使用vuepress渲染博客，优点是这个可以既渲染文档有渲染博客，缺点是这个主题略少一些，我作为学习来使用这个

# 搭建本地环境

官方文档 (opens new window)

先新建项目目录
添加 vuepress 包：yarn add -D vuepress
文章中使用命令添加我使用从hexo迁移来的markdown
按照使用习惯在 package.json 中添加script：本地服务：vuepress dev docs、编译构建：vuepress build docs
添加主题，主题从 github (opens new window) 获取，或者网上搜索到中意的开源主题，我选择了vuepress-theme-reco-1.x (opens new window)yarn add vuepress-theme-reco，官方文档 (opens new window)中说明了主题的具体配置
创建/docs/blogs目录，并拷贝原本的md文件到目录中（目录中也可以随意添加文件夹组成方便使用的结构）
打开文件/docs/.vuepress/config.js并添加配置
添加/docs/.vuepress/styles/index.styl文件目录（会被自动引入）

# 从hexo迁移

直接复制 .md文件到/docs/blogs目录中就可以了。

目前只发现2个小问题：

原本不是很注意md文档的格式，所以有些地方不是很符合规范，所以我在vs code中添加了 markdownlint 插件用来格式化文档
列表下面跟着使用代码块多时候，渲染出来的文档中代码块有时会重复渲染，

# config.js

vurpress 与主题的模版都在这个 js 中配置，在看文当的时候需要注意不要弄串了。

module.exports = {
  title: "",
  description: '',
  head:[
    ['link', {rel:'icon', href:'/favicon.ico'}],
    //  manifest add
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['meta', { name: 'theme-color', content: '' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }], // 删除默认的苹果工具栏和菜单栏
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }], // 控制状态栏显示样式
    ['link', { rel: 'apple-touch-icon', href: '' }], //苹果收藏书签图标
    ['link', { rel: 'mask-icon', href: '/favicon.ico', color: '' }],
    ['meta', { name: 'msapplication-TileImage', content: '' }], // windows 磁贴图
    ['meta', { name: 'msapplication-TileColor', content: '' }], // windows 磁贴文字颜色
    ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' }] // 禁止缩放
  ],
  markdown: {
    lineNumbers: true // 代码块左侧显示行数
  },
  // evergreen: true, // 不用支持老的浏览器
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  theme: 'reco',
  themeConfig: { // 博客配置
    type: 'blog',
    mode: 'light', // 默认 auto，auto 跟随系统，dark 暗色模式，light 亮色模式
    modePicker: false, // 默认 true，false 不显示模式调节按钮，true 则显示
    logo: '', // 顶部左侧logo
    author: '', // 内容右侧作者头像
    authorAvatar: '', // 作者名称
    friendLink: [ // 右侧底部 友情链接
      { title: '',desc: '',logo: "",link: '' }
    ],
    noFoundPageByTencent: true, // 404 公益
    startYear: '',
    sidebar: 'auto',
    subSidebar: 'auto',
    nav: [ // 导航右侧链接 
      { text: '', link: '', icon: '' }
    ],
    blogConfig: {
      category: {
        location: 2, // 在导航栏菜单中所占的位置，默认2
        text: '分类' // 默认文案 “分类”
      },
      tag: {
        location: 2, // 在导航栏菜单中所占的位置，默认3
        text: '标签', // 默认文案 “标签”
      },
      socialLinks: [ // 信息栏展示社交信息
        { icon: '', link: '' },
      ]
    },
    // 备案
    // record: 'ICP 备案文案',
    // recordLink: 'ICP 备案指向链接',
    // cyberSecurityRecord: '公安部备案文案',
    // cyberSecurityLink: '公安部备案指向链接',
  },
  // 插件
  plugins: [
    ['vuepress-plugin-mermaidjs'],
    ['@vuepress/medium-zoom']
    // 更新刷新插件
    ['@vuepress/pwa', {
      serviceWorker: true,
      updatePopup: {
        message: "发现新内容可用",
        buttonText: "刷新"
      }
    }],
    // 代码复制弹窗插件
    ["vuepress-plugin-nuggets-style-copy", {
      copyText: "复制代码",
      tip: {
        content: "复制成功!"
      }
    }],
    // 动态标题
    ["dynamic-title",
      {
        showIcon: "/favicon.ico",
        showText: "(/≧▽≦/)Hi~！",
        hideIcon: "/favicon.ico",
        hideText: "(●—●)看这里～看这里！",
        recoverTime: 2000
      }
    ],
    // Mini Sandbox
    // https://buuing.github.io/mini-sandbox/#/
    ['vuepress-plugin-mini-sandbox'],
  ],
}

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

# 修改主题

样式通过入口文件index.styl来修改，使用标准的stylus语法，例如：

@require './palette.styl'

header.navbar
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);

1
2
3
4
5

# 访问图片

一般教程中都会建议使用图床来保存博客图片我之前也是这样使用的，其实如果图片的量使用的不大，可以选择直接保存到项目中，

# 不使用图床

根据官方文档 (opens new window)的大小限制显示：

GitHub Pages 源存储库的建议限制为 1 GB
GitHub Pages 站点的软带宽限制为每月 100 GB
如果您的请求触发了速率限制，您将收到一个带有 429 HTTP 状态代码的适当响应，以及一个信息丰富的 HTML 正文

一般来说只要图片不是很多，应该是不会超过限制，而且如果超出也不会限制你，只是可能会返回429状态。

需要注意的是在文档中对图片的取值方式，建议如下处理： <img src="/blog/images/XXX.png">

# 使用图床

免费图床，网上有很多，有的图床甚至支持你使用api上传，可以写脚本在打包之后执行上传/替换操作
付费图床，比如七牛云，免费10GB，但是需要有个域名

# 部署

# Github Pages

建议看官方文档说明 (opens new window)

# 一般情况
npm run docs:build
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 可以手动 也可以新建一个shell文件 自动执行

1
2
3
4
5
6
7
8
9

# 云服务器

稍微复杂一点，需要使用ssh2来链接云服务器并上传文件到指定目录

const cp = require('child_process');
const ssh2 = require('ssh2');
const { resolve } = require('path');
// 压缩脚本路径 一定要双引号
const script = `"${resolve(__dirname, './pack.sh')}"`;
// 执行脚本获取输出流
let pro = cp.exec(script, (error) => {
  if (error) {
    console.error('------------compress err------------\n', error);
  }
});
pro.stdout.pipe(process.stdout);
pro.on('exit', () => {
  connect();
});

// ssh客户端实例
const conn = new ssh2.Client();
/**连接服务器配置 */
const clientConfig = {
  host: '',
  port: 22,
  username: '',
  password: '',
};
// 部署根目录
const deployRootDir = '/www/';
// 部署目录
const deployDir = 'home';
// 部署文件压缩包
const deployFile = 'deploy.tar.gz';

// 建立ssh 连接并上传
const connect = () => {
  conn
    .on('ready', () => {
      upload();
    })  
    .connect(clientConfig);
};

/**上传文件到服务器 */
const upload = () => {
  conn.sftp((err, sftp) => {
    // 开始上传 参数依次为： 本地要上传的路径，目标路径，上传配置，回调
    sftp.fastPut(resolve(__dirname, `./${deployFile}`), `${deployRootDir}${deployFile}`, {}, (err) => {
      shell();
    });
  });
};

const shell = () => {
  /**
   * 1.备份数据到bak目录下，并以时间戳命名
   * 2.清空原解压文件夹所有文件
   * 3.解压到指定文件夹
   * 4.删除原压缩文件
   */
  conn.shell((err, stream) => {
    stream
      .end(`
        cd ${deployRootDir}
        cp ${deployFile} bak/bak.$(date "+%Y.%m.%d_%H:%M").tar.gz
        rm -rf ${deployDir}/*
        tar -zxvf ${deployFile} -C ${deployDir}
        rm -rf ${deployFile}
        exit
      `)
      .on('close', () => {
        conn.end();
        console.log('------------connect end------------\n');
      });
  });
};

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
70
71
72
73
74

# pack.sh
yarn run build
rm ./deploy/deploy.tar.gz
tar -cvzf ./deploy/deploy.tar.gz ./dist

1
2
3
4

鹿酒的博客