vitepress的快速搭建

就是本站的记录。

开始

在Github随便找个看上的vitepress项目

比如这个 https://github.com/DanXiaoMoYan/Moji/tree/main

原站演示 blog.dxmy.fun

其实就是别的文档库，看起来比那些花里胡哨的玩意干净，本着拿来主义的伟大精神，就直接伸手了。

修改内容

修改解压出来的文件

一般好像就涉及一两个两三个设置文件。

就这个项目我们来看看怎么改

用你惯用的编辑器打开

.vitepress/config.mts

站点配置部分

仅需要修改汉字提示部分，替换掉原站的信息即可。注意站标地址路径。

  // 站点配置
  title: '站点标题',
  description: '站点描述',
  head: [ [ 'link', { rel: 'icon', href: '/站标ico地址' } ] ],
  lang: 'zh-cn',
  srcDir: 'src',
  cleanUrls: true,

LOGO修改

显示在站点左上大顶标题前的那个小图标。注意图片路径。

  // 主题配置
  themeConfig: {
    logo: '/你的网站LOGO地址',

栏目路径处理

注意侧边栏路径需要有上面srcDir:里的src，导航栏则不用。

    // 导航栏
    nav: [
      { text: '主页', link: '/' },
      { text: '博客', link: '/blog/', activeMatch: '^/blog/' },
      { text: '笔记', link: '/note/', activeMatch: '^/note/' },
      { text: '杂谈', link: '/other/', activeMatch: '^/other/' }
    ],

    // 侧边栏  
    sidebar: {
      '/blog/': generateSidebar('src/blog'),
      '/note/': generateSidebar('src/note'),
      '/other/': generateSidebar('src/other')
    },

    //右上角的github图标和链接，不需要的可直接删。也可以模仿它的样式添加别的链接。
    //这些垃圾SSG好像都很喜欢挂个github的狗皮膏药。

    socialLinks: [
      { icon: 'github', link: 'https://github.com/DanXiaoMoYan' }
    ],

搜索

只需要修改两个汉字“莫记”替换成你的站名或者改成其它文字，随便改。

buttonText: '在莫记中搜索'

首页

打开src/index.md文本修改首页封面内容

这个能看懂汉字就能改吧。替换成你想要的就行。

上线

github新建库，我用github desktop绿色版，以下都基于桌面版操作。

打开github desktop新建库，取个名比如叫123，在本地选个文件夹作为项目文件夹，以后123就在项目文件夹里。

完事打开这个123文件夹会发现里面有个git的文件夹，这个不用管它。

把刚才修改好的文件，也就是里面那个Moji-main文件夹下的所有文件全部移动进123文件夹。

然后打开github desktop直接推送就行。

部署

我比较习惯用cloudflare，因为域名都在那边用起来比较方便。

登陆后在侧栏找到cloudflare的Workers 和 Pages点开它。

点击那个蓝色的创建应用程序。会看到也选项卡，选Pages。

“连接到Git”。点击会要你再次输入密码验证登陆Github去授权。

授权页面两个选项随便选，第二个要在选项卡下拉菜单找到自己新建的那个123的库，选定他。

完事网页会自动跳转回cloudflare，再次重复上面的动作打开“链接到GIT”。

选择一个存储库 123 开始设置

构建命令：pnpm docs:build
构建输出目录：.vitepress/dist
根目录：不用写

注意前面不用带/它那个预设的有。

等它部署完成打开提供的链接就能看到了。

本地开发

本地环境node.js

https://nodejs.cn/download/
https://nodejs.org/en/download/current

安装依赖 pnpm i

启动开发pnpm docs:dev

生产构建pnpm docs:build

注意事项

• 更新文章丢进相对应的分类文件夹就行了。

• 新建或更改分类目录文件夹要注意一同修改顶部导航或侧栏路径。

• 文章文件夹的修改则不用管路径。