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

发表于 3年以前  | 总阅读数:346 次

前言

说起文档,我们可能会第一时间会想起很多技术文档,比如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的可以根据我下面的步骤操作一下。

1 . 切换到 .ssh目录

cd ~/.ssh

2 . 浏览文件夹目录

ls

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

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

4 . 自动启动

eval "$(ssh-agent -s)"

5 . 添加文件

ssh-add ~/.ssh/id_rsa

6 . 查看 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 -

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

第八步

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

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

然后运行此命令。

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

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

结语

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

如果有疑问,欢迎留言联系我。

本文由哈喽比特于3年以前收录,如有侵权请联系我们。
文章来源:https://mp.weixin.qq.com/s/ljhQ0878QkGpLhRIZU4msw

 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:1年以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:1年以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:1年以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:1年以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:1年以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:1年以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:1年以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:1年以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:1年以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:1年以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:1年以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:1年以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:1年以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:1年以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:1年以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:1年以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:1年以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:1年以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:1年以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:1年以前  |  398次阅读  |  详细内容 »
 相关文章
Android插件化方案 5年以前  |  237276次阅读
vscode超好用的代码书签插件Bookmarks 2年以前  |  8110次阅读
 目录