前言
最近想记录一下本人的笔记，于是打算搭建一个博客网站。因为本人对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: 'https://github.com/by3679512' }, { text: '掘金', link: 'https://juejin.cn/user/1799217731347255/posts' } ] } ] }}在浏览器关上成果如下：
更换主题
为了让页面更加好看，实现更多功能和成果，咱们将用第三方主题辅助开发，本我的项目应用的主题是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: trueheroText: null---而后在config.js配置代码如下
module.exports = { // ... themeConfig: { type: 'blog' } // ...} 首页优化后的成果如下
- 增加头像
在.vuepress目录下创立public目录,在这里寄存头像
在config.js配置代码如下
module.exports = { // ... themeConfig: { authorAvatar: '/avatar.jpg', } // ...} 一个根底的博客网站搭建实现