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

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】按钮,进入站点页面,有你已经创建的站点和新建站点
sites
可以看到下图是我那个 chrome 插件的站点,可以点击查看详情和更新
my extension site

3. 点击 【Add new site】

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 路径

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

5. 导入项目

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

进入以下页面
deploy manually

5.2. 点击【browse to upload】

选择对应的文件
注意:
如果你发现你当前的项目没有 .vitepress 文件夹和 dist 文件夹,如下图:
no vitepress
那是因为没有展示 . 开头的文件夹
Mac 电脑:
command + shift + . 三个按钮,可以展示 . 文件夹
windows 电脑:
ctrl + shift + . 三个按钮,可以展示 . 文件夹
如下图:
show vitepress

  1. 选择 dist 文件夹
  2. 弹框确认
    sure
    uploading
  3. 上传完成,会自动跳转
    upload

6. 配置站点

6.1. 点击 【Open production deploy】

在这里插入图片描述
点击 open 按钮,发现已经生成站点了
success
但是我们可以发现我们站点的 URL 有点乱七八糟:https://6630943ac0114194d2b3782e--ornate-muffin-49b6e4.netlify.app/
这个是自动生成,所以我们需要配置下

6.2. 点击【Site configuration】

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

6.3. 点击 【Change site name】

点击 【Change site name
Change site name

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

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

7. 完成站点配置

点击保存之后,就可以看到名称和 URL 都改掉了
end
在点击上面新的站点链接即可进入项目站点
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 上找我,看到都会回复
  • 希望能帮助到大家
  • 🎉🎉🎉

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/5471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【计算智能】基本遗传算法在优化问题中的应用与实验【理论到程序】

文章目录 1. 引言:遗传算法简介2. 基本遗传算法(SGA)2.1 基本遗传算法的构成要素1. 染色体编码2. 适应度函数3. 遗传算子 2.2 实验设计与方法1. 算法流程2. 伪代码3. python实现1. 导入模块2. 目标函数 f(x)3 初始化种群4. 计算适应度5. 选择…

再谈有效地访问Github

文章目录 1. 知识回顾2. 问题描述3. 问题解决3.1 Mac系统3.2 Windows系统4. 内容总结1. 知识回顾 我们在之前的内容中介绍过如何有效地访问Github。如果大家忘记的话可以点击这里查看。之前的内容主要偏重于问题的分析和解决的思路,有些朋友看了后还是不清楚如何解决问题。 …

设计模式之工厂模式FactoryPattern(二)

一、简单工厂 package com.xu.demo.factoryPattern;/*** 简单工厂模式类*/ public class SimpleFactoryPattern {public static Phone create(String name) {//根据输入对象名称判断返回相匹配的对象if("IPhone".equals(name)) {//返回对象return new IPhone();}else…

react中useRef是什么?有啥用?怎么用?

useRef是什么? 在 React 中,useRef 是一个 Hook,它可以用来存储一个可变的值,这个值在组件的整个生命周期内保持不变。useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传递给 useRef 的参数(initialValue…

【补充】图神经网络前传——图论

本文作为对图神经网络的补充。主要内容是看书。 仅包含Introduction to Graph Theory前五章以及其他相关书籍的相关内容(如果后续在实践中发现前五章不够,会补上剩余内容) 引入 什么是图? 如上图所示的路线图和电路图都可以使用…

国家开放大学2024年春《Matlab语言及其应用》实验一熟悉Matlab 操作环境参考答案

实验报告 姓名: 学号: 实验一名称:熟悉 Matlab 操作环境 实验目标:通过简单变量和矩阵的录入、计算和查看相关信息,了解 Matlab 操作界面 及各子窗口使用方法。熟悉一系列便于使用的 Matlab 函数和文件的工具。 实…

复旦 北大 | 从头训练中文大模型:CT-LLM

引言 当前,绝大多数大模型(LLMs)基本上都是以英文语料库训练得到的,然后经过SFT来匹配不同的语种。然而,今天给大家分享的这篇文章旨在从头开始训练中文大模型,在训练过程中「主要纳入中文文本数据」&…

qt5-入门-2D绘图-Graphics View 架构

参考: Qt Graphics View Framework_w3cschool https://www.w3cschool.cn/learnroadqt/4mvj1j53.html C GUI Programming with Qt 4, Second Edition 本地环境: win10专业版,64位,Qt 5.12 基础知识 QPainter比较适合少量绘图的情…

Linux 文件管理命令dc expr strings xargs

文章目录 2.Linux 文件管理命令2.54 dc:任意精度的计算器案例练习 2.25 expr:求表达式变量的值案例练习 2.56 strings:显示文件中的可打印字符案例练习 2.57 xargs:从标准输入读入参数案例练习 2.Linux 文件管理命令 2.54 dc&…

10个使用NumPy就可以进行的图像处理步骤

图像处理是一种数学计算。数字图像由称为像素的彩色小点组成。每个像素由红、绿、蓝(RGB)三个独立的颜色组成。每个像素中的主色由每个RGB分量的数值决定。 本文将介绍10个使用使用NumPy就可以进行的图像处理步骤,虽然有更强大的图像处理库,但是这些简单…

光伏管理系统:降本增效解决方案。

现在是光伏发展的重要节点,如何在众多同行中脱颖而出并且有效的达到降低成本、提高效率也是很多企业都在考虑的问题,鹧鸪云的团队研发出了光伏管理系统,通过更高效、更智能、更全面的管理方式来帮助企业实现降本增效的转型,小编带…

公考学习平台|基于SprinBoot+vue的公考学习平台(源码+数据库+文档)

公考学习平台目录 目录 基于SprinBootvue的公考学习平台 一、前言 二、系统设计 三、系统功能设计 5.1用户信息管理 5.2 视频信息管理 5.3公告信息管理 5.1论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&…

笔记-word导出PDF老是更新域导致图片和表格题注发生变化

问题描述:微软word 导出PDF时,老是更新域,导致图片和表格题注否跟着变化 以下是解决方法的具体描述。 目录 一、准备工作二、操作步骤 一、准备工作 1、工具版本:微软 word 2016(其他微软word版本也OK) …

【自研网关系列】过滤器链 -- 鉴权过滤器

🌈Yu-Gateway::基于 Netty 构建的自研 API 网关,采用 Java 原生实现,整合 Nacos 作为注册配置中心。其设计目标是为微服务架构提供高性能、可扩展的统一入口和基础设施,承载请求路由、安全控制、流量治理等…

智能化未来:Agent AI智能体的崛起与全球挑战

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

Redis源码学习记录:列表 (ziplist)

ziplist redis 源码版本&#xff1a;6.0.9。ziplist 的代码均在 ziplist.c / ziplist.h 文件中。 定义 ziplist总体布局如下&#xff1a; <zlbytes> <zltail> <zllen> <entry> <entry> ... <entry> <zlend> zlbytes&#xff1a;uin…

DevEco安装后卡死解决方案【鸿蒙开发Bug已解决】

文章目录 项目场景:问题描述原因分析:解决方案:其他解决方案此Bug解决方案总结Bug解决方案寄语项目场景: 最近也是遇到了这个问题,看到网上也有人在询问这个问题,本文总结了自己和其他人的解决经验,解决了【DevEco安装后卡死解决方案】的问题。 问题描述 安装完成最新…

numpy学习

import numpy as np## 创建一个一维数组 np.array([1,2,3])array([1, 2, 3])np.array([1,2,3])array([1, 2, 3])np.array([[1,2,3]])array([[1, 2, 3]])np.array([[1,2,3]]).Tarray([[1],[2],[3]])np.ones(4)array([1., 1., 1., 1.])np.zeros(4)array([0., 0., 0., 0.])np.rand…

高德优评项目,一单29.9,拷贝+评价,日入500

项目概述&#xff1a; 下载 地 址 &#xff1a; laoa1.cn/1836.html 本项目的核心非常简单&#xff0c;即在高德地图上撰写评论。每条评论完成后&#xff0c;参与者将获得8元的奖励。 此外&#xff0c;高德地图还会提供视频会员作为奖励。我们可以将这些视频会员进行变现…

LLM 构建Data Multi-Agents 赋能数据分析平台的实践之③:数据分析之二(大小模型协同)

一、概述 随着新一代信息技术在产业数字化中的应用&#xff0c;产生了大量多源多模态信息以及响应的信息处理模式&#xff0c;数据孤岛、模型林立的问题也随之产生&#xff0c;使得业务系统臃肿、信息处理和决策效率低下&#xff0c;面对复杂任务及应用场景问题求解效率低。针…