基于 Serverless 的 VuePress 极简静态网站

作者: Aceyclee

之前用过 Docsify + Serverless Framework 快速创建个人博客系统，虽然 docsify 也是基于 Vue，然而它是完全的运行时驱动，因此对 SEO 不够友好。所以这次尝试使用 VuePress 来搭建一个静态网站，依然部署在 Serverless 架构上。

简单介绍一下：

VuePress：由两部分组成，第一部分是一个极简静态网站生成器；另一个部分是为书写技术文档而优化的默认主题。每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他页面则会只在用户浏览到的时候才按需加载。
Serverless Framework：在 GitHub 上有三万颗星，业界非常受欢迎的无服务器应用框架，开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构。

接下来我们分三步进行：创建项目 → 配置 yml 文件 → 部署

▎工具准备

首先确保系统包含以下环境：

Node.js (Node.js 版本需不低于 8.6，建议使用 10.0 及以上版本)
Git

1. 安装 Serverless Framework

$ npm install -g serverless

2. 安装 docsify

$ npm install -g vuepress

▎创建项目

复制代码

# 创建项目目录
mkdir vuepress-starter && cd vuepress-starter# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md# 开始写作
vuepress dev .# 构建静态文件
vuepress build .

这时候可以看到 ./vuepress-starter 目录下创建的 README.md 文档，它会做为主页内容渲染，直接编辑 docsify/README.md 就能更新网站内容。此时通过浏览器访问 http://localhost:8080/ 即可本地预览。

▎配置 yml 文件

在项目目录下，创建 serverless.yml 文件：

$ touch serverless.yml

将以下内容写入上述的 yml 文件里：

复制代码

# serverless.ymlmyvuepress:component: "@serverless/tencent-website"inputs:code:src: ./dist # Upload static filesindex: index.htmlerror: 404.htmlregion: ap-guangzhoubucketName: my-bucket

配置完成后，文件目录如下：

/vuepress-starter├── .vuepress|    ├── dist|    |   ├── 404.html|    |   └── index.html|    └── serverless.yml└── README.md

▎部署

通过 serverless 命令（可使用命令缩写 sls ）进行部署，添加 --debug 参数查看部署详情：

$ sls --debug

如果你的账号未登陆或注册腾讯云，可以直接通过微信扫描命令行中的二维码，从而进行授权登陆和注册。这也是我觉得特别方便的一个地方！

部署过程中，terminal 显示信息示意：

$ sls                                       （此处有张二维码）Please scan QR code login from wechat. Wait login...Login successful for TencentCloud. myvuepress: url: http://my-bucket-1256526400.cos-website.ap-guangzhou.myqcloud.comenv: 59s › myvuepress › done

访问命令行输出的 url，即可查看使用 Serverless Framework 部署的 VuePress 网站啦~

▎小结

部署过程中要注意，由于 VuePress 生成的 index.html 所在目录默认隐藏，因此要在正确的目录层级中创建 serverless.yml 文件，不然会导致部署失败。

这次依然使用了腾讯云 Serverless Framework 作为网站部署的工具，实在是因为太方便了。部署过程不到一分钟，完全不用考虑云上资源如何配置的问题！✌️

传送门：

GitHub: github.com/serverless

官网：serverless.com

欢迎访问：Serverless 中文网，您可以在最佳实践里体验更多关于 Serverless 应用的开发！

Serverless 实战 —— 基于 Serverless 的 VuePress 极简静态网站相关推荐

我的Serverless实战—基于Serverless搭建一个简单的WordPress个人博客图文详解-JJZ
文正在参与 "100%有奖 | 我的Serverless 实战"征稿活动活动链接:https://marketing.csdn.net/p/15940c87f66c68188cf ...
Serverless 实战 —— 基于 Serverless + 企业微信打造 nCoV 疫情监控小助手
基于 Serverless + 企业微信打造 nCoV 疫情监控小助手作者:Tabor 最近的一些疫情信息很让人揪心,为了方便大家掌握疫情信息,在空闲之余做了一个关于 nCoV 的疫情监控小助手.主 ...
Serverless实战 —— Laravel + Serverless Framework 快速创建 CMS 内容管理系统
Serverless实战 -- Laravel + Serverless Framework 快速创建 CMS 内容管理系统作者: Tabor 今天,为大家带来一篇 Laravel + Server ...
python3web库_基于 Python3 写的极简版 webserver
基于 Python3 写的极简版 webserver.用于学习 HTTP协议,及 WEB服务器工作原理.笔者对 WEB服务器的工作原理理解的比较粗浅,仅是基于个人的理解来写的,存在很多不足和漏洞, ...
极简html4网页布局,36个设计风格不一的极简主义网站布局
网站设计今天已经变得非常艰难.网络空间正充斥着数十亿美元的网站,每个网站所有者都想看到自己的网站拥有唯一独特的外观.好了,每个人都有自己的外观布局.今天,极简主义正在越来越多受到关注.那么,你有哪些极 ...
族蚂建站5步搭建极简风网站。
极简主义网页设计逐渐成为主流.极简设计风格除了看起来看起来比较漂亮之外,还能提高用户体验.而如今,它为何不能成为网页设计的趋势呢?很多用户在吐槽现在的网站布局冗杂.内容挤压在同一个页面中,用户体验差. ...
实战 | 基于 Serverless 技术的视频截帧架构如何实现？
前言视频直播是一种创新的在线娱乐形式,具有多人实时交互特性,在电商.游戏.在线教育.娱乐等多个行业都有着非常广泛的应用.随着网络基础设施的不断改善以及社交娱乐需求的不断增长,视频直播在持续渗透进大家 ...
koa2+html模板,lenneth -- 基于koa2 的web极简框架
说明封装 lenneth 旨在快速方便的搭建出一个 node web 应用,不过度封装也不随波逐流,koa 的 node 是简单的,lenneth 也是. 基于 ES6+typescript 的一些 ...
网站推荐-极简壁纸网站
引言电脑.手机.平板,作为我们每天都要使用的工具.大部分时间我们都停留在这些设置的主页,挑选一份自己喜欢的壁纸尤其重要. PC端的壁纸工具很多,但是作为极简主义者,如果为了一个功能点就要下载一个软件 ...

Serverless 实战 —— 基于 Serverless 的 VuePress 极简静态网站

基于 Serverless 的 VuePress 极简静态网站

▎工具准备

▎创建项目

▎配置 yml 文件

▎部署

▎小结

Serverless 实战 —— 基于 Serverless 的 VuePress 极简静态网站相关推荐

最新文章

热门文章