美观的静态网站生成工具VuePress

VuePress：构建静态网站的现代工具

VuePress 是一个由 Vue.js 团队开发的静态站点生成器，它结合了 Vue.js 的强大功能和 Markdown 的简洁性，使得创建文档网站变得简单而高效。VuePress 旨在为技术文档、博客和个人网站提供一个轻量级且功能强大的解决方案。

特点与优势

• 简单易用：VuePress 采用 Markdown 作为内容编写格式，非技术人员也能轻松上手。通过配置文件的编写，可以快速设置网站的基本信息，如标题、描述等。
• 性能高：VuePress 生成的是纯静态 HTML 文件，这意味着网站可以非常快地加载，并且对搜索引擎友好。适用于资源受限的服务器，以及想要优化的SEO的用户。
• 主题丰富：VuePress 提供了多种内置主题，同时也支持自定义主题。
• Vue.js 生态：VuePress 基于 Vue.js 构建，因此你可以利用 Vue.js 的生态系统来扩展你的网站功能。无论是使用 Vue 组件还是第三方库，VuePress 都能很好地支持。
• 支持国际化：VuePress 支持多语言站点，可以轻松地为不同语言的用户提供内容。这对于国际化项目尤其有用。
• 自动化部署：VuePress 可以与各种持续集成/持续部署（CI/CD）工具集成，实现自动化部署。常见的 CI/CD 工具有 GitHub Actions、GitLab CI 和 Travis CI 等。

快速入门

安装 VuePress

首先，你需要安装 Node.js 和 npm。然后，可以通过 npm 安装 VuePress：

npm init vuepress your_project_name

我个人的选择如下，当然，你也可以选择适合自己的内容。

运行后，网站是这样的

非常的整洁，没有那些乱乱的内容，很适合文档或者个人博客。

创建完成后的目录结构大概是这样的。

├─ docs
│  ├─ .vuepress
│  │  └─ config.js
|  |- other.md
│  └─ README.md
└─ package.json

我们在docs里面写文档，一般 README.md 充当着一个网页的入口文件。

例如，下面这个结构

docs/
├── README.md
├── guide/
│   └── README.md
└── config.md

当我们访问 http://localhost:8080/ 时，会默认访问 docs/README.md 里的内容。
访问 http://localhost:8080/guide/ 时，VuePress 会渲染 docs/guide/README.md 里的内容。
访问 http://localhost:8080/config.html 时，VuePress 会渲染 docs/config.md 的内容。

启动开发服务器

在 package.json 中添加一个脚本来启动开发服务器：

npm run docs:dev