Vite(三)部署静态站点(wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI)、环境变量与模式、服务端渲染(SSR)
- 网址:https://vitejs.cn/guide/why.html
1. 部署静态站点
-
hugo跟wordpress其他建站工具的对比
- wordpress 全球31%的网站使用wordpress,尽管他有各种主题和插件,但是也有非常多的缺点,安全性,seo不够友好,定制麻烦
- hugo hexo最快的静态生成工具,seo友好,静态更安全,方便定制模板,缺点没有插件,如果要定制模板只能懂一点go的语法
- wordpress是动态的并且还需要托管数据库,所以托管费用比较昂贵
- 两个静态网页生成器:
hexo
和hugo
。在使用两者之前就有将两者进行过对比,前者基于 node.js、后者基于 golang - hugo hexo是生成静态的页面,在本地生成后上传到服务器就可以了,托管费用非常便宜,可以直接用免费的github托管
下面的指引都基于以下几个假设:
- 你正在使用的是默认的构建输出路径(
dist
)。这个路径 可以使用build.outDir
更改,在这种情况下,你可以从这篇指南中推断出所需的指令。 - Vite 已经被安装为了一个你项目的本地开发依赖(dev dependency),并且你已经配置好了如下的 npm script:
- 你正在使用 npm,或者使用了 Yarn 或其他的包管理工具,可以运行下面的脚本指令:
{
"scripts": {
"build": "vite build",
"preview": "vite preview"
}
}
值得注意的是 vite preview
旨在提供一个生产版本的本地预览,但不应直接作为一个生产服务器。
注意
本篇指引提供的指令旨在 本篇指南提供了如何执行 Vite 站点的静态部署的说明。Vite 也对服务端渲染(SSR)有了实验性的支持。SSR 是指支持在 Node 中运行相应应用的前端框架,预渲染成 HTML,最后在客户端激活(hydrate)。查看 SSR 指南 可以了解更多细节。另一方面,如果你正在寻找与传统服务端框架集成的方式,那么请查看 后端集成 章节。
构建应用
你可以运行 npm run build
命令来执行应用的构建。
$ npm run build
默认情况下,构建会输出到 dist
文件夹中。你可以部署这个 dist
文件夹到任何你喜欢的平台。
本地测试应用
当你构建完成应用后,你可以通过运行 npm run preview
命令,在本地测试该应用。
$ npm run build
$ npm run preview
preview
命令会启动一个本地静态 Web 服务器,将 dist
文件夹运行在 http://localhost:5000 上 。这样在本地查看该产物是否正常可用就十分容易了。
你可以使用 --port
标志传入一个参数来配置服务器的运行端口。
{
"scripts": {
"preview": "vite preview --port 8080"
}
}
这样 preview
命令会改将服务器运行在 http://localhost:8080 上。
GitHub Pages
-
在
vite.config.js
中设置正确的base
。如果你要部署在
https://<USERNAME>.github.io/
,你可以省略base
因为其默认为'/'
。如果你要部署在
https://<USERNAME>.github.io/<REPO>/
,例如你的仓库地址为https://github.com/<USERNAME>/<REPO>
,那么请设置base
为'/<REPO>/'
。 -
在你的项目中,创建一个
deploy.sh
脚本,包含以下内容(注意高亮的未注释的行),运行它来部署站点:
#!/usr/bin/env sh
# 发生任何错误时终止
set -e
# 构建
npm run build
# 进入输出产物文件夹
cd dist
# 如果你要部署到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果你要部署在 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果你要部署在 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
TIP
你也可以在你的 CI 启动时运行该脚本,使得在每次推送代码时自动部署。
GitHub Pages 配合 Travis CI
- Travis CI 提供的是持续集成服务(Continuous Integration,简称 CI)。它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器。
- 持续集成指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期以后,再将新代码"集成"到主干。
- 持续集成的好处在于,每次代码的小幅变更,就能看到运行结果,从而不断累积小的变更,而不是在开发周期结束时,一下子合并一大块代码。
-
在
vite.config.js
中设置正确的base
。如果你要部署在
https://<USERNAME or GROUP>.github.io/
,你可以省略base
因为其默认为'/'
。如果你要部署在
https://<USERNAME or GROUP>.github.io/<REPO>/
,例如你的仓库地址为https://github.com/<USERNAME>/<REPO>
,那么请设置base
为'/<REPO>/'
。 -
在项目根目录创建一个
.travis.yml
文件 -
在本地运行
npm install
确认正常生成一个 lockfile (package-lock.json
)。 -
使用 GitHub Pages 提供的部署模板,并跟随 Travis CI 文档 进行配置:
language: node_js
node_js:
- lts/*
install:
- npm ci
script:
- npm run build
deploy:
provider: pages
skip_cleanup: true
local_dir: dist
# 在 GitHub 上生成的令牌,允许 Travis 推送代码到你的仓库。
# 在仓库对应的 Travis 设置页面中配置,用于安全控制。
github_token: $GITHUB_TOKEN
keep_history: true
on:
branch: master
GitLab Pages 配合 GitLab CI
- CI,Continuous Integration,为持续集成。即在代码构建过程中持续地进