vuepress搭建过程中出现的问题

9374 2022/9/5 markDown

介绍

基于gitpage自动部署
使用 vuepress，基于 vuepress-theme-reco
跟着duktig博客 (opens new window)一步一步来

遇到的问题

vuepress 无法热更新解决方案参考 (opens new window)

# 本地搭建

直接基于主题 vuepress-theme-reco (opens new window)进行搭建。

# npx

还有npm与yarn方式可以参考 vuepress-theme-reco (opens new window)

#我使用的这个 
npx @vuepress-reco/theme-cli init 
#文件夹名称输入自定义的
npx @vuepress-reco/theme-cli init [文件夹名字]

1
2
3
4

# 选择模式

输入init后选择需要的

#What style do you want your home page to be?
blog
doc
2.x

1
2
3
4

# 安装依赖

#输入init时的文件夹名字 切换进目录中
cd [文件夹名字]
npm install

1
2
3

# 启动/预览

npm run dev

# 热更新

启动后发现修改文件无法热更新无法直接预览 (在package.json里面修改) 修改package.json文件的dev字段，将：

//修改前
“scripts”: {
  "deploy": "bash deploy.sh",
      "dev": "vuepress dev docs  . --open --host \"localhost\"",
    "build": "vuepress build ."
}
//修改后
“scripts”: {
  "deploy": "bash deploy.sh",
    "dev": "vuepress dev  --temp .temp . --open --host \"localhost\"",
    "build": "vuepress build ."
}

1
2
3
4
5
6
7
8
9
10
11
12

弊端: 会在项目根目录下新增.temp目录提交项目时记得跳过跳过方法修改.gitignore文件进行屏蔽

# My Great Heading {#custom-id}

# 修改静态文件输出目录 {#changeOut}

在 vuepress-theme-reco 主题中，"dest" 的值为public；在 vuepress 官方中，"dest" 的值为.vuepress/dist。这个值意为，执行 npm run build 后，静态资源目录生成的位置，会影响到后边GitHub Actions的配置。这里我们将"dest" 的值为.vuepress/dist。
目录>> .vuepress/config.js

module.exports = {
  //修改前
  "dest": "public",
  //修改后
  "dest": ".vuepress/dist",
}

1
2
3
4
5
6

# 部署上线

原理在本地创建sh脚本使用npm命令启动脚本实现

创建两个仓库

仓库一本仓库储存源文件
仓库二 page仓库储存打包后的dist文件,用来gitpages创建页面使用

将本仓库打包后的文件 dist目录上传到 page仓库实现命令部署更新pages


#!/usr/bin/env sh

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

# 生成静态文件
npm run build

# 进入生成的文件夹
ls
#这里改成自己打包后的目录 如果不一样的话
cd .vuepress/dist
# 如果是发布到自定义域名  这里改成自己的域名  如果没有域名注掉就行 
# echo 'xxx.com' > CNAME

git init
git status -s
git add -A
git commit -m 'deploy'

# 如果你想要部署到 https://USERNAME.github.io
git remote -v
# git push -f https://github.com/USERNAME/USERNAME.github.io.git master
#打包后的文件 传到gh-pages分支 这样才能更新到网页上/直接穿master分支不行;
git push -f https://github.com/USERNAME/USERNAME.github.io.git master:gh-pages

# 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
# git push -f git@github.com:USERNAME/<REPO>.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
24
25
26
27
28
29
30
31

# 部署方式二

没用到备份一下

著作权归https://www.duktig.cn所有。
链接：http://www.duktig.cn/2022/01/21/基于vuepress搭建博客系统及优化过程-持续更新/
name: Deploy GitHub Pages

# 触发条件：在 push 到 master 分支后
on:
   push:
      branches:
         - main

# 任务
jobs:
   build-and-deploy:
      # 服务器环境：最新版 Ubuntu
      runs-on: ubuntu-latest
      steps:
         # 拉取代码
         - name: Checkout
           uses: actions/checkout@v2
           with:
              persist-credentials: false

         # 生成静态文件（export NODE_OPTIONS=--max_old_space_size=4096  解决JavaScript heap out of memory问题）
         - name: Build
           run: npm install && export NODE_OPTIONS=--max_old_space_size=4096 && npm run build

         # 部署到 GitHub Pages
         - name: Deploy
           uses: JamesIves/github-pages-deploy-action@releases/v3
           with:
              ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
              BRANCH: gh-pages
              FOLDER: .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

This is a regular paragraph.

Foo	Foo
Foo	Foo
Foo	Foo

This is another regular paragraph.

zvue

Choose mode