github action功能

github action功能

这里从头到尾的流程我们以这个项目为例子

Mran/githubstartog: 将你的星标项目做成前端页面

首先fork到我们的仓库

然后在 settings 中启用 GitHub Actions > Actions > General > Read and write permissions

因为这里这个项目需要有对仓库的读写权利

这里需要去让GitHub Actions 完成构建

点开action发现

你 fork 的仓库里本来就带着 GitHub Actions 工作流文件，GitHub 怕你一键运行别人塞的自动化脚本把自己仓库烧了，所以默认帮你关掉。要跑，自己点同意

所以看到这里默认是识别到了code里的自动化流程

点击继续

这里可以看到什么都没有，因为我们还没有跑一个workflow

你现在缺的不是 workflow，而是 触发它运行

点击左边的go bulid and compile

这里可以回到仓库看看workflow所用的yml文件是否一致

一致

点击运行后等几分钟

等到变绿即可

这个时候就可以进行部署了

这里选择的是cloudflare

这里点击页面

进行选择

然后就是关于构建设置

 

这里第一次没有写任何的直接进行提交生产页面

虽然生产成功了，但是显示是无法找到此页面

那么也就说这里肯定需要填命令

构建命令是什么

这个时候我们返回去查看两个核心的文件（一个package.json以及action的yml文件）

那么从上到下，执行什么命令？那么首先要分析workflow做了什么

你贴的 workflow 做了这些：
​
编译 Go：go build -o ./bin/starProject
​
运行 Go：./bin/starProject（生成 aiTagProcess.json 这种数据文件）
​
把数据拷到前端静态资源目录：
cp aiTagProcess.json web/public/projects.json
​
commit + push：把更新后的 web/public/projects.json 推回仓库
​
它没做的事：
​
没有进入 web/ 跑 npm install
​
没有跑 vite build
​
没有生成 web/dist/
​
没有把前端产物发布到任何地方
​
所以：Actions 负责“生成数据并写回仓库”，而“生成可上线网页”这步必须由 Cloudflare Pages 去做

 

Cloudflare Pages 的构建机器拿到的只是“仓库源码”。它需要你告诉它怎么把源码变成可以部署的网站。

你这个前端在 web/ 目录里，package.json 里写了：

"scripts": {
  "build": "vite build"
}

这句意味着：

• npm run build 会执行 vite build

• vite build 会把 React/Vite 项目打包成静态文件

但 vite、react、tailwindcss 这些都不是系统自带的，得先安装依赖，才跑得起来，所以要先：

• npm install：安装 node_modules（把 vite/react 这些装上）

• npm run build：执行 vite build 打包

所以第一个构建命令就是

npm install & npm run build

 

那么输出文件呢

Vite 的默认打包输出目录就是 dist/。 也就是你在本地 web/ 目录跑：

npm install
npm run build

跑完你会得到：

• web/dist/index.html

• web/dist/assets/...（各种 js/css）

Cloudflare Pages 发布网站需要一个“静态文件目录”，它就会把你填的那个目录当成站点根目录发布出去。

所以你填 dist 的意思就是：

“构建完成后，把 web/dist 这个目录里的文件发布成网站。

所以输出是dist

 

最后根目录呢

package.json 在 web/ 目录下，npm install需要依靠package.json，npm run build需要install下来的依赖

所以需要在web目录下