❏ 搭建 VitePress 主页

本篇文章，我将整理一套通过 VitePress、Github Pages、Vercel、国内域名代理, 来快速搭建静态的主页网站。

﹆使用 VitePress

简介

是一个由 Vue 团队官方出品的现代化静态网站生成器，专为构建高性能文档网站而生。它基于超快构建工具 Vite 构建，兼具极速开发体验与优秀的生产性能

快速上手, 开发静态网站生成器

这里要使用 pnpm, 如果没有安装的小伙伴，可以通过以下命令全局安装

npm i pnpm -g

然后选定项目目录, 进行初始化

pnpm init

安装 vitepress

pnpm i vitepress

在 package.json 中添加 script
三个脚本分别代表启动 本地文档服务，打包文档，启动打包后（dist）服务

json

{
    "scripts": {
        "docs:dev": "vitepress dev docs",
        "docs:build": "vitepress build docs",
        "docs:serve": "vitepress serve docs"
    }
}

创建首页 index.md, 放入 docs 目录中

## hello juejin

此时我们的文件结构是

.
├─ docs 
│  └─ index.md
└─ package.json

启动本地服务文档站点

pnpm run docs:dev

此时便会启动一个http://localhost:{port}/ 的服务，默认加载 docs/index.md

配置环境文件

在 docs 目录下创建一个 .vuepress 目录，如下结构

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  └─ index.md
└─ package.json

在 config.js 导出一个js对象

export default {
    base: '/',
    title: 'OneAoBlog',
    description: 'OneAo个人主页',
    themeConfig: {
        siteTitle: "OneAoBlog",
        logo: "/blog.jpeg",
        nav: [{ 
                text: "Guide", 
                link: "/guide/" 
        },
        {
            text: "Drop Menu",
            items: [{ 
                text: 'Item A', 
                link: '/articles/组件库环境搭建' 
            }]
        }],
        socialLinks: [
            { icon: "github", link: "https://github.com/OneAo0825" },
        ],
        sidebar: {
            "/articles/": [{
                text: "搭建日常项目",
                items: [{
                    text: "title",
                    link: "/articles/file",
                }],
            }
        ]},
    },
}

☁️ 部署到 Github pages

配置静态网站的仓库

首先在 github 上面新建仓库

注意

如果想直接通过 {username}.github.io 访问主页, 那么仓库也要取这个名字, 否则需要指定仓库名称
请将仓库的访问权限选择为 public

进入 Settings -> Code and autoation -> Pages

配置

Source 选择 Deploy from a branch
Branch 选择 [branch] master & [path] /root

检查项目中的 .vitepress/config.js 需要配置base

export default {
    base: '/',
}

配置一键部署静态网站脚本

最后将构建静态网站并推送到Github的脚本写到 deploy.sh 文件中, 便于一键部署

#!/usr/bin/env sh
# 忽略错误
set -e
# 构建
npm run docs:build
# 进入待发布的目录
cd docs/.vitepress/dist
# 删除旧的 .git 文件夹（避免 “nothing to commit” 问题）
rm -rf .git
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
ssh-add ~/.ssh/id_rsa_xio
git init
git add -A
git commit -m 'deploy'
git branch -M main
# 如果部署到 https://<USERNAME>.github.io
git remote add origin git@github.com:OneAo0825/oneao0825.github.io.git
git push -f origin main
cd -

☁️ 部署到 Vercel

简介

Vercel 是一个由 Next.js 团队创办的前端部署平台，专为部署静态网站和前端框架打造，提供极致简单的部署体验和全球极速访问。

项目管理意见

通过上述的 deploy.sh 是将 vitepress 构建后的静态网址项目推送到了 {username}.github.io 仓库中。我们网站生成器源代码项目需要推送到另外一个仓库, 用于保存备份。也可以用于部署到其他服务器中。

注册和部署 Vercel

步骤

直接通过 Github 账号注册 Vercel 账号.
关联上述的网站生成器源代码项目 github 仓库, Vercel 会直接识别架构, 直接点击 Deploy 进行部署.
看到部署的静态项目情况, 直接查看 Domains 下方的域名

vercel domain

☁️ 国内域名解析

由于国内目前无法很好的访问 Vercel 网站，所以需要申请国际或国内域名，通过专线访问 Vercel 网址

绑定类型	使用记录	记录值
根域名（example.com）	A 记录	`76.76.21.21`
子域名（如 blog.example.com）	CNAME	`cname.vercel-dns.com`

步骤

在 Vercel, project-Settings-Domains 中添加待注册的域名, 然后看到提供的上述 DNS 信息
在阿里云或腾讯云购买对应域名
购买时, 由快捷申请实名申请模板入口, 需要实名认证并审核, 审核时间大概要 10 分钟左右
解析域名, 选择 A 或 CNAME, 关联步骤 1 的 DNS 信息
在 Vercel 刷新 Domain 状态, 等待一段时间后, 即可通过国内或国际域名访问自己的主页!
境外云服务器不用进行ICP备案, 但是需要在 30 天内申请国安备案

❏ 搭建 VitePress 主页 ​

﹆ 使用 VitePress ​

简介 ​

快速上手, 开发静态网站生成器 ​

配置环境文件 ​

☁️ 部署到 Github pages ​

配置静态网站的仓库 ​

配置一键部署静态网站脚本 ​

☁️ 部署到 Vercel ​