前言说到文档，我们可能第一时间想到很多技术文档，比如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-docStrve.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(optional)││├──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:trueheroImage:/logo.pngheroText:Strve.jstagline:一个可以将字符串转换成视图的JS库actionText:QuickStart→actionLink:/zh/started/features:-title:??Fastdetails：超快的虚拟DOM。-标题：📦小篇幅细节：源代码文件大小只有4kb。-标题：🗂灵活的细节：很容易灵活地拆装不同的代码块。footer:MITLicensed|Copyright?2021-presentmaomincoding---以上格式为FrontMatter，具体可根据官方文档进行详细配置。https://vuepress.vuejs.org/zh/theme/default-theme-config.html#HomePage第三步然后需要注意Vuepress的配置文件——config.js。.├─docs│└─.vuepress│└─config.js同样以Strve.js官网文档为例：module.exports={base:'/strvejs-doc/',///site/strvejs/title:'Strve.js',description:'AJSlibrarythatcanconvertstringsintoview',head:[['link',{rel:'icon',href:'/logo.png'}],],markdown:{lineNumbers:true},locales:{'/':{lang:'en-US',title:'Strve.js',description:'AJSlibrarythatcanconvertstringsintoview'},'/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:'介绍',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:'Other',path:'/zh/other/',}],}},smoothScroll:true}}看到这些配置不要惊慌，你可以从官方文档配置选项中找到https://vuepress.vuejs.org/zh/config/下载它们。其次需要注意的是这里的/和/zh提供了多语言支持的配置路径，可以通过官方文档实现多语言。支持配置选项。之所以在第四步简单总结一下前面的步骤，是因为官网文档解释的比我清楚详细，不想浪费大家的时间。接下来，我们就要开始部署了。在部署和打包之前！首先要注意的是配置文件，我们回到之前的配置文件。我们需要注意的是base选项，module.exports={base:'/strvejs-doc/',title:'Strve.js',description:'AJSlibrarythatcanconvertstringsintoview',head:[['link',{rel:'icon',href:'/logo.png'}],]}打开package.json文件。{"name":"strvejsdoc","version":"1.0.0","description":"Strve.jsdocumentaddress","main":"index.js","license":"MIT","private":false,"scripts":{"dev":"vuepressdevdocs","build":"vuepressbuilddocs"},"devDependencies":{"vuepress":"^1.8.2"}}我们在"scripts"属性下看到有“构建”命令。只需运行包。打包后默认打包到dist文件夹下。您可以将内容放在在线网站的文件夹中。没有网站也没关系。这篇文章就是让每个前端都有自己的博客上线网站。.├──docs│├──.vuepress││├──dist第五步，我们会用到GitHub，所以我们需要创建一个好记名字的仓库。因为我这里以Strve.js为例，所以命名为strvejs-doc。然后你需要做的就是使用SSH克隆它。如果你还没有配置SSH，你可以按照我下面的步骤进行。切换到.ssh目录cd~/.ssh浏览文件夹目录ls输入你的邮箱（邮箱不必和GitHub账号一样，个人邮箱即可），然后回车ssh-keygen-trsa-C"mailbox"自动启动eval"$(ssh-agent-s)"添加文件ssh-add~/.ssh/id_rsa查看id_rsa.pub文件内容，复制，保存。在catid_rsa.pub下，我们打开Github，点击右上角个人资料头像下拉菜单中的设置选项，然后点击左侧栏中的SSH和GPG密钥选项。单击新建SSH密钥按钮。在Title下输入内容，这里是一个好记的标题。然后在Key下输入内容，将刚刚保存的id_rsa.pub文件内容复制进去。现在，你完成了！从现在开始，您只需要复制项目存储库中“克隆”按钮下的SSH选项框中的链接即可。然后，克隆此链接。Clone下载仓库后，接下来就可以导入刚才的Vuepress项目了。最后，推一下。第6步首先，我们需要创建一个分支，例如命名页面。然后，打开GitHub远程仓库，在项目仓库的Tab栏点击Settings选项，再点击Pages选项。最后在Source下选择刚刚创建的pages分支，然后选择/(root)，点击Save按钮。不出意外的话，上面会给出一个URL，我们先保存在这里，配置完成后点击浏览该URL。第七步，在项目根目录下创建deploy.sh文件，编辑如下内容：#!/usr/bin/envshset-enpmrunbuildcddocs/.vuepress/distgitinitgitadd-Agitcommit-m'deploy'#如果发布到https：//
