博客:2.拓展博客

2022/6/5 Github Pagevuepress

博客搭建好了,但是我的网站不仅只需要博客,还想放置一些静态页面,这些都可以通过一些shell来执行部署。

# 需求

  1. 需要一个首页,静态页面就可以,然后首页增加一些入口可以引导进入单独的项目中
  2. 博客站点作为一个路径,相当于博客整体从 www.numplanet.com/blog 进入

总结下,我需要通过shell来在build项目之后再移动文件夹并组成新的项目

# 实现

  1. 新增一个项目(项目A)作为Github Page存储位置,博客项目(项目B)/其他项目(项目C)作为单独的项目 存储在其他项目中
  2. 给项目A中添加shell文件deploy.sh,作为核心部署脚本
  3. 给项目B/C等中添加添加shell文件deploy.sh,仅实现跳转到A项目并执行 A/deploy.sh 即可

举个例子

# B/C项目中deploy.sh

# 确保脚本抛出遇到的错误
set -e
# 跳转到A项目 并执行sh文件
cd ../<github-page-name>.github.io
sh deploy.sh
1
2
3
4
5
6
7
# A项目下deploy.sh

# 确保脚本抛出遇到的错误
set -e
# 打包 - 复制 子项目文件
# blog 
cd ../Blog
npm run docs:build # B项目编译
cp -rf ./docs/.vuepress/dist/* ../<github-page-name>.github.io/blog

# 项目C
cd ../C
npm run build # C项目编译
cp -rf ./dist/* ../<github-page-name>.github.io/
# 打包 - 复制 end

# 发布
cd ../<github-page-name>.github.io
git add -A
git commit -m 'deploy'
git push origin main
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 注意

  1. 因为这种项目编译后产生的文件没有执行检查相关的操作,所以最好在命名文件的之后避免文件名重复导致先复制进去的文件被覆盖
  2. GitHub page 发布的速度没有那么快 上传后等两分钟再看
  3. 列表下面不能紧跟一个代码块 否则会重复渲染

如果之前没有注意,可以全局正则搜索下 然后手动给中间增加文字或者其他内容来防止异常产生

[0-9]\.\s(\S)*

\`\`\`
<!-- 注意 \` 是为了让md能识别,自己用的时候去掉\ -->
1
2
3
4