博客配置和部署

# 博客相关技术栈

博客框架采用VuePress (opens new window)，主题是vuepress-theme-Vdoing (opens new window)

# 页面配置

# config文件配置

// .vuepress/config.js
module.exports = {
  // 插件配置
  plugins: [
    // 'vuepress-plugin-baidu-autopush', // 百度自动推送
    // 可以添加第三方搜索链接的搜索框（原官方搜索框的参数仍可用）
    [
      'thirdparty-search',
      {
        thirdparty: [
          {
            title: '在github中搜索',
            frontUrl: 'https://github.com/search?q='
          },
          {
            title: '在百度中搜索',
            frontUrl: 'https://www.baidu.com/s?ie=UTF-8&wd='
          },
          {
            title: '在stackOverflow中搜索',
            frontUrl: 'https://stackoverflow.com/search?q='
          },
          {
            title: '在Bing中搜索',
            frontUrl: 'https://bing.com/search?q='
          },
          {
            title: '在MDN中搜索',
            frontUrl: 'https://developer.mozilla.org/zh-CN/search?q=', // 搜索链接的前面部分
            behindUrl: '' // 搜索链接的后面部分，可选，默认 ''
          },
          {
            title: '在菜鸟中搜索',
            frontUrl: 'https://www.runoob.com/?s='
          },
        ]
      }
    ],
    [
      'one-click-copy', // 代码块复制按钮
      {
        copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'],
        copyMessage: '复制成功',
        toolTipMessage: '点击复制代码',
        duration: 500,
        showInMobile: false // whether to display on the mobile side, default: false.
      }
    ],
    [// demo演示模块
      'demo-block'
    ],
    [
      'vuepress-plugin-zooming', // 放大图片
      {
        selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
        options: {
          bgColor: 'rgba(0,0,0,0.6)'
        }
      }
    ],
    [
      'vuepress-plugin-comment', // 评论
      {
        choosen: 'gitalk',
        options: {
          clientID: '你的id',
          clientSecret: '你的secret',
          repo: '', // GitHub 仓库
          owner: '', // GitHub仓库所有者
          admin: [''], // 对仓库有写权限的人
          // distractionFreeMode: true,
          pagerDirection: 'last', // 'first'正序 | 'last'倒序
          id: '<%- (window.location.origin + (frontmatter.permalink || frontmatter.to.path)).slice(-16) %>', //  页面的唯一标识,长度不能超过50
          title: '「评论」<%- frontmatter.title %>', // GitHub issue 的标题
          labels: ['Gitalk', 'Comment'], // GitHub issue 的标签
          body: '页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>' // GitHub issue 的内容
        }
      }
    ],
    [
      '@vuepress/last-updated', // "上次更新"时间格式
      {
        transformer: (timestamp, lang) => {
          const dayjs = require('dayjs'); // https://day.js.org/
          return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss');
        }
      }
    ],
    [ //pwa，用于网站有更新内容时弹出刷新按钮
      '@vuepress/pwa', {
        serviceWorker: true,
        updatePopup: {
          message: "发现新内容可用",
          buttonText: "刷新"
        }
      }
    ],
  ],
  markdown: {
    lineNumbers: true,
  },
  evergreen: true,
};

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
97
98
99
100
101
102
103

# 部署

没有购买服务器，博客部署到了GitHub Pages (opens new window) + netlify (opens new window)上，绑定了自己的域名

# 部署到github page上

新建github仓库，名称自取，类型公共
根目录新建deploy.sh

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
yarn build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.llovez.cn' > CNAME

git init
git add .
git commit -m "deploy"

git remote add origin git@github.com:github名/仓库名.git
git branch -M master
git push -f git@github.com:github名/仓库名.git master:gh-pages

cd -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

package.json中添加"scripts": {"deploy": "bash deploy.sh"}
执行yarn deploy 等待上传完成
完成后即可访问github名.github.io/仓库名/

# 源代码上传到github

新建github仓库，名称自取，类型私有
本地文件执行git命令

git init //初始化
git add . //把项目添加到本地仓库
git commit -m //添加本次提交的注释内容
git remote add origin 仓库地址 //关联远程仓库
git push -u origin master //提交代码，第一次提交需要加上-u，以后提交不需要了

1
2
3
4
5

# 使用github actions实现自动化部署

首先点击github头像，选择 settings > Developer settings > Personal access tokens ,点击新增按钮，创建一个令牌，保存令牌值
打开仓库点击 settings > Actions secrets and variables > Actions ,点击新增按钮，填写name，value为上一步令牌值
在本地项目新建文件 .github > workflows > main.yml 编写工作流

on: # 触发条件
# 每当 push 到 main 分支时触发部署
  push:
    branches:
      - main

jobs:
  docs:
    runs-on: ubuntu-latest # 指定运行所需要的虚拟机环境（必填）

    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          # “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录
          fetch-depth: 0

      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          # 选择要使用的 node 版本
          node-version: "14"

      # 缓存 node_modules
      - name: Cache dependencies
        uses: actions/cache@v2
        id: yarn-cache
        with:
          path: |
            **/node_modules
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      # 如果缓存没有命中，安装依赖
      - name: Install dependencies
        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn --frozen-lockfile

      # 运行构建脚本
      - name: Build VuePress site
        run: yarn build

      # 查看 workflow 的文档来获取更多信息
      # @see https://github.com/crazy-max/ghaction-github-pages
      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-github-pages@v2
        # 环境变量 ACCESS_TOKEN为上一步创建的name名
        env:
          GH_PAT: ${{ secrets.ACCESS_TOKEN }}
        with:
          # 部署的仓库
          repo: lzlife/blog
          # 部署到 gh-pages 分支
          target_branch: gh-pages
          # 部署目录为 VuePress 的默认输出目录
          build_dir: docs/.vuepress/dist

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

重新push代码到github上即可自动化部署到选定的仓库分支上

# 部署到netlify上

注册netlify账号
从github导入项目
部署成功后会自动生成域名，可以修改
点击 Domain management 添加自己的域名绑定，添加后需要到域名服务商解析，添加两条 CNAME 类型的解析 www 和 @ 值都是生成的 netlify 域名
最后添加证书即可访问了

编辑

#Blog

上次更新: 2023/03/15, 07:15:37

← 小程序笔记使用Gitalk实现静态博客无后台评论系统→