Actual combat | How to deploy vuepress using cloud development Webify

webify

Web application hosting: Web application hosting (CloudBase Webify) provides one-stop hosting services for your web applications, supports various types of web applications including static websites and dynamic web services, and provides default domain names, custom domain names, HTTPS and CDN acceleration and other functions improve the performance and security of web applications. In addition, it also provides Git-based workflows, DevOps processes, and accelerated development and deployment processes to provide you with an excellent service experience.

VuePress: VuePress is a Markdown-centric static website generator. You can use Markdown to write content (such as documents, blogs, etc.), and then VuePress will help you generate a static website to display them.

Create project

1. Create and enter a new directory

mkdir vuepress-starter
cd vuepress-starter

2. Initialize the project

yarn init -y

3. Install VuePress as a local dependency

yarn add -D vuepress@next

4. Add some scripts package.json

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

5. Create your first document

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

6. Start the server locally to develop your documentation website

yarn docs:dev

VuePress will start a hot-reloaded development server http://localhost:8080 When you modify your Markdown file, the content in the browser will also be updated automatically. After visiting, you can see the following page

Configuration file

Project structure

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

Configure the config.js file

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/" },
      ],
    },
}

Configure the .gitignore file

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

Deployment process

1. Upload the code to the remote warehouse

2. Visit the web application hosting console to create a new application

Import from Git repository and authorize your own git account

3. Select the project to be imported, and then configure

4. After the deployment is successful, you can see the project domain name on the application details page

5. Visit the domain name and you can see the following page

6. You can add your own domain name in the application settings

After modifying the code, submit it to the remote Git repository. This will then trigger the automatic construction and deployment of web application hosting.

Author: Cloud Development Evangelist Wang Xiulong

Related documents

Web application hosting console: https://console.cloud.tencent.com/webify/index

Official web application hosting document: https://cloud.tencent.com/document/product/1450

VuePress official document: https://v2.vuepress.vuejs.org/zh/