VuePress搭建个人博客（手动安装）

news2024/12/30 6:03:57

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

金陵子弟来相送，欲行不行各尽觞。
请君试问东流水，别意与之谁短长？
——《金陵酒肆留别》

文章目录

一、环境
- 1. Node环境
- 2. 包管理器
二、手动安装
- 1. 创建项目文件夹
- 2. 初始化项目
- - 2.1 git初始化
  - 2.2 npm初始化
- 3. 安装VuePress
- - 3.1 安装vuepress
  - 3.2 安装打包工具和主题
- 4. 创建docs和docs/.vuepress文件夹
- - 4.1 docs
  - 4.2 docs/.vuepress
  - 4.3 .gitignore
- 5. 创建VuePress配置文件config.js
- 6. 创建文档
- 7. 项目目录结构
三、启动项目
- 1. scripts命令配置
- 2. 运行项目
- 3. 访问项目
四、站点配置

VuePress个人博客专栏

VuePress 是一个以 Markdown 为中心的静态网站生成器。
相关介绍可参考官网：https://vuepress.vuejs.org/zh/guide/introduction.html

一、环境

1. Node环境

Node.js版本不低于18.19.0

2. 包管理器

需要使用包管理器（如pnpm、yarn、npm等），一般安装ndoe后都会包含npm
注意：
使用pnpm需要安装vue作为peer-dependencies
使用yarn 2+需要在.yarnrc.yml文件中设置nodeLinker: ‘node-modeules’

这里我们使用npm包管理器，即npm命令

二、手动安装

官网教程：https://vuepress.vuejs.org/zh/guide/getting-started.html

1. 创建项目文件夹

在本地创建项目文件夹vuepress-manual
在这里插入图片描述

2. 初始化项目

打开项目文件夹，在当前路径下打开cmd窗口
在这里插入图片描述

2.1 git初始化

如果需要使用git远程仓库的可以执行该命令，不需要则跳过，我这里执行

git init

在这里插入图片描述

2.2 npm初始化

初始化包管理器

npm init

执行命令后会弹出一些选项，多数情况下回车即可

package name: (vuepress-manual) 包名，可自定义，这里默认当前文件夹，回车
version: (1.0.0) 版本号，可自定义，这里默认，回车
description: this is a manual vuepress demo 描述，可自定义，这里随便输入一句话，回车
entry point: (index.js) 入口，默认index.js，回车
test command: test 测试命令，默认空，这里直接输入了test，回车
git repository: 远程仓库地址，默认空，这里先不输入，回车
keywords: 关键字，默认空，这里不输入，回车
author: libai 作者，默认空，这里输入libai，回车
license: (ISC) 证书协议，默认是ISC，回车

以上内容均可在package.json文件中修改
截图如下
在这里插入图片描述
最后会展示一下所配置的内容，然后输入y即可完成项目的初始化

3. 安装VuePress

3.1 安装vuepress

安装vuepress

npm install -D vuepress@next

在这里插入图片描述

3.2 安装打包工具和主题

安装打包工具和主题

npm install -D @vuepress/bundler-vite@next @vuepress/theme-default@next

在这里插入图片描述

4. 创建docs和docs/.vuepress文件夹

创建docs和docs/.vuepress文件目录

4.1 docs

在项目文件夹vuepress-manual下创建docs文件夹
docs 目录是你放置 Markdown 文件的地方，它同时也会作为 VuePress 的源文件目录。
在这里插入图片描述

4.2 docs/.vuepress

在docs文件夹下创建.vuepress文件夹

docs/.vuepress 目录，即源文件目录下的 .vuepress 目录，是放置所有和 VuePress 相关的文件的地方。
在这里插入图片描述
当前这里只有一个配置文件。默认还会在该目录下生成临时文件、缓存文件和构建输出文件。建议你把它们添加到 .gitignore 文件中。

4.3 .gitignore

后续远程仓库创建后会有该文件，不过也可以自己在本地先创建，为的就是忽略本地的一些不必要提交的文件类型
.gitignore文件内容如下，该文件位置与docs目录同级

# VuePress 默认临时文件目录
.vuepress/.temp
# VuePress 默认缓存目录
.vuepress/.cache
# VuePress 默认构建生成的静态文件目录
.vuepress/dist

5. 创建VuePress配置文件config.js

在docs/.vuepress目录下创建config.js
docs/.vuepress/config.js内容如下

import { viteBundler } from '@vuepress/bundler-vite'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  bundler: viteBundler(),
  theme: defaultTheme(),
})

6. 创建文档

在docs文件夹下创建第一个文档README.md
内容如下

# Hello World

7. 项目目录结构

最终的项目目录结构如下

├─ docs
│  ├─ .vuepress
│  │  └─ config.js
│  └─ README.md
└─ package.json

三、启动项目

在配置之前，使用启动命令npm run docs:dev会报错
在这里插入图片描述

1. scripts命令配置

在项目的package.json文件中的scripts部分添加以下内容

    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"

配置后
用npm run docs:dev启动服务
用npm run docs:build构建项目，然后可使用dist目录部署项目
在 docs/.vuepress/dist 目录中可以找到构建生成的静态文件

package.json完整内容如下

{
  "name": "vuepress-manual",
  "version": "1.0.0",
  "description": "this is a manual vuepress demo",
  "main": "index.js",
  "scripts": {
    "test": "test",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "author": "libai",
  "license": "ISC",
  "devDependencies": {
    "@vuepress/bundler-vite": "^2.0.0-rc.15",
    "@vuepress/theme-default": "^2.0.0-rc.42",
    "vuepress": "^2.0.0-rc.15"
  }
}