【项目实战】将 VuePress风格的博客部署到gitee page服务器上

布满荆棘的人生 2024-03-26 14:11 80阅读 0赞

## 一、技术博客常见解决方案 ##

### 1.1 HexoHexo ###

*  一直驱动着 Vue 的文档
 *  主题系统太过于静态以及过度地依赖纯字符串
 *  无法利用 Vue 来处理我们的布局和交互
 *  Hexo 的 Markdown 渲染的配置不灵活

### 1.2 GitBook ###

*  当文件很多时，每次编辑后的重新加载时间长得令人无法忍受。
 *  默认主题导航结构比较有限制性
 *  主题系统也不是 Vue 驱动的  
    \-,更专注于将其打造为一个商业产品，而不是开源工具。

### 1.3 NuxtVuePress ###

*  Nuxt 是构建应用程序而生的

### 1.4 Docsify / Docute ###

*  基于 Vue
 *  完全的运行时驱动，对 SEO 不够友好。
 *  需安装大量依赖

## 二、VuePress 的优势 ##

*  VuePress 基于 Vue
 *  VuePress 专注在以内容为中心的静态网站上
 *  VuePress 提供了一些为技术文档定制的开箱即用的特性。

## 三、VuePress由两部分组成 ##

### 3.1 一个极简静态网站生成器 (opens new window) ###

它包含由 Vue 驱动的主题系统和插件 API

### 3.2 为书写技术文档而优化的默认主题 ###

它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

## 四、VuePress 它是如何工作的？ ##

事实上，一个 VuePress 网站是一个由 Vue (opens new window)、Vue Router (opens new window) 和 webpack (opens new window) 驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。  
在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于 Nuxt (opens new window) 的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby (opens new window)。

## 三、如何将 VuePress 风格的博客部署到 Gitee Pages 服务器上 ##

要将 VuePress 风格的博客部署到 Gitee Pages 服务器上，你可以遵循以下步骤：

1.  **安装和配置 VuePress**

首先，你需要在本地创建一个 VuePress 项目。这通常涉及以下操作：

# 创建一个新的目录并进入它
    mkdir vuepress-starter && cd vuepress-starter
    
    # 初始化 Node.js 项目
    yarn init # 或 npm init
    
    # 安装 VuePress 作为开发依赖项
    yarn add -D vuepress # 或 npm install -D vuepress

然后，在这个项目的根目录下创建一个名为 `.vuepress` 的文件夹，并在其中放置你的自定义配置（例如 `config.js`）。你还可以选择使用一个现成的主题，如 `vuepress-theme-reco`。

1.  **编写 Markdown 文档**

在项目根目录下创建一个名为 `docs` 的文件夹，并在此处添加你的 Markdown 文件。这些文件将被 VuePress 自动转换为 HTML 页面。

1.  **预览和构建项目**

运行以下命令来启动本地开发服务器以预览你的网站：

yarn vuepress dev docs # 或 npx vuepress dev docs

当你满意你的博客内容后，运行以下命令生成静态文件：

yarn vuepress build docs # 或 npx vuepress build docs

这将在 `docs/.vuepress/dist` 目录下生成可供部署的静态文件。

1.  **将项目推送到 Gitee**

在 Gitee 上创建一个新的仓库（如果还没有的话），并将你的项目克隆到该仓库中。确保你的 `.gitignore` 文件没有忽略掉 `docs/.vuepress/dist` 目录。然后，将构建好的静态文件推送到 Gitee：

cd ../ # 返回到项目根目录
    git checkout -b gh-pages # 切换到新的分支
    mv docs/.vuepress/dist . # 将 dist 文件移动到项目根目录
    rm -rf docs # 删除原始的 docs 目录（可选）
    git add .
    git commit -m "Initial deployment"
    git push origin gh-pages

1.  **启用 Gitee Pages**

在 Gitee 中，进入你的新仓库设置页面，找到“服务”或“Gitee Pages”部分。在那里，你可以选择将 `gh-pages` 分支部署为静态网站。完成后，你应该会得到一个类似 `https://<username>.gitee.io/<repository>` 的 URL 来访问你的博客。

注意：上述步骤可能会根据 VuePress 和 Gitee 的具体版本有所差异。请查阅它们的官方文档以获取最新信息。