用vitepress搭建文档网站踩坑记录

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 之前用 vuepress2 + vite 成功搭建了一个博客网站,这不 vue3 的文档改用 vitepress 搭建的,看着挺好看的,就想着也来折腾折腾搭建一个工作的文档网站

之前用 vuepress2 + vite 成功搭建了一个博客网站,这不 vue3 的文档改用 vitepress 搭建的,看着挺好看的,就想着也来折腾折腾搭建一个工作的文档网站。

配置目录名叫 .vitepress

注意不要走错频道了,这不是 vuepress 的片场,刚开始我就新建成了 .vuepress,配置了半天导航、侧边栏咋就是没效果呢,明明跟 Getting Started 上教的代码一毛一样!

.vitepress 这个目录要放在 docs 目录下

刚开始我就直接放在了根目录下,和 docs 目录平级,怎么改都不起作用,最后才发现是要放在 docs 目录下面的。

homepage 主页设置

vuepress 或者网上 vitepress 的一些教程都写的设置 home: true,就可以设置成主页,试了好久没效果,最后看文档人家的是要设置 layout: home 才行,一试文档诚不骗我,perfect!

这一点 vitepress 官方文档里的版本迁移 Migration from VitePress 0.x 里其实已经有说明。

outDir 和 srcDir

outDir 打包后的输出目录,默认 ./.vitepress/dist。

srcDir markdown 页面目录(相对项目根目录),比如为了页面文件好管理,我们往往会自己加一个 pages 或 src 目录用来存放页面,这时 config.js 里的设置 srcDir: 'src',这里设置不对左侧菜单高亮和前后一篇文章会出现错误。

srcDir

前后文和最近更新提示文字

设置主题 Theme Configs 的 themeConfig:lastUpdatedText、docFooter

{
   
  "themeConfig": {
   
    "lastUpdatedText": "最近更新",
    "docFooter": {
   
      "prev": "前一篇",
      "next": "后一篇"
    }
  }
}

github 部署自定义域名

先将咱的域名解析到 github,网上有说直接先去查 github.io 的ip,然后解析到这个ip上,不过ip可能会变,所以最好不要用这个。

直接添加一个 CNAME 解析,将你自己的域名指向 github 的 username.github.io,这样访问你的域名就相当于访问 username.github.io,
然后再github pages 里 Custom domain 设置你的域名,提示解析成功就可以用你的域名访问了。

不过这样设置有一个问题,就是每次 push 流水线打包的时候设置的域名都会被重置,每次更新后都需要自己重新去设置下,解决办法就是在你的项目静态目录文件夹里,一般是 public 文件夹下新建一个 CNAME 文件(不需要文件后缀,文件名就设置成 CNAME),里面只写上你的自定义域名,这样每次打包后这个文件都会被复制到项目根目录里,会自动设置你的域名。

目录
相关文章
|
7月前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的网上手机销售系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的网上手机销售系统附带文章和源代码设计说明文档ppt
72 0
|
2月前
|
自然语言处理 JavaScript 前端开发
静态文档网站生成神奇器:VuePress!尤雨溪的旧爱!
【10月更文挑战第3天】静态文档网站生成神奇器:VuePress!尤雨溪的旧爱!
静态文档网站生成神奇器:VuePress!尤雨溪的旧爱!
|
7月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的网上招聘系统附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的网上招聘系统附带文章和源代码设计说明文档ppt
34 1
|
7月前
|
JavaScript Java 测试技术
基于小程序的微信阅读网站+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的微信阅读网站+springboot+vue.js附带文章和源代码设计说明文档ppt
42 1
|
3月前
|
自然语言处理 JavaScript 网络协议
简单使用vitepress快速搭建一个文档网站
VitePress 是一个静态站点生成器 (SSG),类似的项目有docsify、VuePress、hexo。用 Markdown 编写的内容生成可以轻松部署到任何地方的静态 HTML 页。
70 9
|
5月前
|
开发框架 前端开发 JavaScript
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
|
5月前
VuePress 开发技术文档网站,管理.md文件,生成静态网站
VuePress 开发技术文档网站,管理.md文件,生成静态网站
148 0
|
7月前
|
JavaScript Java 测试技术
基于ssm+vue.js的网上书城系统附带文章和源代码设计说明文档ppt
基于ssm+vue.js的网上书城系统附带文章和源代码设计说明文档ppt
39 1
|
7月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的仓库在线管理系统附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的仓库在线管理系统附带文章和源代码设计说明文档ppt
31 1
|
7月前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的智能交互式在线网上花店附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的智能交互式在线网上花店附带文章和源代码设计说明文档ppt
47 0
下一篇
DataWorks