前言
最近想记录一下自己的笔记，于是打算搭建一个博客网站。由于自己对vue比较熟悉，选择了VuePress进行搭建。VuePress是以Vue 驱动的静态网站生成器，以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。最后整理自己的搭建过程形成了本篇博客。
实现的技术栈 VuePress vuepress-theme-reco 起步 初始化 创建一个文件夹并命名为myblog,在编辑器打开
打开终端窗口进行初始化
npm init
安装VuePress
npm install -D vuepress 在根目录下创建一个文件夹命名为docs,文件夹中创建文件命名为README.md，在文件中写上hello world保存
在package.json中加入下面内容
"scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" }
启动项目，终端运行下面的命令
npm run dev
最后在浏览器中的http://localhost:8080打开项目
项目配置
在docs文件夹下创建文件夹命名为.vuepress,并在其下创建文件config.js,这是整个项目的配置文件。在config.js配置网站标题和描述，添加网站导航栏配置
module.exports = { title: 'myblog', description: 'myblog', themeConfig: { nav: [ { text: '首页', link: '/' }, { text: '我的博客', items: [ { text: 'Github', link: 'github.com/by3679512' }, { text: '掘金', link: 'juejin.cn/user/179921…' } ] } ] } }
在浏览器打开效果如下：
更换主题
为了让页面更加美观，实现更多功能和效果，我们将用第三方主题辅助开发，本项目使用的主题是vuepress-theme-reco
vuepress-theme-reco是一个vuepress主题，旨在添加博客所需的分类、TAB墙、分页、评论等能； 主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用； 本文只配置了基础内容，更多主题配置请看官网
下载vuepress-theme-reco
npm install vuepress-theme-reco --save-dev
引入主题 在config.js添加
module.exports = { // ... theme: 'reco' // ... }
刷新页面，会发现增加了部分内容
仔细发现hello world出现了两次，这是因为vuepress-theme-reco会获取每篇md的第一个大标题作为自己的标题
我们只要在md头部加上以下内容即可
title: 标题 author: 舟羽 date: '2023-3-26' categories:
- 网站 tags:
- 网站
categories和tags标签会在下面导航栏部分介绍
此时页面效果更新如下
导航栏优化
在config.js下配置导航栏的分类和标签
module.exports = { // ... themeConfig: { blogConfig: { category: { location: 2, // 在导航栏菜单中所占的位置，默认2 text: '分类' // 默认文案 “分类” }, tag: { location: 3, // 在导航栏菜单中所占的位置，默认3 text: '标签' // 默认文案 “标签” }, }, } // ... }
在文章顶部添加的category和tags标签，reco会自动更新到对应位置
首页主题优化
找到README.md文件，更改内容为
home: true heroText: null
然后在config.js配置代码如下
module.exports = { // ... themeConfig: { type: 'blog' } // ... }
首页优化后的效果如下
添加头像
在.vuepress目录下创建public目录,在这里存放头像
在config.js配置代码如下
module.exports = { // ... themeConfig: { authorAvatar: '/avatar.jpg', } // ... }
一个基础的博客网站搭建完成
来源： 如何十分钟拥有自己的个人网站
