部署
Valaxy 的部署非常简单,我们推荐你直接通过第三方的 CI 构建并托管到任意平台。
自行部署
pnpm run buildyarn buildnpm run build执行 build 命令构建,dist 文件夹为构建后的内容。
SSG 构建(默认 Valaxy SSG 引擎)最低需要 ~2 GB 堆内存;传统 vite-ssg 引擎需要 ~2.3 GB。如果遇到 JavaScript heap out of memory 错误,请设置:
NODE_OPTIONS=--max-old-space-size=4096 pnpm build第三方部署
提示
第三方部署的各配置文件已内置在 Valaxy 的初始化模版项目中,您可以按需使用。
如果部署失败,推荐您先在本地通过 npm run build 检查潜在的构建错误。
GitHub Pages
提示
当您使用 GitHub Pages 托管时,请确保您的仓库名为 你的用户名.github.io。
这是因为当存在同名目录时,GitHub Pages 会默认为您分配 你的用户名.github.io 作为你的个人域名。
尽管您也可以将其重命名为其他名称,并设置自定义域名等。(更多的进阶操作,可自行搜索。)
但作为新手,我更推荐您遵循默认规则,以避免意想不到的错误。
.github/workflows/gh-pages.yml
name: GitHub Pages
on:
push:
branches:
# The branch where the project source code resides
# 项目源代码所在的分支
- main
- master
- valaxy
jobs:
build:
runs-on: ${{ matrix.os }}
strategy:
matrix:
node-version: [lts/*]
os: [ubuntu-latest]
fail-fast: false
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
registry-url: https://registry.npmjs.org/
- name: 📦 Install Dependencies
run: npm i
- name: 🌌 Build Valaxy Blog
run: npm run build
- name: 🪤 Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
force_orphan: true在使用 pnpm create valaxy 创建模版项目时,已内置文件.github/workflows/gh-pages.yml 以实现 GitHub Actions 的自动部署工作流。
- 选择 Github Repo,打开
Settings->Action->General->Workflow permissions,选择read and write permissions。 - 上传至 GitHub Repo,打开
Settings->Pages,选择gh-pages分支。
gh-pages已由.github/workflows/gh-pages.yml自动部署。
注意修改
gh-pages.yml中的on.push.branches为你源代码所在的分支,默认为main。
Netlify
已内置 netlify.toml。
- 连接 GitHub 仓库,可自动部署。
Vercel
对于已有的 Valaxy 博客,在开始部署之前,您需要先对您博客的 vercel.json 进行修改以便启用 cleanUrls 支持:
{
"cleanUrls": true
}对于新创建的 Valaxy 博客,您只需要直接进行接下来的步骤即可。
- 在 Vercel 的 Dashboard 上,点击
Add New...,随后点击Project新建一个项目。 - 在左侧选择要部署的仓库,点击
Import,随后将Framework Preset设置为Other并更改Build and Output Settings。 - 将
Output Directory设置为dist后,点击Deploy。 - 等待屏幕上撒下彩带后访问即可。
netlify.toml
[build]
publish = "dist"
command = "pnpm run build"
[build.environment]
NODE_VERSION = "20"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
[[headers]]
for = "/manifest.webmanifest"
[headers.values]
Content-Type = "application/manifest+json"Cloudflare Pages
- 登录你的 Cloudflare 账号,从侧边栏导航至 “Workers 和 Pages” 页面。
- 点击
创建项目、连接到 Git,选择你的 GitHub 或者 GitLab 仓库,并点击开始设置。 - 选择你的部署分支。
- 将
构建命令设置为pnpm build。 - 将
构建输出目录设置为dist。 - 点击
保存并部署。
Nginx
下面是一个 Nginx 服务器块配置示例 nginx.conf。此配置包括对基于文本的常见资源的 gzip 压缩、使用适当缓存头为 Valaxy 站点静态文件提供服务的规则以及处理 cleanUrls: true 的方法。
nginx.conf
server {
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
listen 80;
server_name _;
index index.html;
location / {
# content location
# root /app;
root /usr/share/nginx/html;
# exact matches -> reverse clean urls -> folders -> not found
try_files $uri $uri.html $uri/ =404;
# non existent pages
error_page 404 /404.html;
# a folder without index.html raises 403 in this setup
error_page 403 /404.html;
# adjust caching headers
# files in the assets folder have hashes filenames
location ~* ^/assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
}本配置默认已构建的 Valaxy 站点位于服务器上的 /usr/share/nginx/html 目录中。如果站点文件位于其他位置,请相应调整 root 指令。
Docker
下面是一个 Dockerfile 示例,用于构建 Valaxy 站点并将其部署到 Nginx 服务器中。
请参考 Nginx 部分配置 nginx.conf,并将其放置于 Dockerfile 同一目录下。
Dockerfile
FROM node:20-alpine as build-stage
WORKDIR /app
RUN corepack enable
COPY .npmrc package.json pnpm-lock.yaml ./
RUN --mount=type=cache,id=pnpm-store,target=/root/.pnpm-store \
pnpm install --frozen-lockfile
COPY . .
RUN pnpm build
FROM nginx:stable-alpine as production-stage
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]其他
你还可以使用 Render 等进行托管。
提示
Valaxy 与 VitePress 同样是静态站点。你也可以参考 VitePress 部署指南 进行部署。