江苏龙网

  1. 主页 > 生活百科 > >

文档如何自动化部署到线上环境「每个前端都可以拥有自己的博客」

文档

作者：maomincoding 来源：前端历劫之路

文档如何自动化部署到线上环境「每个前端都可以拥有自己的博客」

文章插图
 
前言说起文档，我们可能会第一时间会想起很多技术文档，比如Vue.js文档、React.js文档、TypeScript文档，它们都有相似的布局和样式 。
那么，作为开发者的我们，怎么不也搞一个类似于技术文档的网站作为自己的博客呢?现在有很多开源的项目可以做博客，比如基于Vue.js开发的Vuepress以及同一家的Vitepress，还有基于React.js开发的Docusaurus 。这么多方案，我们今天就拿Vuepress为例来搞一下线上可以访问的博客 。
在开始实战之前呢!透露一下最近在搞得开源库Strve.js，它是一个可以将字符串转换为视图的JS库，换句话讲，也可以说是一款轻量的MVVM框架 。目前Strve.js官方文档就是用的基于Vuepress来进行开发部署的，感兴趣的可以访问下方的官方文档源码地址，可以根据我的来进行自定义配置自己的博客网站 。如果觉得不错的话，别忘了帮忙点个Star啊!
Strve.js官方文档源码地址
https://github.com/maomincoding/strvejs-doc Strve.js官方文档
【文档如何自动化部署到线上环境「每个前端都可以拥有自己的博客」】https://maomincoding.github.io/strvejs-doc/ 实战自己亲身实战所攒下的经验，请认真往下看哦!
学习一个新技术，我们首先做得事就是打开官网文档，根据快速上手或者指南来进行大致的了解 。
第一步打开Vuepress官网:
https://vuepress.vuejs.org/zh/ 官网上怎么安装Vuepress项目已经很详细了，这里就不再阐述，可以根据快速上手快速搭建一个Vuepress项目 。
https://vuepress.vuejs.org/zh/guide/getting-started.html 一般搭建完成之后，会显示以下目录结构：
. ├── docs │├── .vuepress (可选的) ││├── components (可选的) ││├── theme (可选的) │││└── Layout.vue ││├── public (可选的) ││├── styles (可选的) │││├── index.styl │││└── palette.styl ││├── templates (可选的, 谨慎配置) │││├── dev.html │││└── ssr.html ││├── config.js (可选的) ││└── enhanceApp.js (可选的) │││├── README.md │├── guide ││└── README.md │└── config.md │└── package.json 第二步假设你已经在第一步中成功搭建起了项目，并且成功启动 。下面，我们将会改改代码看下都是什么效果 。
首先，我会看下这个文件doc > README.md，这个文件你可以把它理解成首页 。
. ├─ docs │├─ README.md 以Strve.js文档首页为例：
--- home: true heroImage: /logo.png heroText: Strve.js tagline: 一个可以将字符串转换为视图的JS库 actionText: 快速上手 → actionLink: /zh/started/ features: - title: ?? 快速地details: 超快的虚拟 DOM 。- title:空间小details: 源代码文件大小仅仅4kb 。- title:灵活地details: 易于灵活地拆装不同的代码块 。footer: MIT Licensed | Copyright © 2021-present maomincoding 上面的格式是Front Matter，可以根据官方文档进行详细配置 。
https://vuepress.vuejs.org/zh/theme/default-theme-config.html#首页 第三步那么下面你需要关注的是Vuepress配置文件——config.js 。
. ├─ docs │└─ .vuepress │└─ config.js 同样，拿Strve.js官网文档为例：
module.exports = {base: '/strvejs-doc/', // /site/strvejs/title: 'Strve.js',description: 'A JS library that can convert strings into view',head: [['link', { rel: 'icon', href: '/logo.png' }],],markdown: {lineNumbers: true},locales: {'/': {lang: 'en-US',title: 'Strve.js',description: 'A JS library that can convert strings into view'},'/zh/': {lang: 'zh-CN',title: 'Strve.js',description: '一个可以将字符串转换为视图的JS库'}},themeConfig: {displayAllHeaders: true,sidebar: 'auto',sidebarDepth:4,nav: [{ text: 'GitHub', link: 'https://github.com/maomincoding/strve' }],locales: {'/': {selectText: 'Languages',label: 'English',ariaLabel: 'Languages',sidebar: [{title: 'Introduce',path: '/introduce/',},{title: 'Install',path: '/install/',},{title: 'Started',path: '/started/',},{title: 'Usage',path: '/usage/',},{title: 'Tool',path: '/tool/',},{title: 'Other',path: '/other/',}],},'/zh/': {selectText: '选择语言',label: '简体中文',sidebar: [{title: '介绍',path: '/zh/introduce/',},{title: '安装',path: '/zh/install/',},{title: '快速上手',path: '/zh/started/',},{title: '使用',path: '/zh/usage/',},{title: '工具',path: '/zh/tool/',},{title: '其它',path: '/zh/other/',}],}},smoothScroll: true} }


推荐阅读


上一篇：嵌入式程序架构--你了解多少？

下一篇：红茶分为多少种品级,红茶种类大全