如何使用 VuePress 搭建博客网站并 Vercel 部署

news2024/11/20 11:50:37

先来看一下网站截图：

vuepress-1

快速上手

1.创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

2.使用你喜欢的包管理器进行初始化

yarn init # npm init

3.将 VuePress 安装为本地依赖

yarn add -D vuepress # npm install -D vuepress

4.创建你的第一篇文档

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

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

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

6.在本地启动服务器

yarn docs:dev # npm run docs:dev

VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。

目录结构

以下是我个人博客目前的目录结构，主题为默认主题，类似 Vue 以及 VuePress 官网。

.
├── docs
│   ├── .vuepress
|   |   ├── public (静态资源目录)
│   │   └── config.js (配置文件)
│   │
│   ├── README.md (首页)
|   └── blog
|       ├── css (介绍css相关)
|       ├── micro (介绍微前端相关)
|       ├── server (介绍服务器相关)
|       └── vxmp (介绍微信小程序相关)
│
└── package.json

vuepress-2

config.js (配置文件)

下面我们来详细看一下 config.js 配置文件。

module.exports = {
  title: "Luminosity Blog",
  description: "An awesome documentation website built with VuePress.",
  base: process.env.BASE_URL || "/vuepress/",
  plugins: [
    ["@vuepress/back-to-top"],
    ["@vuepress/medium-zoom"],
    [
      "@vuepress/last-updated",
      {
        transformer: (timestamp, lang) => {
          const moment = require("moment");
          moment.locale(lang);
          return moment(timestamp).fromNow();
        },
      },
    ],
  ],
  head: [["link", { rel: "icon", href: "/favicon.ico" }]],
  themeConfig: {
    logo: "/ming.png",
    smoothScroll: true,
    lastUpdated: "上次更新",
    nav: [
      { text: "Home", link: "/" },
      {
        text: "Blog",
        items: [
          { text: "CSS", link: "/blog/css/" },
          { text: "VUE", link: "/blog/vue/" },
          { text: "微前端", link: "/blog/micro/" },
          { text: "服务器", link: "/blog/server/" },
          { text: "小程序", link: "/blog/vxmp/" },
        ],
      },
      { text: "GitHub", link: "https://github.com/fadeache" },
    ],
    sidebar: {
      "/blog/css/": [
        {
          title: "CSS",
          collapsable: false,
          sidebarDepth: 2,
          children: [
            "",
            "animation"
            ...
          ],
        },
      ],
      ...
    },
  },
};

base 部署时的基本地址。比如我们部署到一个服务器上，这个服务器的域名是 zhang.beer，并通过 nginx 转发到指定路径 vuepress，这时就需要同时将此处的 base 也设置为 vuepress，就可以通过访问 zhang.beer/vuepress 来访问博客了。
- process.env.BASE_URL 用于动态修改基本地址的环境变量。例如当部署时传入环境变量 BASE_URL = /another 时，便可以通过访问 zhang.beer/another 来访问博客。
plugins 插件。有些插件属于官方自带，有些插件需要自行下载，详情见官网。这里选用了三个插件。
- @vuepress/back-to-top 该插件会给你的站点添加一个返回顶部按钮。当页面向下滚动时，该按钮会显示在页面的右下角，点击它就会滚动到页面顶部。该插件已经集成到默认主题中。
- @vuepress/medium-zoom 为图片提供可缩放的功能。该插件已经集成到默认主题中。
- @vuepress/last-updated 上次更新时间。默认情况下，该插件为每个页面生成一个 13 位的时间戳，你可以传入一个 transformer 将其转换为你想要的任何格式。该插件已经集成到默认主题中。同时，使用 themeConfig.lastUpdated 选项可以设置提示文本，例如我个人博客设置的为“上次更新”，会根据远程存储库的更新时间，显示在每篇博客的最下面。
smoothScroll 平滑滚动。设置为 true 时，当点击侧边栏二级标题，将会平滑滚动到该标题下，否则直接跳转。
nav 顶部导航栏设置。这里我们设置了三个标题，分别为 Home、Blog、GitHub。其中点击 Home 和 GitHub 是直接跳转的，而点击 Blog 将会出现 5 个下拉选项：CSS、VUE、微前端、服务器、小程序。
sidebar 侧边栏设置。根据导航栏设置的地址，配置侧边栏。
- title 侧边栏顶部大标题。
- collapsable 顶部大标题是否显示折叠箭头。
- sidebarDepth 侧边栏深度。设置 2 即表示显示博客的二级标题至侧边栏。
- children 该大标题下的博客。其中“”代表 README 文件。其余跟博客文件的名称对应。