专栏首页腾讯云 Serverless 专栏基于 Serverless 的 VuePress 极简静态网站
原创

基于 Serverless 的 VuePress 极简静态网站

之前用过 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.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 网站啦~

最终效果

▎小结

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

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

传送门:

GitHub: github.com/serverless 官网:serverless.com

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我是如何在四年时间里,从厨师转行为 Serverless 应用开发者

    我在高中时就喜欢烹饪和烘焙,用不同食材的搭配去做出美味的食物,就像个科学怪人。我的家乡在爱尔兰,我的第一份工作也在那里,这是我第一次真正在厨房为人们提供食物,当...

    Aceyclee
  • 通过 Serverless 架构构建更好的软件

    尽管在过去 30 年中,我们开发软件的方式已经发生了巨大变化。就可用的技术和工具而言,我们确实已经取得了巨大进步。

    Aceyclee
  • 三分钟入坑指北 🔜 Docsify + Serverless Framework 快速创建个人博客系统

    之前由于学摄影的关系,为了提高自己的审美,顺便锻炼下自己的英文能力,翻译了不少国外艺术类的 文章。最近一直想搭一个个人博客来存放这些内容,又懒得折腾建站,遂一直...

    Aceyclee
  • 云中的物联网

    云计算是基于互联网计算的下一个进化步骤,为提供ICT资源服务提供了手段。物联网可以从云计算基础架构的可扩展性,性能和即用即付的性质中获益。 ? 云计算的出现已...

    静一
  • LevelDB:Compaction

    LevelDB 的写操作是 Append-Only 的,新的数据写入后,相应的旧数据就过期了。过期的数据需要被 Garbage Collection,不然数据文...

    linjinhe
  • 浅谈个人对一个高性能红队建设的一些想法

    本人有幸参加了一些线下的攻防演练,比较熟悉攻防对抗的流程和手法,和很多师傅们在线下也有过深入学习交流,同时也产生了一些自己的想法。

    陈殷
  • 浅谈个人对一个高性能红队建设的一些想法

    本人有幸参加了一些线下的攻防演练,比较熟悉攻防对抗的流程和手法,和很多师傅们在线下也有过深入学习交流,同时也产生了一些自己的想法。

    cn0sec
  • 摩拜已开始布局物联网,购入域名moiot.com

    摩拜单车想必我们都有骑过,在我们眼里摩拜是共享单车的一个品牌。而近期,摩拜单车买入域名moiot.com,域名不禁让人想到"膜拜物联网"。

    躲在树上的域小名
  • R案例操作:RQDA和tm包结合进行文本挖掘

    应用定性数据分析包RQDA(Qualitative Data Analysis)和文挖掘框架包tm结合进行文本挖掘。 在对访谈内容或剧本、小说部分内容进行文本挖...

    机器学习AI算法工程
  • 极乐手漫 vol · 3 | 史上最坑程序员

    极乐君

扫码关注云+社区

领取腾讯云代金券