这是我自己部署的一个仿抖音的网站。我把它放到了自己的域名下面,轮番播放自己的视频。
本期视频是个手把手教程。我们全程使用Github的免费服务,简单几步,就可以拥有一个属于自己的炫酷网站。因为它是开源的,我们也可以随意定制里面的内容。
视频教程:
只用Github免费功能,上线仿抖音开源网站,Vue.js是什么?使用Github Action+Pages免费发布网站
项目介绍
本次使用的项目是近期Github上爆火的一个项目,名字就叫抖音,已经有8,000多的star。作者使用了最新的Vue技术栈,模仿了抖音移动端的短视频效果,有媲美原生APP的丝滑体验。
Vue是一个很流行的js框架,用于构建前端UI。Vue是一种渐进式框架,意思是可以从最简单的核心开始,根据需求逐步添加模块功能来构建复杂的Web应用。Vue的特点有响应式系统,可以把数据绑定到html的某个元素上。当数据发生变化的时候,页面也会自动渲染。另外一个特点是html的模板语法,比如使用v if控制控件是否渲染,使用v on CLICK绑定按钮事件等等。
Vite5是一种新型的前端构建工具,Pinia是Vue的专属状态管理库。
像这么一个前端项目,有许多方式可以发布到互联网上。最免费应用的方式应该是Github Pages。Github Pages是一个免费的静态网站托管服务,只需要将html文件上传到Github,你的网站就上线了。
爬爬虾之前有个完整视频介绍这块内容。Vue工程的原代码都是.vue文件。如果想发布成网站,需要打包编译成浏览器可以识别的html、JS等文件。我们可以将原代码下载到自己电脑上,进行build。当然我们也可以使用Github action,Github action是Github官方提供的CI/CD,通过action可以申请一个虚拟环境。
实战操作
爬爬虾同样有个完整视频介绍Github action。我们先注册并且登录Github,fork的意思是将项目保存到自己名下一份。
这里命名我建议直接写自己的英文名,后面接github.io。以我为例就是自己的英文名tech-shrimp.github.io。使用这个格式进行命名,Github会给我们分配一个免费的域名。
填好以后我们点击create fork,下一步点击settings,找到左侧的Pages,把来源改成Github action。
然后我们在顶部找到actions,点击这个绿色按钮启动action功能。
启动好以后,左边有一些列出的工作流,我们使用第二个deploy on Github Pages。右侧有一个按钮run workflow,这里点击run workflow。我们刷新一下页面,这里工作流就开始了。
我们进去简单看一下这个工作流的代码。
# 将静态内容部署到 GitHub Pages 的简易工作流程
name: Deploy Github Pages
on:
# 仅在推送到默认分支时运行。
push:
branches: [ 'master' ]
# 这个选项可以使你手动在 Action tab 页面触发工作流
workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限,以允许部署到 GitHub Pages。
permissions:
contents: write
pages: write
id-token: write
jobs:
# 单次部署的工作描述
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Install pnpm
uses: pnpm/action-setup@v2
with:
version: 8
- name: Set up Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Build
run: pnpm run build-gp-pages
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# Upload dist repository
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
这里的on关键字指的是触发时间,它有两种触发方式。第一个是master分支有了修改就会触发,第二个是可以手动触发。这里面开启了Github Pages的权限,然后下面定义了一个job。这里申请了一个Ubuntu的虚拟机,第一步先是检出代码,第二步安装PNPM,下一步设置Node js,这里的版本是18P,pnpm install安装项目依赖,这里run build就是编译打包。这里对Github Pages进行了设置,然后把打包编译后的结果上传的上传的目录就是这个点dist目录。最后再发布到Github Pages上。
想把一个前端项目部署到Github Pages上,基本上遵循这一套模板就可以了。
我们再回到actions,等到这里打上一个对勾呢,部署就完成了。回到Pages,这里可以看到Github为我自动分配了一个域名,我们点进去看一下,网站直接就上线了哈,非常的简单。
替换数据源
我不想看这些小姐姐,我想换成爬爬虾自己的视频。我们看一下如何操作。
这里我简单分析了一下这套源代码,由于他没有后台,他使用了静态数据模拟了后台的数据。他的数据都放到了src/assets/data的这个目录下面就是这个post6.json。这里面大约定义了每个视频的数据,这个应该是视频的原始播放地址。
总之来说数据非常的繁琐,字节跳动不愧是大厂,这个接口都这么复杂的。
好我们看一下把这个数据换成爬爬下自己的。我先找到一个我自己的视频,点击F12,我们只需要从后台请求里找一份跟刚才差不多的数据就行了。这里点击我头像。
filter里面搜索post就是这个请求,
我们看一下这个请求的aweme_list就是往期视频的列表,基本上跟这个post6.json这个文件差不多。
类似的我们就用这套数据就行了。好我先从浏览器里把这个数据复制出来,这里切换到响应选项卡,整个复制出来,进来以后我们调一下数据,变成跟post6.json文件一样的。