V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Aceyclee
V2EX  ›  Vue.js

基于 Serverless 的 VuePress 极简静态网站

  •  
  •   Aceyclee ·
    Aceyclee · 2020-03-03 12:32:06 +08:00 · 2768 次点击
    这是一个创建于 1750 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前用过 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 作为网站部署的工具,实在是因为太方便了。部署过程不到一分钟,完全不用考虑云上资源如何配置的问题!✌️

    参考:

    4 条回复    2020-03-03 21:23:52 +08:00
    cyio
        1
    cyio  
       2020-03-03 12:39:38 +08:00 via Android
    使用 server 只是做了静态托管?
    Chingim
        2
    Chingim  
       2020-03-03 12:40:59 +08:00 via Android
    不就是静态文件吗。。。。这也要强行 serverless
    Chingim
        3
    Chingim  
       2020-03-03 12:41:36 +08:00 via Android
    这种场景应该用类似 s3 之类的玩意
    Aceyclee
        4
    Aceyclee  
    OP
       2020-03-03 21:23:52 +08:00
    @cyio 诶……写得比较简单,全栈解决方案的没写
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5990 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 02:13 · PVG 10:13 · LAX 18:13 · JFK 21:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.