先来看一下网站截图:

快速上手

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.”。

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

如何使用 VuePress 搭建博客网站并 Vercel 部署的更多相关文章

  1. Django搭建博客网站(四)

    Django搭建博客网站(四) 最后一篇主要讲讲在后台文章编辑加入markdown,已经在文章详情页对markdown的解析. Django搭建博客网站(一) Django搭建博客网站(二) Djan ...

  2. Django搭建博客网站(三)

    Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用 ...

  3. Django搭建博客网站(二)

    Django搭建自己的博客网站(二) 这里主要讲构建系统数据库Model. Django搭建博客网站(一) model 目前就只提供一个文章model和一个文章分类标签model,在post/mode ...

  4. Hexo系列(一) 搭建博客网站

    写在前面的话:本系列文章主要参考 Hexo官方说明文档,同时结合自己在使用过程中的一些心得体会,撷取下来,和大家分享分享.好,下面闲话不多说,马上开始我们的 Hexo 之旅吧 温馨提醒:博主使用的操作 ...

  5. 部署项目到服务器 & 搭建博客网站

    搭建博客网站 作为名程序员,或者是网络编程爱好者,拥有一个自己的博客网站再好不过,本篇文章手把手教你部署自己的网站

  6. Django搭建博客网站(一)

    Django搭建自己的博客网站(一) 简介 这个系列主要是通过使用Django这个python web框架实现一个简单的个人博客网站.对Django有疑问可以上Django官网查文档. 功能 后台管理 ...

  7. django学习笔记——搭建博客网站

    1. 配置环境,创建django工程 虚拟环境下建立Django工程,即创建一个包含python脚本文件和django配置文件的目录或者文件夹,其中manage.py是django的工程管理助手.(可 ...

  8. GitHub+Hexo+gulp搭建博客网站

    一.前期准备 1.注册GitHub账号. 不做说明 2.创建仓库 创建一个新的仓库来放置我们的文件. 3.下载安装Node.js https://nodejs.org/en/   两个版本,选择右边那 ...

  9. Linux下-LNMP环境搭建博客网站(全过程)

    通常我们所说的LNMP是指一个网站基本的组织框架,即Linux系统支持,Nginx静态服务,Mysql数据库支持以及PHP动态编程语言支持.目前Mysql数据库被Oracle数据库分析公司收购,其创始 ...

  10. GitHub+Hexo 搭建博客网站

    Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Heroku上,是搭建博客的首选框架. 配置Github root@hello:~/cby ...

随机推荐

  1. 对于围棋AI作弊的一些思考

    最近看到些关于围棋AI作弊的报道有了一些思考. 相关视频链接: https://www.bilibili.com/video/BV1np411f73b/?spm_id_from=autoNext ht ...

  2. 【转载】网络协议之:sctp流控制传输协议

    原文地址: https://www.cnblogs.com/flydean/p/16277006.html ============================================== ...

  3. 多线程之interrupt与优雅停止一个线程

    1.背景 在实际开发中,我们可能会遇到终止某个线程的场景, 比如不断扫描数据库的发货订单时,这时候需停止扫描, 当然我们不能把程序关了,我们只希望停止扫描数据库这一个线程, 那么应该怎么办了? 这就可 ...

  4. Temperature 题解

    前言 题目链接:洛谷:SPOJ:Hydro & bzoj. 题意简述 有一个长度为 \(n\) 的序列,每个位置值的范围为 \([L_i, R_i]\) 内,求原序列可能的最长不降子串长度. ...

  5. 利用net-snmp读取windows,linux,snmp设备数据(cpu,内存,网卡)

    首先编译的时候configure参数加上--with-mib-modules='ucd-snmp/diskio ip-mib/ipv4InterfaceTable' 默认的配置没有这些模块,需要加上 ...

  6. AArch64 汇编学习笔记

    PIE(Position Independent Executable,位置无关的可执行文件)通过随机化可执行文件各个部分在虚拟内存中的地址使得攻击者无法通过预测地址进行恶意行为. 汇编开发工具: a ...

  7. 在 Python 中通过读取 .env 文件获得环境变量

    在编写 Python 脚本时,我们会使用一些私密数据,如调用 API 时使用的 token.为了避免隐私泄露,这些私密数据一般不直接写入脚本文件中.而是写入一个文件,并通过读取文件的方式获取私密数据内 ...

  8. hook千牛 千牛破解发消息 千牛机器人 千牛发消息组件 调用千牛发消息 实时获取千牛聊天记录 可以提供代码

    由于开发的时候,需要调用千牛发消息,所以研究了如何调用千牛发消息的组件,非协议破解,需要挂机,基本不弹发消息的窗体,非模拟发送,直接调用千牛的某个方法直接发送的,挂机后还能获取订单,实时获取聊天记录, ...

  9. ChatGPT 教我写一个基于python程序开发的网络设备巡检功能

    这几天被ChatGPT玩坏了,为什么说是被玩呢,这东西真的太强大了,我现在用的还是版本3就专业溜了,现在已经有版本4了,详细一些人工智能真的还快就会取代一大批只会CV程序员,所以你有什么理由不学习呢. ...

  10. 前端使用 Konva 实现可视化设计器(22)- 绘制图形(矩形、直线、折线)

    本章分享一下如何使用 Konva 绘制基础图形:矩形.直线.折线,希望大家继续关注和支持哈! 请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 Bug,欢迎来提 Issue 哟~ git ...