前言
最近想记录一下本人的笔记,于是打算搭建一个博客网站。因为本人对 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: true
heroText: null
---
而后在 config.js
配置代码如下
module.exports = {
// ...
themeConfig: {type: 'blog'}
// ...
}
首页优化后的成果如下
- 增加头像
在 .vuepress
目录下创立 public
目录, 在这里寄存头像
在 config.js
配置代码如下
module.exports = {
// ...
themeConfig: {authorAvatar: '/avatar.jpg',}
// ...
}
一个根底的博客网站搭建实现