實戰 | 如何使用雲開發 Webify 部署 vuepress

webify

Web 應用託管：Web 應用託管（CloudBase Webify）爲您的 Web 應用提供一站式託管服務，支持包括靜態網站、動態 Web 服務各種類型的 Web 應用，提供默認域名、自定義域名、HTTPS 和 CDN 加速等功能，提升 Web 應用的性能和安全性，此外還提供基於 Git 的工作流、DevOps 流程和加速開發部署流程，爲您提供極佳的服務體驗。

VuePress ：VuePress 是一個以 Markdown 爲中心的靜態網站生成器。你可以使用 Markdown 來書寫內容（如文檔、博客等），然後 VuePress 會幫助你生成一個靜態網站來展示它們。

創建項目

1.創建並進入一個新目錄

mkdir vuepress-starter
cd vuepress-starter

2.初始化項目

yarn init -y

3.將 VuePress 安裝爲本地依賴

yarn add -D vuepress@next

4.在 package.json 中添加一些 scripts

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

5.創建你的第一篇文檔

mkdir docs
echo '# Hello VuePress' > docs/README.md

6.在本地啓動服務器來開發你的文檔網站

yarn docs:dev

VuePress 會在 http://localhost:8080 啓動一個熱重載的開發服務器。當你修改你的 Markdown 文件時，瀏覽器中的內容也會自動更新。訪問後可以看到下面這個頁面

配置文件

項目結構

├─ docs
│  ├─ .vuepress
│  │  └─ config.js
│  ├─ guides
│  │  └─ README.md
│  └─ README.md
├─ .gitignore
└─ package.json

配置 config.js 文件

module.exports = {
  lang: 'zh-CN',
  title: '你好， VuePress ！',
  description: '這是我的第一個 VuePress 站點',
​
  themeConfig: {
    logo: 'https://vuejs.org/images/logo.png',
  },
  dest:'dist',
  themeConfig: {     
      navbar: [
        { text: "首頁", link: "/" },
        { text: "指南", link: "/guides/" },
      ],
    },
}

配置 .gitignore 文件

node_modules
docs/.vuepress/.cache
docs/.vuepress/.temp
dist

部署流程

1.將代碼上傳到遠程倉庫

2.訪問 Web 應用託管 控制檯，新建應用

從Git倉庫導入，授權自己的 git 賬號

3.選擇要導入的項目，然後進行配置

4.部署成功後，在應用詳情頁，可以看到項目域名

5.訪問域名就可以看到下圖頁面

6.可以到應用設置中，添加自己的域名

修改代碼後，提交至遠程 Git 倉庫。隨後將會觸發 Web 應用託管的自動構建及部署。

作者：雲開發佈道師王秀龍

相關文檔

Web 應用託管控制檯：https://console.cloud.tencent.com/webify/index

Web 應用託管官方文檔：https://cloud.tencent.com/document/product/1450

VuePress官方文檔 ：https://v2.vuepress.vuejs.org/zh/