前言

WARNING

你需要明白,建站本身并不是一件很难的事,真正难的是你对网站的定位,网站内容的质量把控,网站提供给用户价值的大小,持续的内容输出以及运营。

另外你还需要知道,建站是有成本的,几百,几千到几万都有,每个网站的情况不同。

在开始使用实践之前,你需要注意,自建网站需要一定的相关知识,你可能会遇到一系列的问题,请确保你有独立解决问题的能力。

安装 / 开发

下载

这一步需要您的设备具有 Git 环境,并且能够连接到 GitHub。具体解决方法将不在此处赘述。

没有Git环境怎么办?请自行上网搜索,文档不会讲那么详细,如果你Git装不明白那说明你没有独立解决问题的能力,你不适合查看这个文档

将仓库 clone 下来:

bash
# 这里可以采用你自己的仓库地址
git clone git@github.com:imsyy/vitepress-theme-curve.git

然后 cd 到主题目录:

bash
cd vitepress-theme-curve

接下来就是安装依赖了。


安装依赖

这一步需要您的设备具有 Nodejs 环境,并且有一个良好的网络连接。具体安装方法将不在此处赘述。

建议使用 pnpm,若未安装,可使用 npm install pnpm -g 来安装。

WARNING

本主题依赖于 Node 18.x 及以上版本,请注意你本地的 Node 环境版本是否符合

确保您已经安装了 pnpm,然后主题根目录打开终端并执行以下命令:

bash
pnpm install

开发模式

在主题根目录打开终端并执行以下命令:

bash
pnpm dev

然后在浏览器打开 localhost:9877 即可预览主题。

请注意,处于开发模式时,文章内容或样式的变更会自动进行热重载,但是新建文章或者更改文章标题等操作将不会自动热重载,你需要手动进行停止并重新运行。


如何编辑内容

建议使用VSCode编辑器进行内容编辑 点我下载VSCode

具体切换中文教程等请自行上网查询


书写新的文章

你可以直接在站点根目录中的 posts 文件夹中直接新建 markdown 文件来书写,您的文件路径即为实际生成的网址路径。

添加新的页面

你可以直接在站点根目录中的 pages 文件夹中直接新建 markdown 文件来实现新建页面,您的文件路径即为实际生成的网址路径。

主题中已经内置了几个常用页面以供参考。

主题配置

本主题提供了一个 themeConfig.mjs 文件用来配置,它位于 .vitepress\theme\assets\themeConfig.mjs,你可以将它复制一份并移动至根目录中,在这里里面的修改将会覆盖初始配置
请注意,请不要更改文件名或者删除原配置文件,否则它将会不起作用

静态文件

通常情况下,静态文件处于根目录下的 public 文件夹中,通常用于存放字体或图片等文件信息。

了解更多:资源处理


部署

本地部署

部署一个静态站点最简单的也是最直接的方式。

  • 执行 build 命令来进行静态文件打包:
bash
pnpm build

如果这个过程中没有出现报错,那么就会在你的项目根目录下的 .vitepress/dist 文件夹中生成可供访问的静态站点源码,可以将这些文件放在任意可供显示静态站点的地方。

Vercel 部署

相信大部分小伙伴使用静态博客都是用的 Vercel 部署,所以主题已经内置了对于 Vercel 部署的支持,你可以在 Vercel 网页端直接导入仓库来实现自动部署。

当然,如果你不想使用 GitHub,也可直接在根目录中直接执行部署命令,Vercel CLI 会指引您完成部署。

bash
pnpm deploy:vercel

随后在 Vercel 中配置自定义域名即可完成整个部署流程。

赞赏博主
评论 隐私政策