VitePress 构建的博客如何部署到 Netlify 平台?

简介: VitePress 构建的博客如何部署到 Netlify 平台?前言之前写了篇文章【使用 Vitepress 构建博客并部署到 github 平台】,有个老哥说 github page 访问太慢了,希望放到 Netlify 平台上面。咱也没部署过,就试了一下,发现比在 github 上部署简单多了...一、注册账号注册 netlify 账号【Netlify】 地址:app.netlify.com/可以使用 github 账号注册,这样可以直接拉取 github 的内容进行部署,更简单

VitePress 构建的博客如何部署到 Netlify 平台?

前言

之前写了篇文章【使用 Vitepress 构建博客并部署到 github 平台】,有个老哥说 github page 访问太慢了,希望放到 Netlify 平台上面。
咱也没部署过,就试了一下,发现比在 github 上部署简单多了...

一、注册账号

注册 netlify 账号
【Netlify】 地址:https://app.netlify.com/

可以使用 github 账号注册,这样可以直接拉取 github 的内容进行部署,更简单

二、构建站点

1. 注册完成,打开网站

https://app.netlify.com/teams/xxx/overview
注册完成之后,这个就是你的账号链接,中间的 XXX 是你的 github 名称

2. 点击 【Sites 】

点击 【Sites】按钮,进入站点页面,有你已经创建的站点和新建站点

可以看到下图是我那个 chrome 插件的站点,可以点击查看详情和更新

3. 点击 【Add new site】


点击之后,会出现三个 list

  • Import an existing project:从 github 等网站上导入项目
  • Start from a template:导入 Netlify 模版
  • Deploy manually:手动导入本地项目

如果你的项目在 github 上的话,那得注意下: github page 配置的站点是否有 base,如果配置了 base 的话,那在 Netlify 上面会出现问题的,需求去除 base,重新构建在重新上传在导入 Netlify
由于我的两个项目都有 base,所以我就不从 github 上直接导入项目了,我就本地去掉 base 重新 build 下本地导入了。

4. 打开项目,重新构建

4.1. 打开我们在 【使用 Vitepress 构建博客并部署到 github 平台】 文章中创建的项目

找到 config.mts 文件

docs/.vitepress
├── config.mts

我们在配置 github page 的时候配置了 base

export default defineConfig({
  base: '/vite-press-demo/',
  ...
})

4.2. 删除 base 配置

注释即可,因为 github pageNetlify 不一致,如果我们需要更新 github 的项目,我们在去除注释就行

4.3. 修改 favicon 的 href 链接

因为我们在配置 github page favicon 的时候,加了 base 路径,那么在这个时候就需要删除这个路径了,改成以下内容

['link', { rel: 'icon', href: '/extension.ico'}],

4.4. 重新运行 pnpm run docs:build

pnpm run docs:build

生成新的 dist 文件夹

4.5. 全局搜索当前 base 路径

可以发现只有当前注释掉的配置文件里面才有了

5. 导入项目

5.1. 点击 【Add new site】-> 【Deploy manually

进入以下页面

5.2. 点击【browse to upload】

选择对应的文件
注意:
如果你发现你当前的项目没有 .vitepress 文件夹和 dist 文件夹,如下图:

那是因为没有展示 . 开头的文件夹
Mac 电脑:
command + shift + . 三个按钮,可以展示 . 文件夹
windows 电脑:
ctrl + shift + . 三个按钮,可以展示 . 文件夹
如下图:

  1. 选择 dist 文件夹
  2. 弹框确认

  3. 上传完成,会自动跳转

6. 配置站点

6.1. 点击 【Open production deploy】


点击 open 按钮,发现已经生成站点了

但是我们可以发现我们站点的 URL 有点乱七八糟:https://6630943ac0114194d2b3782e--ornate-muffin-49b6e4.netlify.app/
这个是自动生成,所以我们需要配置下

6.2. 点击【Site configuration】

回到之前的页面,点击【Site configuration】按钮

6.3. 点击 【Change site name】

点击 【Change site name

6.4. 修改,点击【save】即可


我的这个项目名称是 vite-press-demo,那我就把站点名称改成 vite-press-demo

7. 完成站点配置

点击保存之后,就可以看到名称和 URL 都改掉了

在点击上面新的站点链接即可进入项目站点
https://vite-press-demo.netlify.app/

这个比 github 快多了...

三、总结

1. 项目代码

源码:【develop 分支

Demo 预览:【demo 项目预览

使用 Vitepress 构建博客:https://blog.csdn.net/guoqiankunmiss/article/details/138163772

2. 自荐

【Chrome 浏览器插件开发实践指南 Netlify 版】:https://gqk-extension.netlify.app/
【Chrome 浏览器插件开发实践指南 github 版】:https://18055975947.github.io/extension/

3. 结束语

  • Netlify 上面构建和更新比 github 快多了
  • 如果有问题可以在掘金CSDN 或者 github 上找我,看到都会回复
  • 希望能帮助到大家
  • 🎉🎉🎉
目录
相关文章
|
6月前
|
搜索推荐 前端开发
使用VitePress创建个人网站并部署到GitHub
该网站使用 VitePress 构建,记录了前端开发相关的笔记和教程,涵盖 Vue2 和 Vue3 等内容。网站支持暗黑模式和 Algolia 搜索服务,提供了详细的导航和侧边栏配置。通过自动化脚本进行部署,托管于 GitHub Pages。
使用VitePress创建个人网站并部署到GitHub
|
8月前
|
JavaScript 应用服务中间件 程序员
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
|
8月前
VitePress 构建的博客如何部署到 github 平台?
VitePress 构建的博客如何部署到 github 平台?
150 0
|
域名解析 前端开发 Cloud Native
【阿里云开发】一键部署静态博客——Hexo
【阿里云开发】一键部署静态博客——Hexo
462 0
【阿里云开发】一键部署静态博客——Hexo
|
前端开发 Go iOS开发
如何通过hugo部署一套技术博客
一步一步带你搭建一个完成的技术播客
|
安全 JavaScript Serverless
基于函数计算快速搭建Vuepress博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Vuepress博客。
|
JavaScript Shell 开发工具
使用vuepress从零开始搭建我的技术文档|已部署到线上
几天前为了深入学习JS我手写了一个JS工具库,并且发布到了npm上 我把具体步骤,从零搭建再到发布上线的全部细节都写在这这一片文章上了:手写了一个JS工具库并发布到npm 既然已经写了JS工具库,那必须要有文档呀,要不然谁知道怎么使用!!! 所以今天这篇文章就介绍一下怎么使用vuepress2.x搭建一个文档,内容不深,小白也能看懂,因为我只是小小的写了一下 ^_^嘿嘿 文档效果可以点击此处查看☞:LearnJTs文档
699 1
使用vuepress从零开始搭建我的技术文档|已部署到线上
|
安全 Serverless 对象存储
场景体验:基于函数计算快速搭建Vuepress博客
本场景介绍使用函数计算服务搭建一个Vuepress博客。
场景体验:基于函数计算快速搭建Vuepress博客
比hexo更好用的轻量级博客,5分钟部署上线!
比hexo更好用的轻量级博客,5分钟部署上线!
比hexo更好用的轻量级博客,5分钟部署上线!
|
JavaScript
搭建 VuePress 博客,你可能会用到的一些插件
「这是我参与2022首次更文挑战的第8天,活动详情查看:2022首次更文挑战」。
788 0
搭建 VuePress 博客,你可能会用到的一些插件

热门文章

最新文章