关于web:实战-如何使用云开发-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/