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

作者: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,这里就不再详细介绍了。赶快来试试上面的方案吧!部署一个属于自己的博客。

原文地址:https://www.toutiao.com/article/7043577127098270215/

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


所以很多人都会选择将这些生活琐事来交给智能化产品,在众多产品中,扫拖机器人所给我们带来的便利性最强,扫地、拖地全都一气呵成,不需要人为过多干预,不过目前大多数扫拖机器人对于双手解放得不彻底。而石头作为
“昨天的经历都将成为明天的力量。” 将绝大部分精力都奉献给璃月港的刻晴,可以说是《原神》中的高人气角色了,虽然是常驻角色,并且对于普通玩家来说……刻师傅别刮了……不过作为开服就存在的角色,还有独特的剑法
最近,全球知名的通信产业盛会MWC 2024(2024世界移动通信大会)正式召开,其中,联发科以“连接AI宇宙”(Connecting the AI-verse)为主题,为大众展示出一系列在AI和移动通信技术等领域的最新突破,吸引了大量行业
今年上半年有很多值得关注的机型,其中华为最新的影像旗舰华为P70 Art也自然受到了业界不少的关注目光,目前关于这款机型的轮廓图已经在网上曝光。
目前,2024世界移动通信大会(MWC)正在西班牙巴塞罗那举行,值得一提的是,此次大会参展中国厂商非常多,包括华为、中兴、小米、荣耀等等多家厂商均在其列。
就在去年,真我推出了11 Pro+,用一个2亿像素传感器和zoom变焦功能,开启了中端手机影像的长焦大战,而后友商才姗姗来迟的跟进了2亿像素传感器。
【手机之家新闻】一年一度的MWC已经于当地时间2月26日在巴塞罗那正式开展,在本次MWC2024上全球各大厂商齐聚一堂,展出自家最新的技术与产品,其中中兴就参展本次MWC2024,并且展出了诸多面向企业端的产品,而旗下的
近日,联发科在MWC 2024(2024 世界移动通信大会)上展出了一系列令人瞩目的AI和移动通信技术突破,以“连接AI宇宙”(Connecting the AI-verse)的展厅吸引了无数业界精英和媒体的目光。特别是其现场的生成式AI技术
虽然目前国内已经有不少厂商入局折叠屏产品,但是努比亚却迟迟没有入局。不过在近日举办的MWC 2024展会上,努比亚发布了自家首款折叠屏手机——努比亚Flip,预计国内很快也会上市。
MWC 2024正在西班牙巴塞罗那举办,和往年一样,荣耀这次依旧携众多新产品、新技术参会。荣耀Magic6 Pro、荣耀Magic V2 RSR保时捷设计的机型在海外正式发布,并且还展示了魔法大模型、任意门等诸多新技术。
MWC 2024正在西班牙巴塞罗那如火如荼地举行,其中小米也参加了今年的大会,在会上发布了在国内大受欢迎的小尺寸旗舰——小米14。值得一提的是,高通公司CEO安蒙甚至亲临发布会现场为这款机型助阵。
《原神》是一直以来在机圈深受欢迎的游戏,在充满幻想的提瓦特大陆上,你可以邂逅不少性格迥异、能力独特的伙伴。而一加Ace系列一直就拥有非常强烈的电竞属性,也是畅玩《原神》的热门机型,而在本月,一加Ace 3将推
有不少网友发现,今年新机的发布时间相对于往年大幅提前,很多厂商在春节之前密集发布了自己最新的中高端机型,给人一种年后没什么新机可发了的感觉。不过魅族全新的大杯机型——魅族21 PRO非常值得期待,魅族科技也
2022年7月,小米12S Ultra正式发布,这款产品率先将1英寸大底主摄引入到移动影像领域,同时凭借鲜明的徕卡影调给人留下深刻的印象,同时这款产品也被视为了影像旗舰地位的机型。如果从那时算起,到现在差不多已经快过
随着智能手机的日益普及和智能化进程的加速,智能穿戴设备成为了人们关注的焦点。各大智能手机厂商纷纷进军智能穿戴市场,试图在这一新兴领域抢占先机。
早在去年秋天,HyperOS操作系统发布的时候,小米便勾勒出了“人车家全生态”的美好蓝图,而在这其中,小米的多终端统一战略是核心,目前已经有不少小米产品预装或者接受到了HyperOS操作系统的推送,在过去几个月的时
今年雷军将把更多的精力放在小米汽车上,所以接下来的手机业务将由刚刚兼任小米品牌总经理卢伟冰接管。同时雷军也在微博上表示小米2024年开年旗舰——小米14 Ultra即将在近期发布,并且将有卢伟冰进行讲解。另外,卢
新的一年有龙则灵,有愿必达。自1月19日起,荣耀加码“新年荣耀,一起成龙”年货节,在全国荣耀线下门店上线了“新年许愿处”、“龙运当头”等趣味活动,吸引大批消费者到店打卡许愿,戴龙头迎好运。与此同时,为了回
小米在官网微博中已经透露了关于小米14 Ultra信息,所以新机上市应该不会太晚。根据德国莱茵的官方消息,目前小米14 Ultra(型号为24030PN60G)获得了莱茵无频闪认证,表明这款手机可以有效减轻屏幕给用户带来的视觉疲
2月22日,上海广播电视台与华为举办鸿蒙合作签约仪式,宣布其官方客户端看看新闻APP将基于HarmonyOS NEXT鸿蒙星河版启动鸿蒙原生应用开发,为用户提供更加极致的新闻资讯服务体验。此次合作标志着上海广播电视台成为全国