VuePress 搭建博客以及部署到 Github Pages

最新推荐文章于 2025-06-26 16:26:53 发布

原创

最新推荐文章于 2025-06-26 16:26:53 发布 · 3.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#VuePress #GitHub Pages

文章目录

VuePress

根据VuePress官网的介绍：

VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

随着vuepress 1.x的发布，增加了插件API和博客主题，此时VuePress已经不仅可以用来作为展示技术文档，也可以结合自定义的主题成为适合自己的博客。

安装使用

首先初始化一个文件夹，我们就叫vuepress-blog，进入该文件夹

mkdir vuepress-blog
cd vuepress-blog

初始化我们的博客项目

npm init -y

会生成一个package.json文件，把其中的scripts改为

{
   
   
  "scripts": {
   
   
    "dev": "vuepress dev src",
    "build": "vuepress build src --dest dist"
  }
}

接下来安装相关主题，这里使用的是vuepress-theme-meteorlxy，不需要全局安装vueprss，在这里安装即可

npm install vuepress vuepress-theme-meteorlxy -D

安装完成后的目录结构是这样的

.
|-- node_modules
|-- package-lock.json
`-- package.json

VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

目录结构的命名区分大小写，相关目录说明如下

docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
docs/.vuepress/theme: 用于存放本地主题。
docs/.vuepress/styles: 用于存放样式相关的文件。
docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
docs/.vuepress/public: 静态资源目录。
docs/.vuepress/templates: 存储 HTML 模板文件。
docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
docs/.vuepress/enhanceApp.js: 客户端应用的增强。

所以，按照官方推荐的目录结构，在vuepress-blog目录下新建docs文件夹，再在docs下新建.vuepress和_posts两个文件夹，在.vuepress下新建config.js，结构如下

docs
|-- .vuepress
|   `-- config.js
`-- _posts

这样一个基本的博客框架算是完成了，通过对上述config.js的配置就可以实现自己的个性化设置

module.exports = {
   
   
    title: 'Title',
    description: 'This is my blog',
    head: [
        // 增加一个自定义的 favicon(网页标签的图标)
        // 这里的 '/' 指向 docs/.vuep