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

vuepress博客安装与使用保姆教学此文章引用博客HaoJueTrace什么是vuepressVuePress 是一个以 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:\nodejsnode-vv24.14.0安装pnpmnpminstallpnpm安装yarn最新版本corepack prepare yarnstable--activate安装vuepress创建一个博客文件夹core-mastermkdircore-master使用pnpm安装vuepresspnpmadd-Dvuepressnext vue启动vuepresspnpmdocs:dev访问vuepresshttp://localhost:8080/更换主题由于官方自带的主题不好看这边找了一个还能够看的过去的主题主题官网https://theme-reco.vuejs.press/安装主题PS D:\core-masternpminstallvuepress-reco/theme-cli1.0.7-gPS D:\core-mastertheme-cli init ? Whether to create a new directory? No ? Whats the title of your project? ? Whats the description of your project? ? Whats the authors name? ? What styledoyou want your home page to be?(The2.x version is the alpha version)blog PS D:\core-masteryarnnpminstall常规报错有如下The engine yarn is incompatible with this module. Expected version 2. Got 1.22.22解决办法检查node版本并更新yarn为最新版本corepack prepare yarnstable--activate启动主题PS D:\core-masternpmrun devvuepress-theme-reco-demo2.0.0 devvuepress 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迁移到腾讯edgeoneedgeone是什么EdgeOneTencent Cloud EdgeOne是腾讯云推出的一款集安全防护与网络加速于一体的边缘安全加速平台被定位为“下一代CDN”。创建gitee仓库Gitee点击新建仓库输入相关信息仓库名称自定义信息输入完毕之后点击创建仓库需要开源Git推送vuepress文件至仓库进入博客文件夹PS D:\nodejscd..\core-master\初始化文件夹PS D:\core-mastergitinit Reinitialized existing Git repositoryinD:/core-master/.git/设置邮箱PSD:\core-master git config--global user.emailhj580231126.com设置用户名PSD:\core-master git config--global user.nameHaoJueTrace添加远程仓库originPS D:\core-mastergitremoteaddorigin https://gitee.com/hj580231/my-blog.git创建本地分支masterPS D:\core-mastergitcheckout-bmaster从远程仓库的master分支拉取最新的更改到本地仓库PS D:\core-mastergitfetch origin master切换分支masterPS D:\core-mastergitcheckout master将内容从工作目录添加到暂存区可以将node_modules文件夹删除防止文件夹太大上传慢PSD:\core-master git add.显示工作目录和暂存区状态PSD:\core-master git status将暂存区里的改动内容提交到本地仓库中git commit-minit#-m 备注将文件夹推送到gitee仓库PS D:\core-mastergitpush 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配置Edgeone Page打开edgeone创建项目导入git仓库选择刚才创建的仓库这里没有绑定仓库的先去把仓库绑定好填写相关信息框架预设Other根目录/输出目录.vuepress/dist构建命令npm dev build安装命令npm install填写完毕直接点击开始部署然后等待部署部署成功进行预览直接点击链接可以看到部署成功并且完美运行绑定个人域名点击项目预览点击添加自定义域名输入域名并点击下一步添加域名解析我使用的是阿里云域名其他的服务商都一样操作添加完毕点击验证可以看到添加成功等待部署等待部署成功我们就可以使用自定义域名访问了温馨提醒像一些博客的配置直接根据官网的来就好官方文档https://theme-reco.vuejs.press/docs/theme/home.html这里提供一个免费制作ico的链接后续可能会更新vuepress配置的讲解教程还请持续关注。