基于Serverless的VuePress靜態(tài)網(wǎng)站怎么實現(xiàn)

這篇文章主要講解了“基于Serverless的Vue Press靜態(tài)網(wǎng)站怎么實現(xiàn)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“基于Serverless的Vue Press靜態(tài)網(wǎng)站怎么實現(xiàn)”吧！

成都創(chuàng)新互聯(lián)致力于網(wǎng)站建設(shè)、做網(wǎng)站,成都網(wǎng)站設(shè)計,集團網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場競爭中脫穎而出。 選擇成都創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

簡單介紹一下：

• VuePress：由兩部分組成，第一部分是一個極簡靜態(tài)網(wǎng)站生成器；另一個部分是為書寫技術(shù)文檔而優(yōu)化的默認主題。每一個由 VuePress 生成的頁面都帶有預(yù)渲染好的 HTML，也因此具有非常好的加載性能和搜索引擎優(yōu)化（SEO）。同時，一旦頁面被加載，Vue 將接管這些靜態(tài)內(nèi)容，并將其轉(zhuǎn)換成一個完整的單頁應(yīng)用（SPA），其他頁面則會只在用戶瀏覽到的時候才按需加載。

• Serverless Framework：在 GitHub 上有三萬顆星，業(yè)界非常受歡迎的無服務(wù)器應(yīng)用框架，開發(fā)者無需關(guān)心底層資源即可部署完整可用的 Serverless 應(yīng)用架構(gòu)。

接下來我們分三步進行：創(chuàng)建項目 → 配置 yml 文件 → 部署

▎工具準(zhǔn)備

首先確保系統(tǒng)包含以下環(huán)境：

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

• Git

1. 安裝 Serverless Framework

$ npm install -g serverless

2. 安裝 docsify

$ npm install -g vuepress

▎創(chuàng)建項目

# 創(chuàng)建項目目錄
mkdir vuepress-starter && cd vuepress-starter

# 新建一個 markdown 文件
echo '# Hello VuePress!' > README.md

# 開始寫作
vuepress dev .

# 構(gòu)建靜態(tài)文件
vuepress build .

這時候可以看到 ./vuepress-starter 目錄下創(chuàng)建的 README.md 文檔，它會做為主頁內(nèi)容渲染，直接編輯 docsify/README.md 就能更新網(wǎng)站內(nèi)容。此時通過瀏覽器訪問 http://localhost:8080/ 即可本地預(yù)覽。

▎配置 yml 文件

在項目目錄下，創(chuàng)建 serverless.yml 文件：

$ touch serverless.yml

將以下內(nèi)容寫入上述的 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 參數(shù)查看部署詳情：

$ sls --debug

如果你的賬號未 登陸 或 注冊 騰訊云，可以直接通過微信掃描命令行中的二維碼，從而進行授權(quán)登陸和注冊。這也是我覺得特別方便的一個地方！

部署過程中，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 網(wǎng)站啦~

感謝各位的閱讀，以上就是“基于Serverless的Vue Press靜態(tài)網(wǎng)站怎么實現(xiàn)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對基于Serverless的Vue Press靜態(tài)網(wǎng)站怎么實現(xiàn)這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

新聞標(biāo)題：基于Serverless的VuePress靜態(tài)網(wǎng)站怎么實現(xiàn)
分享地址：http://bm7419.com/article10/igdogo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、微信公眾號、網(wǎng)站建設(shè)、域名注冊、外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)