如何快速搭建一个自己个性化博客🤔？

VitePress + PWA + Unocss ⚗

起因：最近总想写点什么，记录生活，分享知识（常用说法）。

项目名称：KiwiBlog

技术栈：VitePress + Vue3 + PWA + Unocss（重度患者）

体验地址：KiwiBlog

源码：github.com/KiWi233333/…

喜欢的不妨给一个star哦，谢谢！😮

可能喜欢的点：简约、暗黑、全局动画、夜间过渡、基于vue可定制化高...

🎬 项目预览

夜间模式

白天模式

目录

文章详情

大家也可以分享自己的网站，看加一个友链 🙆‍♂️ 友情链接：KiwiBlog/Apply

友链

PWA应用

⏳ 起步 | Project Setup

# node 版本 >= 18
npm install -g pnpm
pnpm install

✨ 开发

pnpm run dev

📦 打包

pnpm run build

静态托管

❌ pnpm install error

查看源

pnpm get registry 

临时修改

pnpm --registry https://registry.npm.taobao.org install any-touch

持久使用

pnpm config set registry https://registry.npm.taobao.org

还原

pnpm config set registry https://registry.npmjs.org

🎊 部署

1、Netlify托管

1. 连接你的网站到Netlify：

   • 登录到你的Netlify账户。
   • 点击“New Site from Git”。
   • 选择你的代码托管服务（如GitHub、GitLab、Bitbucket等）。
   • 授权Netlify访问你的代码仓库。

2. 选择仓库和分支：

   • 选择你希望部署的仓库和分支。

3. 配置部署：

   • Netlify会自动识别你的静态网站，并提供一些基本配置选项。
   • 你可以设置构建命令和发布目录（通常是dist或public）。

4. 部署网站：

   • 点击“Deploy site”开始部署。
   • Netlify会自动构建你的网站并将其部署到一个URL。

5. 自定义域名（可选）：

   • 如果你有自己的域名，可以在Netlify的域名设置中添加并配置它。

6. 设置持续部署（可选）：

   • 你可以配置持续部署，这样每次你推送代码到仓库时，Netlify都会自动重新构建和部署你的网站。

7. 监控和维护：

   • 使用Netlify的仪表板监控你的网站性能和访问情况。
   • 根据需要调整配置和部署设置。

2、GithubPage托管

引用网上教程：保姆级教程：从零构建GitHub Pages静态网站（上）-阿里云开发者社区 (aliyun.com)