如何使用 VuePress 搭建博客网站并 Vercel 部署
先来看一下网站截图：
快速上手
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
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 对应，选填。
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.”。
然后去腾讯云的域名控制台，将此条解析记录添加进去，即可将该博客部署到此域名，同时给与免费的证书且无需手动安装。