江苏龙网

  1. 主页 > 生活百科 > >

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

文档

看到这些配置不要慌，都可以从官方文档配置选项中可以找到 。
https://vuepress.vuejs.org/zh/config/ 其次，需要重点说明的是我这里/和/zh是提供了多语言支持配置路径，可以通过官方文档的多语言支持选项进行配置 。
第四步我之所以很简单地概括前面的步骤，是因为官网文档讲解的比我更明白更详细，我也不想浪费大家的时间 。
下面，我们就要开始部署 。在部署打包之前呢!我们首先要注意的是配置文件，我们回到之前的配置文件 。
我们需要注意的是base选项，
module.exports = {base: '/strvejs-doc/',title: 'Strve.js',description: 'A JS library that can convert strings into view',head: [['link', { rel: 'icon', href: '/logo.png' }],] } 打开package.json文件 。
{"name": "strvejsdoc","version": "1.0.0","description": "Strve.js document address","main": "index.js","license": "MIT","private": false,"scripts": {"dev": "vuepress dev docs","build": "vuepress build docs"},"devDependencies": {"vuepress": "^1.8.2"} } 我们看到"scripts"属性下有"build"指令 。运行打包即可 。
打包后，默认会打包到dist文件夹中，你可以把文件夹中的内容放到线上网站上去，如果没有网站，也没有关系 。本篇文章就是让每个前端都拥有一个属于自己的博客线上网站 。
. ├── docs │├── .vuepress ││├── dist 第五步我们会用到GitHub，所以需要创建一个仓库，名字可以起一个好记的 。我这里因为是以Strve.js为例，所以名为strvejs-doc 。然后你需要做的是使用SSH方式Clone下来 。
如果没有配置SSH的可以根据我下面的步骤操作一下 。
切换到 .ssh目录
cd ~/.ssh 浏览文件夹目录
ls 输入你的邮箱(邮箱不必与GitHub账号相同，个人邮箱即可)，然后一直回车
ssh-keygen -t rsa -C "邮箱" 自动启动
eval "$(ssh-agent -s)" 添加文件
ssh-add ~/.ssh/id_rsa 查看 id_rsa.pub 文件的内容，复制一下，留存 。
cat id_rsa.pub 下面，我们就要打开Github，点击右上角个人头像下拉菜单中的Settings选项，然后点击左边栏的SSH and GPG keys选项 。
点击 New SSH key 按钮 。
输入Title 下的内容，这里随便起一个好记的标题 。
然后输入Key 下的内容，把刚才保存的id_rsa.pub 文件的内容复制到里面 。
现在，大功告成!
以后，你只需要复制项目仓库中 Clone按钮下的 SSH 选项框中的链接 。
然后，Clone 这个链接即可 。
Clone 下仓库之后，然后可以把刚才Vuepress项目导入进去 。
最后，Push一下 。
第六步首先，我们需要创建一个分支，比如命名pages 。然后，打开GitHub远程仓库，点击项目仓库Tab栏上的Settings选项，然后点击Pages选项 。
最后，在Source下选择刚才创建的pages分支，然后选择/(root)，点击Save保存按钮 。
不出意外，上方会给出一个网址，这里我们先保存一下，待会配置完成我们再点击浏览网址 。
第七步在项目根目录下创建一个deploy.sh文件，编辑如下内容：
#!/usr/bin/env shset -enpm run buildcd docs/.vuepress/distgit init git add -A git commit -m 'deploy'# 如果发布到 https://<USERNAME>.github.io/<REPO> git push -f git@github.com:<USERNAME>/<REPO>.git master:pagescd - 这里你需要自定义的是：USERNAME、REPO、master:pages，分别对应用户名、仓库名、(一般是master:分支名或者main:分支名) 。
第八步我们在package.json文件中定义一个调试命令 。
"scripts": {"sh":"bash deploy.sh" } 然后运行此命令 。
最后，我们在浏览器上打开刚才的网址 。

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

文章插图
 
以后，每次更改文档，只需一条命令，即可更新线上网站 。
结语自动化部署还有别的方案比如Github中的Actions，这里就不再详细介绍了 。赶快来试试上面的方案吧!部署一个属于自己的博客 。




推荐阅读


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

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