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

开发 前端 自动化
说起文档,我们可能会第一时间会想起很多技术文档,比如Vue.js文档、React.js文档、TypeScript文档,它们都有相似的布局和样式。

前言

说起文档,我们可能会第一时间会想起很多技术文档,比如Vue.js文档、React.js文档、TypeScript文档,它们都有相似的布局和样式。

那么,作为开发者的我们,怎么不也搞一个类似于技术文档的网站作为自己的博客呢?现在有很多开源的项目可以做博客,比如基于Vue.js开发的Vuepress以及同一家的Vitepress,还有基于React.js开发的Docusaurus。这么多方案,我们今天就拿Vuepress为例来搞一下线上可以访问的博客。

在开始实战之前呢!透露一下最近在搞得开源库Strve.js,它是一个可以将字符串转换为视图的JS库,换句话讲,也可以说是一款轻量的MVVM框架。目前Strve.js官方文档就是用的基于Vuepress来进行开发部署的,感兴趣的可以访问下方的官方文档源码地址,可以根据我的来进行自定义配置自己的博客网站。如果觉得不错的话,别忘了帮忙点个Star啊!

Strve.js官方文档源码地址

  1. https://github.com/maomincoding/strvejs-doc 

Strve.js官方文档

  1. https://maomincoding.github.io/strvejs-doc/ 

实战

自己亲身实战所攒下的经验,请认真往下看哦!

学习一个新技术,我们首先做得事就是打开官网文档,根据快速上手或者指南来进行大致的了解。

第一步

打开Vuepress官网:

  1. https://vuepress.vuejs.org/zh/ 

官网上怎么安装Vuepress项目已经很详细了,这里就不再阐述,可以根据快速上手快速搭建一个Vuepress项目。

  1. https://vuepress.vuejs.org/zh/guide/getting-started.html 

一般搭建完成之后,会显示以下目录结构:

  1. ├── docs 
  2. │   ├── .vuepress (可选的) 
  3. │   │   ├── components (可选的) 
  4. │   │   ├── theme (可选的) 
  5. │   │   │   └── Layout.vue 
  6. │   │   ├── public (可选的) 
  7. │   │   ├── styles (可选的) 
  8. │   │   │   ├── index.styl 
  9. │   │   │   └── palette.styl 
  10. │   │   ├── templates (可选的, 谨慎配置) 
  11. │   │   │   ├── dev.html 
  12. │   │   │   └── ssr.html 
  13. │   │   ├── config.js (可选的) 
  14. │   │   └── enhanceApp.js (可选的) 
  15. │   │  
  16. │   ├── README.md 
  17. │   ├── guide 
  18. │   │   └── README.md 
  19. │   └── config.md 
  20. │  
  21. └── package.json 

第二步

假设你已经在第一步中成功搭建起了项目,并且成功启动。下面,我们将会改改代码看下都是什么效果。

首先,我会看下这个文件doc > README.md,这个文件你可以把它理解成首页。

  1. ├─ docs 
  2. │  ├─ README.md 

以Strve.js文档首页为例:

  1. --- 
  2. home: true 
  3. heroImage: /logo.png 
  4. heroText: Strve.js 
  5. tagline: 一个可以将字符串转换为视图的JS库 
  6. actionText: 快速上手 → 
  7. actionLink: /zh/started/ 
  8. features: 
  9. - title: ⚡️ 快速地 
  10.   details: 超快的虚拟 DOM。 
  11. - title: 📦 空间小 
  12.   details: 源代码文件大小仅仅4kb。 
  13. - title: 🗂 灵活地 
  14.   details: 易于灵活地拆装不同的代码块。 
  15. footer: MIT Licensed | Copyright © 2021-present maomincoding 
  16. --- 

上面的格式是Front Matter,可以根据官方文档进行详细配置。

  1. https://vuepress.vuejs.org/zh/theme/default-theme-config.html#首页 

第三步

那么下面你需要关注的是Vuepress配置文件——config.js。

  1. ├─ docs 
  2. │  └─ .vuepress 
  3. │     └─ config.js 

同样,拿Strve.js官网文档为例:

  1. module.exports = { 
  2.     base: '/strvejs-doc/', // /site/strvejs/ 
  3.     title: 'Strve.js'
  4.     description: 'A JS library that can convert strings into view'
  5.     head: [ 
  6.         ['link', { rel: 'icon', href: '/logo.png' }], 
  7.     ], 
  8.     markdown: { 
  9.         lineNumbers: true 
  10.     }, 
  11.     locales: { 
  12.         '/': { 
  13.             lang: 'en-US'
  14.             title: 'Strve.js'
  15.             description: 'A JS library that can convert strings into view' 
  16.         }, 
  17.         '/zh/': { 
  18.             lang: 'zh-CN'
  19.             title: 'Strve.js'
  20.             description: '一个可以将字符串转换为视图的JS库' 
  21.         } 
  22.     }, 
  23.     themeConfig: { 
  24.         displayAllHeaders: true
  25.         sidebar: 'auto'
  26.         sidebarDepth:4, 
  27.         nav: [ 
  28.             { text: 'GitHub', link: 'https://github.com/maomincoding/strve' } 
  29.         ], 
  30.         locales: { 
  31.             '/': { 
  32.                 selectText: 'Languages'
  33.                 label: 'English'
  34.                 ariaLabel: 'Languages'
  35.                 sidebar: [ 
  36.                     { 
  37.                         title: 'Introduce'
  38.                         path: '/introduce/'
  39.                     }, 
  40.                     { 
  41.                         title: 'Install'
  42.                         path: '/install/'
  43.                     }, 
  44.                     { 
  45.                         title: 'Started'
  46.                         path: '/started/'
  47.                     }, 
  48.                     { 
  49.                         title: 'Usage'
  50.                         path: '/usage/'
  51.                     }, 
  52.                     { 
  53.                         title: 'Tool'
  54.                         path: '/tool/'
  55.                     }, 
  56.                     { 
  57.                         title: 'Other'
  58.                         path: '/other/'
  59.                     } 
  60.                 ], 
  61.             }, 
  62.             '/zh/': { 
  63.                 selectText: '选择语言'
  64.                 label: '简体中文'
  65.                 sidebar: [ 
  66.                     { 
  67.                         title: '介绍'
  68.                         path: '/zh/introduce/'
  69.                     }, 
  70.                     { 
  71.                         title: '安装'
  72.                         path: '/zh/install/'
  73.                     }, 
  74.                     { 
  75.                         title: '快速上手'
  76.                         path: '/zh/started/'
  77.                     }, 
  78.                     { 
  79.                         title: '使用'
  80.                         path: '/zh/usage/'
  81.                     }, 
  82.                     { 
  83.                         title: '工具'
  84.                         path: '/zh/tool/'
  85.                     }, 
  86.                     { 
  87.                         title: '其它'
  88.                         path: '/zh/other/'
  89.                     } 
  90.                 ], 
  91.             } 
  92.         }, 
  93.         smoothScroll: true 
  94.     } 

看到这些配置不要慌,都可以从官方文档配置选项中可以找到。

  1. https://vuepress.vuejs.org/zh/config/ 

其次,需要重点说明的是我这里/和/zh是提供了多语言支持配置路径,可以通过官方文档的多语言支持选项进行配置。

第四步

我之所以很简单地概括前面的步骤,是因为官网文档讲解的比我更明白更详细,我也不想浪费大家的时间。

下面,我们就要开始部署。在部署打包之前呢!我们首先要注意的是配置文件,我们回到之前的配置文件。

我们需要注意的是base选项,

  1. module.exports = { 
  2.     base: '/strvejs-doc/',  
  3.     title: 'Strve.js'
  4.     description: 'A JS library that can convert strings into view'
  5.     head: [ 
  6.         ['link', { rel: 'icon', href: '/logo.png' }], 
  7.     ] 

打开package.json文件。

  1.   "name""strvejsdoc"
  2.   "version""1.0.0"
  3.   "description""Strve.js document address"
  4.   "main""index.js"
  5.   "license""MIT"
  6.   "private"false
  7.   "scripts": { 
  8.     "dev""vuepress dev docs"
  9.     "build""vuepress build docs" 
  10.   }, 
  11.   "devDependencies": { 
  12.     "vuepress""^1.8.2" 
  13.   } 

我们看到"scripts"属性下有"build"指令。运行打包即可。

打包后,默认会打包到dist文件夹中,你可以把文件夹中的内容放到线上网站上去,如果没有网站,也没有关系。本篇文章就是让每个前端都拥有一个属于自己的博客线上网站。

  1. ├── docs 
  2. │   ├── .vuepress 
  3. │   │   ├── dist 

第五步

我们会用到GitHub,所以需要创建一个仓库,名字可以起一个好记的。我这里因为是以Strve.js为例,所以名为strvejs-doc。然后你需要做的是使用SSH方式Clone下来。

如果没有配置SSH的可以根据我下面的步骤操作一下。

切换到 .ssh目录

  1. cd ~/.ssh 

浏览文件夹目录

  1. ls 

输入你的邮箱(邮箱不必与GitHub账号相同,个人邮箱即可),然后一直回车

  1. ssh-keygen -t rsa -C "邮箱" 

自动启动

  1. eval "$(ssh-agent -s)" 

添加文件

  1. ssh-add ~/.ssh/id_rsa 

查看 id_rsa.pub 文件的内容,复制一下,留存。

  1. 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文件,编辑如下内容:

  1. #!/usr/bin/env sh 
  2.  
  3. set -e 
  4.  
  5. npm run build 
  6.  
  7. cd docs/.vuepress/dist 
  8.  
  9. git init 
  10. git add -A 
  11. git commit -m 'deploy' 
  12.  
  13. # 如果发布到 https://<USERNAME>.github.io/<REPO> 
  14. git push -f git@github.com:<USERNAME>/<REPO>.git master:pages 
  15.  
  16. cd - 

这里你需要自定义的是:USERNAME、REPO、master:pages,分别对应用户名、仓库名、(一般是master:分支名或者main:分支名)。

第八步

我们在package.json文件中定义一个调试命令。

  1. "scripts": { 
  2.     "sh":"bash deploy.sh" 

然后运行此命令。

最后,我们在浏览器上打开刚才的网址。

以后,每次更改文档,只需一条命令,即可更新线上网站。

结语 

自动化部署还有别的方案比如Github中的Actions,这里就不再详细介绍了。赶快来试试上面的方案吧!部署一个属于自己的博客。

责任编辑:武晓燕 来源: 前端历劫之路
相关推荐

2022-04-20 06:56:33

Strve.js前端

2016-07-05 16:30:10

碳云智能数字化生命

2021-12-19 07:22:16

Create前端工具

2019-09-19 09:02:52

开发者技能工具

2021-12-23 06:07:21

前端技术编程

2022-03-07 10:27:03

Linux开源社区

2018-02-25 09:00:00

LinuxQ4OS开源

2021-10-14 06:52:47

自动化开发环境

2023-04-03 09:44:18

2023-03-06 08:41:32

CPU使用率排查

2013-09-03 09:58:51

Web前端

2020-12-08 06:20:49

前端重构Vue

2019-08-09 10:52:58

Linux内核Spark

2022-03-31 08:15:59

递归代码非递归

2020-09-07 14:10:26

AI 数据人工智能

2013-03-22 15:15:28

自动化管理部署虚拟化

2014-02-17 15:15:56

ARIS文档

2020-10-14 10:30:07

前端Node代码

2020-01-16 09:00:00

AI人工智能ML
点赞
收藏

51CTO技术栈公众号