国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 基于 Serverless 的 VuePress 極簡(jiǎn)靜態(tài)網(wǎng)站

基于 Serverless 的 VuePress 極簡(jiǎn)靜態(tài)網(wǎng)站

時(shí)間：2023-10-12 07:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-12 07:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

基于 Serverless 的 VuePress 極簡(jiǎn)靜態(tài)網(wǎng)站：之前用過(guò) Docsify + Serverless Framework 快速創(chuàng)建個(gè)人博客，雖然 docsify 也是基于 Vue，然而它是完全的運(yùn)行時(shí)驅(qū)動(dòng)，因此對(duì) SEO 不夠友好。所以這次嘗試使用 VuePress 來(lái)搭建一個(gè)靜態(tài)網(wǎng)站，依然部署在 Serverless 架構(gòu)上。

簡(jiǎn)單介紹一下：

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

▎工具準(zhǔn)備

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

1. 安裝 Serverless Framework

$ npm install -g serverless2. 安裝 VuePress

$ npm install -g vuepress

▎創(chuàng)建項(xiàng)目

# 創(chuàng)建項(xiàng)目目錄mkdir vuepress-starter && cd vuepress-starter# 新建一個(gè) markdown 文件echo '# Hello VuePress!' > README.md# 開始寫作vuepress dev .# 構(gòu)建靜態(tài)文件vuepress build .這時(shí)候可以看到 ./vuepress-starter 目錄下創(chuàng)建的 README.md 文檔，它會(huì)做為主頁(yè)內(nèi)容渲染，直接編輯 docsify/README.md 就能更新網(wǎng)站內(nèi)容。此時(shí)通過(guò)瀏覽器訪問(wèn) http://localhost:8080/ 即可本地預(yù)覽。

▎配置 yml 文件

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

$ touch serverless.yml將以下內(nèi)容寫入上述的 yml 文件里：

# serverless.ymlmyvuepress: 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

▎部署

通過(guò) serverless 命令（可使用命令縮寫 sls ）進(jìn)行部署，添加 --debug 參數(shù)查看部署詳情：

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

部署過(guò)程中，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訪問(wèn)命令行輸出的 url，即可查看使用 Serverless Framework 部署的 VuePress 網(wǎng)站啦~

▎小結(jié)

部署過(guò)程中要注意，由于 VuePress 生成的 index.html 所在目錄默認(rèn)隱藏，因此要在正確的目錄層級(jí)中創(chuàng)建 serverless.yml 文件，不然會(huì)導(dǎo)致部署失敗。

這次依然使用了騰訊云 Serverless Framework 作為網(wǎng)站部署的工具，實(shí)在是因?yàn)樘奖懔恕２渴疬^(guò)程不到一分鐘，完全不用考慮云上資源如何配置的問(wèn)題！??

參考：
- GitHub: github.com/serverless
- 官網(wǎng)：serverless.com
- 社區(qū)：Serverless 中文網(wǎng)
分類收藏：
產(chǎn)品 | 設(shè)計(jì) | 技術(shù) | HackLife | Photography

推薦閱讀：


關(guān)鍵詞：靜態(tài)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉