扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了“基于Serverless的Vue Press静态网站怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“基于Serverless的Vue Press静态网站怎么实现”吧!
成都创新互联致力于网站建设、做网站,成都网站设计,集团网站建设等服务标准化,推过标准化降低中小企业的建站的成本,并持续提升建站的定制化服务水平进行质量交付,让企业网站从市场竞争中脱颖而出。 选择成都创新互联,就选择了安全、稳定、美观的网站建设服务!
简单介绍一下:
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/ 即可本地预览。
在项目目录下,创建 serverless.yml
文件:
$ touch serverless.yml
将以下内容写入上述的 yml 文件里:
# serverless.yml myvuepress: component: "@serverless/tencent-website" inputs: code: src: ./dist # Upload static files index: index.html error: 404.html region: ap-guangzhou bucketName: 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.com env: 59s › myvuepress › done
访问命令行输出的 url,即可查看使用 Serverless Framework 部署的 VuePress 网站啦~
感谢各位的阅读,以上就是“基于Serverless的Vue Press静态网站怎么实现”的内容了,经过本文的学习后,相信大家对基于Serverless的Vue Press静态网站怎么实现这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流