您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

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

时间:2021-12-23 11:36:04  来源:  作者:Nodejs开发

作者: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 
    } 
} 

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

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 sh 
 
set -e 
 
npm run build 
 
cd docs/.vuepress/dist 
 
git init 
git add -A 
git commit -m 'deploy' 
 
# 如果发布到 https://<USERNAME>.github.io/<REPO> 
git push -f git@github.com:<USERNAME>/<REPO>.git master:pages 
 
cd - 

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

第八步

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

"scripts": { 
    "sh":"bash deploy.sh" 
} 

然后运行此命令。

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

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

 

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

结语

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



Tags:文档   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
现在大家都非常喜欢用微信进行社交。如果微信上有一些重要的聊天记录,我们可以将它保存成文档,这样后续查找也更方便,还能防止丢失。小编带来了具体的介绍,赶紧来看下吧。微信聊...【详细内容】
2021-12-24  Tags: 文档  点击:(10)  评论:(0)  加入收藏
作者:maomincoding 来源:前端历劫之路 前言说起文档,我们可能会第一时间会想起很多技术文档,比如Vue.js文档、React.js文档、TypeScript文档,它们都有相似的布局和样式。那么,作为...【详细内容】
2021-12-23  Tags: 文档  点击:(8)  评论:(0)  加入收藏
我们在做问卷调差或者填写一些资料表的时候,会遇到一些word文档中有小方框【□】,需要在里面打钩【&radic;】,那么是如何操作呢,今天和大家分享一下。方法一1,打开我们需要操作...【详细内容】
2021-11-26  Tags: 文档  点击:(35)  评论:(0)  加入收藏
一,点击文档上面的插入标签 二,选择“符号”&mdash;其他符号 三,使用字体“仿宋”“宋体”“仿宋gb”系列都可以 四,左八角括号用“3014” 五,右八角括号用“3015” 上面就是WPS...【详细内容】
2021-10-21  Tags: 文档  点击:(64)  评论:(0)  加入收藏
前言前后端分离开发模式中,api文档是最好的沟通方式。今天就来说一说如何整合Swagger生成一套漂亮、美观、实用的接口文档。 源码传送门: https://gitee.com/huoqstudy/xiliu-...【详细内容】
2021-09-08  Tags: 文档  点击:(65)  评论:(0)  加入收藏
WPS这款办公软件,简单轻巧,日常办公很给力!但是在安装完WPS这款软件之后,计算机/此电脑里面会多出来一个WPS云文档图标 对于有点强迫症的我来说有点不舒服,很是别扭,那就想办法把...【详细内容】
2021-08-04  Tags: 文档  点击:(114)  评论:(0)  加入收藏
日常工作和生活中,我们经常会保管一些公司的机密文件、重要资料,还有储存账号密码、隐私信息等私人文档。 如何保护这些文档的安全?如何更好地加密以防文档泄露?不妨来看看 WPS...【详细内容】
2021-08-04  Tags: 文档  点击:(84)  评论:(0)  加入收藏
作者介绍@草帽小子数据产品经理一枚~用户画像、埋点、指标体系、BI、广告投放等系列文章作者 大家好,我是你们的老朋友草帽小子。 最近身边有很多小伙伴转行了数据产品经理,或...【详细内容】
2021-07-28  Tags: 文档  点击:(60)  评论:(0)  加入收藏
Word文档打开的时候会出现一个弹框,这是告知文件仅限只读模式的弹框。不管点击【是】或者【否】都是可以进入文档里面查看内容的,只是不能编辑而已。那么,该如何取消这种只读模...【详细内容】
2021-07-20  Tags: 文档  点击:(98)  评论:(0)  加入收藏
你觉得Word文档中最强大的快捷键是哪个呢?我觉得非Ctrl+H莫属,Ctrl+H的作用是调出替换窗口。很多人对这个界面都非常熟悉,它与Excel中的替换界面几乎是一模一样的,但是Word文档...【详细内容】
2021-06-25  Tags: 文档  点击:(77)  评论:(0)  加入收藏
▌简易百科推荐
相信每一个前端在对接 API 时,多多少少一定遇过以下错误: 虽然要解决此问题大部分还是需要后端帮忙,但前端也需要知道为什么会发生、要如何解决。同源政策 (Same Origin Policy...【详细内容】
2021-12-24  前端小智    Tags:同源政策   点击:(6)  评论:(0)  加入收藏
一般的docker镜像为了节省空间,通常是没有安装systemd或者sysvint这类初始化系统的进程。一旦容器的起始进程不稳定将会产生大量的僵尸进程,影响宿主系统的运行。 缺少init的...【详细内容】
2021-12-23  mj谈云技术    Tags:容器   点击:(6)  评论:(0)  加入收藏
作者:maomincoding 来源:前端历劫之路 前言说起文档,我们可能会第一时间会想起很多技术文档,比如Vue.js文档、React.js文档、TypeScript文档,它们都有相似的布局和样式。那么,作为...【详细内容】
2021-12-23  Nodejs开发    Tags:文档   点击:(8)  评论:(0)  加入收藏
作者:damyxu,腾讯 PCG 前端开发工程师iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点,补足...【详细内容】
2021-12-16  damyxu  腾讯技术工程  Tags:前端   点击:(15)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条