前言最近想记录下自己的笔记，所以打算建一个博客网站。由于对vue比较熟悉，所以选择了VuePress来搭建。VuePress是一个Vue驱动的静态站点生成器，具有以Markdown为中心的项目结构，可帮助您以最少的配置专注于写作。最后整理一下自己的搭建过程，形成了这个博客。实现了技术栈VuePressvuepress-theme-reco开始初始化创建一个文件夹并命名为myblog，在编辑器中打开终端窗口进行初始化npminitinstallVuePressnpminstall-Dvuepress在根目录下创建一个名为docs的文件夹，file创建一个文件在文件夹中，命名为README.md，在文件中写入helloworld，保存在package.json中，添加如下内容"scripts":{"dev":"vuepressdevdocs","build":"vuepressbuilddocs"}启动项目，在终端运行如下命令npmrundev，最后在浏览器打开http://localhost:8080的项目项目配置在docs文件夹下创建一个名为.vuepress的文件夹，并创建一个它下面的文件配置。js，这是整个项目的配置文件。在config.js中配置网站标题和描述，添加网站导航栏配置module.exports={title:'myblog',description:'myblog',themeConfig:{nav:[{text:'Home',link:'/'},{text:'我的博客',items:[{text:'Github',link:'https://github.com/by3679512'},{text:'掘金',link:'https://juejin.cn/user/1799217731347255/posts'}]}]}}在浏览器中打开效果如下：更换主题为了让页面更美观，实现更多的功能和效果，我们将使用第三方帮助发展的主题。本项目使用的主题是vuepress-theme-recovuepress-theme-reco是一个vuepress主题，旨在增加博客需要的分类、TAB墙、分页、评论等功能；主题追求极简，根据vuepress默认主题修改。官方主题配置仍然适用；本文只配置基本内容。更多主题配置请参考官网下载vuepress-theme-reconpminstallvuepress-theme-reco--save-dev导入主题并在config.js中添加module.exports={//...theme:'reco'//...}刷新页面，你会发现已经添加了一些内容。仔细发现helloworld出现了两次，这是因为vuepress-theme-reco会获取每篇文章的第一个md作为我们自己的标题，我们只需要在md的头部添加如下内容---title:titleauthor:周瑜date:'2023-3-26'categories:-websitetags:-website---categories和tags标签会在下面的导航栏中介绍此时的页面效果更新如下导航栏优化在config.js下配置导航栏的类别和标签module.exports={//...themeConfig:{blogConfig:{category:{location:2,//占在导航栏菜单位置，默认2text:'category'//默认文本"category"},tag:{location:3,//在导航栏菜单中的位置，默认3text:'tag'//默认文本"Tags”},},}//...}文章顶部添加的category和tags标签，reco会自动更新到相应位置首页主题优化找到README.md文件，将内容改成——-home:trueheroText:null---然后在config.js中配置代码如下module.exports={//...themeConfig:{type:'blog'}//...}home的优化效果页面如下添加一个头像，在.vuepress目录下创建public目录，其中头像存放在config.js配置代码如下module.exports={//...themeConfig:{authorAvatar:'/avatar.jpg',}//...}一个基本的博客站点已经建立
