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

news/2024/7/9 23:54:22 标签: vue

先来看一下网站截图:

<a class=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

<a class=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 文件。其余跟博客文件的名称对应。

Vercel 部署

Vercel 提供了一个强大的、可扩展的平台,可以让开发者在不同的平台和环境中部署和管理他们的代码,简单易用且免费。

所以我们选择 Vercel 将我们的博客网站进行部署。

1.首先将项目同步 github ,然后在 Vercel 上关联该 github 账号。

2.在 Vercel 上点击 Add New Project。

3.点击 import,导入该博客项目。

4.按照如下添加部署配置,完成后点击 Deploy。其中 Environment Variables 和上文中 process.env.BASE_URL 对应,选填。

<a class=vuepress-3" />

5.部署成功后点击 Add Domain,可以看到仅有 Vercel 给你预分配的一个域名,由于 DNS 污染,Vercel 的站点国内可能无法访问,不过我们可以绑定自定义域名。

去代理商官网购买自己的专属域名,例如我是在腾讯云购买的 zhang.beer 域名,但是只免费提供了一级域名的证书。所以之前我只能通过部署到 zhang.beer/vuepress 上,才能蹭到证书。

不过现在,可以解析出一个二级域名,例如 blog.zhang.beer,尽管没有证书,但是可以通过 Vercel 实现 HTTPS。

回到正题,我们将 blog.zhang.beer 填入,点 ADD 即可,这时提示我们添加 CNAME 的解析记录,一般为“cname.vercel-dns.com.”。

然后去腾讯云的域名控制台,将此条解析记录添加进去,即可将该博客部署到此域名,同时给与免费的证书且无需手动安装。


http://www.niftyadmin.cn/n/5115290.html

相关文章

高速电路设计----第三章(2)LVDS信号详解

一、TTL和CMOS不适用于高速电路设计的原因&#xff08;都是数字电路信号&#xff09; 原因&#xff1a; ①电平幅度较大&#xff0c;电平最低都达到了2.5V或者3.3V。因此信号沿变化所需要的时间很长。不适合大于200MHZ的信号。 ②容易被干扰&#xff0c;输出信号为单端&#xf…

记低版本okhttp超时会导致死锁

一、问题起源 在处理一次生产环境cpu拉满问题时&#xff0c;把日志拉下来看发现很多http请求调用出错&#xff0c;项目使用的是okhttp 3.8.1版本。 二、问题描述 问题出在okhttp3.Dispatcher.finished(Dispatcher.java:201)代码如下&#xff1a; void finished(AsyncCall c…

istio介绍(二)

5. kubesphere istio使用 5.1 整体架构 ks-account 提供用户、权限管理相关的 APIks-apiserver 整个集群管理的 API 接口和集群内部各个模块之间通信的枢纽&#xff0c;以及集群安全控制ks-apigateway 负责处理服务请求和处理 API 调用过程中的所有任务ks-console 提供 KubeSp…

SQL查询优化---批量数据脚本

1、数据生成 &#xff08;1&#xff09;创建数据表 CREATE TABLE dept (id INT(11) NOT NULL AUTO_INCREMENT,deptName VARCHAR(30) DEFAULT NULL,address VARCHAR(40) DEFAULT NULL,ceo INT NULL ,PRIMARY KEY (id) ) ENGINEINNODB AUTO_INCREMENT1 DEFAULT CHARSETutf8;CRE…

【JavaEE】TCP数据报套接字编程

一、TCP数据报套接字编程 1.1 ServerSocket API ServerSocket 是创建TCP服务端Socket的API ServerSocket 构造方法&#xff1a; ServerSocket 方法&#xff1a; 1.2 Socket API Socket 是客户端Socket&#xff0c;或服务端中接收到客户端建立连接&#xff08;accept方法&…

Arm 警告其 GPU 驱动漏洞正被活跃利用

导读Arm 周一警告其 Mali 系列 GPU 驱动漏洞 CVE-2023-4211 正被活跃利用。 Mali GPU 被广泛用于 Google Pixels 等 Android 手机&#xff0c;Chromebook 等 Linux 设备。 本地非特权用户可利用该漏洞访问已释放的内存。访问不再使用的系统内存是将恶意代码加载到攻击者可执行…

Learning Open-World Object Proposals without Learning to Classify(论文解析)

Learning Open-World Object Proposals without Learning to Classify 摘要1 介绍2 相关工作3 方法3.1 基线3.2 基于纯定位的对象性3.3. 对象定位网络 (OLN)4 实验4.1跨类泛化4.2.开放世界类不可知检测4.3更多的跨数据集泛化4.3.1 Objects365 泛化4.3.2 EpicKitchens 的泛化4.4…

Kubernetes 访问集群 API 的方法

必须拥有一个 Kubernetes 的集群&#xff0c;同时你必须配置 kubectl 命令行工具与你的集群通信。 建议在至少有两个不作为控制平面主机的节点的集群上运行本教程。 如果你还没有集群&#xff0c;你可以通过 Minikube 构建一个你自己的集群&#xff0c;或者你可以使用下面的 Ku…