从 01 开始 从 01 开始
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机相关技巧
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • 最全面的 RSS 教程
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金
  • 职场规划
  • 关于离职
  • 杂谈
  • 自媒体
  • 📖 读书

    • 读书工具
    • 走进科学
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
    • 读书笔记
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档

晓林

程序猿,自由职业者,博主,英语爱好者,健身达人
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机相关技巧
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • 最全面的 RSS 教程
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金
  • 职场规划
  • 关于离职
  • 杂谈
  • 自媒体
  • 📖 读书

    • 读书工具
    • 走进科学
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
    • 读书笔记
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档
  • 从零开始搭建博客系列
  • 什么是博客
  • VuePress
    • VuePress 是什么
    • 官方文档
    • 版本
    • 环境准备
    • 第一个博客
    • Git 初始化
    • 获取源码
  • VuePress 日常使用
  • 主题
  • 插件
  • 更多配置
  • 部署
  • 域名、HTTPS 和备案
  • 图床
  • 搜索功能
  • Meilisearch 自建实践
  • 评论区
  • Twikoo 配置表情包
  • CDN
  • 数据统计
  • SEO
  • 友情链接
  • 网站安全

  • SSL 证书续费
  • 配置 RSS 订阅
  • 显示数学公式块
  • 添加 mermaid 支持
  • 关于邮件服务器
  • 我的写作流
  • 增加浏览器控制台输出
  • 从零开始搭建博客系列-终
  • 搭建博客
2023-02-22
目录

VuePress

# 02.VuePress

从本文开始,动手搭建自己的博客!希望读者能跟着一起动手,这样才能真正掌握。

‍

# VuePress 是什么

VuePress 是由 Vue 作者带领团队开发的,非常火,使用的人很多;Vue 框架官网 (opens new window)也是用了 VuePress 搭建的。即使是在移动端,阅读体验也很好。

根据 VuePress 官网 (opens new window) 的描述,VuePress 是 Vue 驱动的静态网站生成器。简单来说,就是将 Markdown 文件自动转换 HTML,简洁容易使用,性能高,我们只需专注于 Markdown 内容。 ‍

# 官方文档

一般来说,学习什么技术,或者使用什么工具,官网文档是最好的……

但我仔细看了下,官网的文档更相当于一个手册,大而全;而我需要的是一个教程,逐步完善功能,而不是一上来就列出所有的功能,令人眼花缭乱,不知道从何下手。为此,我自己整理了不少关于 VuePress 的笔记,看了不少关于 VuePress 入门的博客,才略有所得,写出了本教程。 ‍

# 版本

本文使用的是 VuePress1.x,虽然 VuePress2.x (也叫 VuePress@next)已经出来一段时间了(2021 年左右),但是 VuePress1.x 的生态很完善,不少主题和插件都仅兼容 1.x,所以本文也是使用 1.x。

题外话:就好比 Java 中,Java8 是用的最广泛的,生态也非常完善,最新版的 Java 较少人使用。 ‍ 读者如果想使用最新版本的 VuePress,也可参考官方的文档,在官网右上角可以选择。博主也简单看了下 v2.x 的文档,在使用方面基本上和 v1.x 差不多,想要迁移也是很方便的。

​ ‍

除此之外还有 vitepress (opens new window),基于 vite 建立的,也是因为生态不完善,所以这里不过多介绍。

# 环境准备

我们首先在本地搭建博客,为此我们需要:

  1. 一台电脑
  2. VuePress1.x 需要 Node 版本 ≥ 8.6,建议用最新版的 Node。
  3. Chrome 或 FireFox 浏览器(尽量不要用 IE 浏览器) ‍

# 第一个博客

我们来写第一个博客吧!首先,创建一个文件夹,例如 vuepress-learn(文件夹名最好不要带中文和空格),也可以在 cmd 里使用如下命令

# Windows下
md vuepress-learn 
cd vuepress-learn

# Linux 和 mac 下
mkdir vuepress-learn && cd vuepress-learn
1
2
3
4
5
6

‍ 使用自己喜欢的包管理器初始化:

npm init -y
或
yarn init
1
2
3

安装 VuePress 依赖:

npm install -D vuepress
1

‍ 开始写第一篇博客:

  1. 我们在当前目录下创建一个 docs 目录(以后博客都放这个文件夹里),
  2. 进入到该文件夹,创建一个 README.md ​文档,里面写上内容“Hello VuePress”。
  3. 如果是在 Linux 或 Mac 下,也可以使用如下命令一步到位:
mkdir docs && echo '# Hello VuePress' > docs/README.md
1

修改 package.json 文件,添加一些启动命令:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
1
2
3
4
5
6

其中,docs:dev​ 命令用于在本地运行本博客;而 docs:build​ 用于编译打包博客,用于部署到服务器上。 ‍ 当前文件夹目录结果如下(忽略 node_modules 文件夹):

vuepress-learn
├── docs
│   └── README.md
├── package-lock.json
└── package.json
1
2
3
4
5

‍ 启动博客:在项目根目录运行如下命令:

npm run docs:dev
1

‍ 运行后,正常情况下就能编译成功,并且在最后会有提示:

success [22:46:24] Build 185e1f finished in 167 ms! ( http://localhost:8080/ )
1

‍ 我们在浏览器打开这个网址 http://localhost:8080​,可以看到如下内容:

​​​​ ‍ 至此,我们的第一篇博客就完成了! ‍

# Git 初始化

为了后续教程需要,我们将本项目用 Git 管理

git init
1

‍ 添加 .gitignore 文件,忽略 node_modules 文件夹:

node_modules
1

# 获取源码

为了写本系列的博客,博主特地新建了一个项目用于演示,相关代码已放到 Gitee (opens new window) 和 GitHub (opens new window) 上。

并且,不同功能创建了不同分支,想要获取本篇文章演示的源码只需切换分支即可!

例如,你想运行本篇文章所创建的博客,可以这样做:

  1. 打开命令行
  2. 拉取代码:git clone git@gitee.com:peterjxl/vuepress-learn.git​ (也可拉取 GitHub 的)
  3. 跳转目录:cd vuepress-learn​
  4. 切换分支:git switch -c VuePressDemo1HelloWorld origin/VuePressDemo1HelloWorld​
  5. 安装依赖:npm i​
  6. 运行博客:npm run docs:dev​ ‍
上次更新: 2025/5/17 12:26:09
什么是博客
VuePress 日常使用

← 什么是博客 VuePress 日常使用→

最近更新
01
学点统计学:轻松识破一本正经的胡说八道
06-05
02
2025 年 5 月记
05-31
03
《贫穷的本质》很棒,但可能不适合你
05-27
更多文章>
Theme by Vdoing | Copyright © 2022-2025 | 粤 ICP 备 2022067627 号 -1 | 粤公网安备 44011302003646 号 | 点击查看十年之约
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式