当前位置：首页 > news >正文

vuepress博客安装与使用（保姆教学）

news 2026/7/16 0:42:09

vuepress博客安装与使用（保姆教学）

此文章引用博客HaoJueTrace

什么是vuepress

VuePress 是一个以 Markdown 为中心的静态网站生成器（Static Site Generator, SSG）。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。
VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求，但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站

配置依赖环境

本次演示安装是在Window 10 Pro系统上演示

安装node

版本要求：Node.js v20.9.0

点击下载

他这里有好几种安装方式，我这里直接下载window exe包

自己视情选择下载方式

下载好直接安装即可

安装好进行配置环境变量

找到系统的高级设置里面的环境变量

在path中添加如下

D:\nodejs为我的node安装路径 D:\nodejs\node_modules\.bin D:\nodejs\

环境测试

PS D:\nodejs>node-vv24.14.0

安装pnpm

npminstallpnpm

安装yarn最新版本

corepack prepare yarn@stable--activate

安装vuepress

创建一个博客文件夹`core-master`

mkdircore-master

使用pnpm安装vuepress

pnpmadd-Dvuepress@next vue

启动vuepress

pnpmdocs:dev

访问vuepress

http://localhost:8080/

更换主题

由于官方自带的主题不好看，这边找了一个还能够看的过去的主题
主题官网：https://theme-reco.vuejs.press/

安装主题

PS D:\core-master>npminstall@vuepress-reco/theme-cli@1.0.7-gPS D:\core-master>theme-cli init ? Whether to create a new directory? No ? What's the title of your project? ? What's the description of your project? ? What's the author's name? ? What styledoyou want your home page to be?(The2.x version is the alpha version)blog PS D:\core-master>yarn&npminstall

常规报错有如下

The engine "yarn" is incompatible with this module. Expected version ">=2". Got "1.22.22"

解决办法

检查node版本，并更新yarn为最新版本

corepack prepare yarn@stable--activate

启动主题

PS D:\core-master>npmrun dev>vuepress-theme-reco-demo@2.0.0 dev>vuepress dev.√ Initializing and preparing data -donein759ms Re-optimizing dependencies because lockfile has changed vite v5.4.21 dev server running at: ➜ Local: http://localhost:8080/ ➜ Network: http://198.18.0.1:8080/ ➜ Network: http://192.168.54.1:8080/ ➜ Network: http://10.0.54.1:8080/ ➜ Network: http://192.168.1.37:8080/

然后访问博客

将vuepress迁移到腾讯edgeone

edgeone是什么？

EdgeOne（Tencent Cloud EdgeOne）是腾讯云推出的一款集安全防护与网络加速于一体的边缘安全加速平台，被定位为“下一代CDN”。

创建gitee仓库

Gitee

点击新建仓库

输入相关信息，仓库名称自定义

信息输入完毕之后点击创建，仓库需要开源

Git推送vuepress文件至仓库

进入博客文件夹

PS D:\nodejs>cd..\core-master\

初始化文件夹

PS D:\core-master>gitinit Reinitialized existing Git repositoryinD:/core-master/.git/

设置邮箱

PSD:\core-master> git config--global user.email"hj580231@126.com"

设置用户名

PSD:\core-master> git config--global user.name"HaoJueTrace"

添加远程仓库origin

PS D:\core-master>gitremoteaddorigin https://gitee.com/hj580231/my-blog.git

创建本地分支：`master`

PS D:\core-master>gitcheckout-bmaster

从远程仓库的`master`分支拉取最新的更改到本地仓库

PS D:\core-master>gitfetch origin master

切换分支：`master`

PS D:\core-master>gitcheckout master

将内容从工作目录添加到暂存区

可以将node_modules文件夹删除，防止文件夹太大上传慢

PSD:\core-master> git add.

显示工作目录和暂存区状态

PSD:\core-master> git status

将暂存区里的改动内容提交到本地仓库中

git commit-m"init"#-m 备注

将文件夹推送到gitee仓库

PS D:\core-master>gitpush origin master Enumerating objects:248, done. Counting objects:100%(248/248), done. Delta compression using up to8threads Compressing objects:100%(239/239), done. Writing objects:100%(244/244),25.90MiB|143.00KiB/s, done. Total244(delta0), reused0(delta0), pack-reused0remote: Powered by GITEE.COM[1.1.23]remote: Set trace flag 3f4aa5b2 To https://gitee.com/hj580231/my-blog.git d5af885..757c59b master ->master