使用vuepress搭建个人的博客(一):基础构建

前言

vuepress是一个构建静态资源网站的库

地址:VuePress

一般来说,这个框架非常适合构建个人技术博客,你只需要把自己写好的markdown文档准备好,完成对应的配置就可以了

搭建

初始化和引入

创建文件夹press-blog

npm初始化
npm init
引入包
npm install -D vuepress

目录结构

|-- assets    *静态资源

|-- docs       *主体目录,类似于src

    |-- .vuepress     *配置文件目录

        |-- config.js    *核心配置文件

   |-- views        *资源文件夹

        |-- vite

           |-- vite构建.md

        |-- webpack

           |--webpack构建.md

    |-- README.md    *默认展示文件

|-- node_modules      *依赖包

|-- ackage-lock.json   *依赖包目录

|-- package.json     *包管理文件

按照我这个目录配置就可以了

配置文件内容

config.js
module.exports = {base: "/vuepress/",   引入dest: "./dist",    //输出themeConfig: {logo: "https://www.vuepress.cn/hero.png",   //logonav: [     //导航配置{ text: "Home", link: "/" },{text: "vite",items: [{text: "vite基础",items: [{text: "vite构建",link: "/views/vite/vite构建.md",},],},],},{text: "webpack",items: [{text: "webpack基础",items: [{text: "webpack构建",link: "/views/webpack/webpack构建.md",},],},],},],},
};
md文档编写

对于docs下面的README.md文档,需要进行一些认真的编写

---
home: true
# heroImage: /hero.png
heroText: 个人博客
tagline: 作者王惊涛
actionText: 体验 →
actionLink: /
features:
- title: vite相关details: 学会vite的使用。
- title: webpoack相关details: 学会使用wbepack
- title: 静态md文档details: 只需要md文档就可以了
footer: wangjingtao-blog
---

至于内容里面的md文档内容,就看你自己想展示什么内容了

package.json
{"name": "press_blog","version": "1.0.0","description": "","main": "index.js","scripts": {"docs:dev":"vuepress dev docs --temp .temp",   //运行"docs:build":"vuepress build docs",   //打包"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"vuepress": "^1.9.10"}
}

运行

运行命令

npm run docs:dev

效果如下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/791611.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯_数学模板

1.试除法判定质数 #include <iostream> using namespace std;bool is_zs(int x) {if(x<2) return false;for(int i2;i<x/i;i)if(x%i0)return false;return true; }int main() {int n; cin>>n;while(n--){int x; cin>>x;if(is_zs(x)) cout<<&quo…

windows下安装iteliij Idea2023.3

首先从官网下载 下载 IntelliJ IDEA – 领先的 Java 和 Kotlin IDE 双击打开进行安装&#xff1a; 安装完成后&#xff0c;需要对Idea进行稍微处理下。使用我分享给大家的文件&#xff0c;操作以下步骤&#xff1a; 注意&#xff1a;不能打开IDEA软件。 进入到scripts中点击un…

C语言存储⽅式有哪⼏种?分别是什么?

一、问题 什么叫存储⽅式&#xff1f;存储⽅式有⼏种&#xff1f;分别是什么&#xff1f; 二、解答 因变量存储⽅式不同⽽产⽣的特性称作变量的⽣存期。⽣存期表示了变量存在的时间。⽣存期加上前⾯讲过的作⽤域是从时间和空间这两个不同的⻆度来描述变量的特性&#xff0c; 这…

[技术闲聊]我对电路设计的理解(一)

讲点题外话&#xff0c;也算回忆&#xff0c;捋一捋过往的生活。 大学毕业后&#xff0c;进入公司实习&#xff0c;从产线开始&#xff0c;为期一个月&#xff0c;当时课室负责人说&#xff0c;进入一家公司&#xff0c;首先了解公司的产品&#xff0c;产线是最直接最合适最近距…

独孤思维:高客单价项目,必须来一个

01 上次和水龙聊完以后&#xff0c;完成了图书电商项目小报童的梳理。 而且还让我规划后端低转高产品的设计。 目前独孤&#xff0c;准备以图书电商项目私教作为切入点&#xff0c;捆绑自己的合伙人。 设计高客单价项目。 所以&#xff0c;独孤4月的副业规划目标&#xff…

AI绘图:Stable Diffusion WEB UI 详细操作介绍:基础篇

接上一篇《AI绘图体验&#xff1a;Stable Diffusion本地化部署详细步骤》本地部署完了SD后&#xff0c;大家肯定想知道怎么用&#xff0c;接下来补一篇Stable Diffusion WEB UI 详细操作&#xff0c;如果大家还没有完成SD的部署&#xff0c;请参考上一篇文章进行本地化的部署。…

2.2.1.2-网格交易(python网格交易附实战交易记录)

跳转到根目录&#xff1a;知行合一&#xff1a;投资篇 已完成&#xff1a; 1、投资&技术   1.1.1 投资-编程基础-numpy   1.1.2 投资-编程基础-pandas   1.2 金融数据处理   1.3 金融数据可视化 2、投资方法论   2.1.1 预期年化收益率   2.1.2 一个关于yaxb的…

C++之STL的algorithm(4)之拷贝相关算法(copy、replace、swap)整理

C之STL的algorithm&#xff08;4&#xff09;之拷贝相关算法&#xff08;copy、replace、swap&#xff09;整理 注&#xff1a;整理一些突然学到的C知识&#xff0c;随时mark一下 例如&#xff1a;忘记的关键字用法&#xff0c;新关键字&#xff0c;新数据结构 C 的查找算法整理…

多线程--深入探究多线程的重点,难点以及常考点线程安全问题

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

Redis高可用主从复制与哨兵模式

前言 在生产环境中&#xff0c;除了采用持久化方式实现 Redis 的高可用性&#xff0c;还可以采用主从复制、哨兵模式和 Cluster 集群的方法确保数据的持久性和可靠性。 目录 一、主从复制 1. 概述 2. 作用 3. 主从复制流程 4. 部署 4.1 安装 redis 4.2 编辑 master 节…

物联网实战--入门篇之(七)嵌入式-MQTT

目录 一、MQTT简介 二、MQTT使用方法 三、MQTT驱动设计 四、代码解析 五、使用过程 六、总结 一、MQTT简介 MQTT因为其轻量、高效和稳定的特点&#xff0c;特别适合作为物联网系统的数据传输协议&#xff0c;已经成为物联网事实上的通信标准了。关于协议的具体内容看看这…

后端前行Vue之路(三):计算属性和监视属性

1.概述 书接上回&#xff0c;我们讲述了《后端前行Vue之路(二)&#xff1a;模版语法之插值与指令》谈到了Vue的模板语法很强大&#xff0c;支持复杂表达式&#xff0c;如下&#xff1a; <div id"example">{{ message.split().reverse().join() }} </div&g…

Supervised Fine-tuning in turn Improves Visual Foundation Models

简介 从NLP中的监督微调&#xff08;Supervised Fine-tuning&#xff09;获得的灵感&#xff0c;本文探索了细粒度SFT在预训练后增强视觉基础模型潜力。本文提出了一种二阶段方法ViSFT释放视觉基础模型细粒度知识。具体地&#xff0c;通过一些域内任务执行视觉联合学习增强视觉…

编程实战:自己编写HTTP服务器(系列9:上传文件)

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 本系列的源码位于httpd目录下…

Java实现两数相除

题意 给你两个整数&#xff0c;被除数 dividend 和除数 divisor。将两数相除&#xff0c;要求不使用乘法、除法和取余运算。 整数除法应该向零截断&#xff0c;也就是截去&#xff08;truncate&#xff09;其小数部分。例如&#xff0c;8.345 将被截断为 8 &#xff0c;-2.7335…

用DasViewer浏览模型时可以移动模型的中心点吗?

按住鼠标中键&#xff0c;就正常平移模型了。 DasViewer是由大势智慧自主研发的免费的实景三维模型浏览器,采用多细节层次模型逐步自适应加载技术,让用户在极低的电脑配置下,也能流畅的加载较大规模实景三维模型,提供方便快捷的数据浏览操作。 DasViewer下载地址&#xff1a;…

leetcode 热题 100(部分)C/C++

leetcode 热题 100 双指针 盛最多水的容器 【mid】【双指针】 思路&#xff1a; 好久没写代码sb了&#xff0c;加上之前写的双指针并不多&#xff0c;以及有点思维定势了。我对双指针比较刻板的印象一直是两层for循环i&#xff0c;j&#xff0c;初始时i,j都位于左界附近&…

SAM Self-Attention based Deep Learning Method

一、Why(Research Background) 网络流量分类根据协议(如超文本传输协议或域名系统)或应用程序(如脸书或Gmail)对流量类别进行分类。其准确性是一些网络管理任务(如服务质量控制、异常检测等)的关键基础。为了进一步提高流量分类的准确性,最近的研究引入了基于深度学习的方法…

Open CASCADE学习|刚体( TopoDS_Shape)按某种轨迹运动,停在指定位置上

今天实现如下功能&#xff1a;刚体做做螺旋运动&#xff0c;轨迹已知&#xff0c;求刚体在每个位置上的所占据的空间&#xff0c;就是把刚体从初始位置变换到该位置。 这里的刚体是一个砂轮截面&#xff0c;螺旋运动轨迹由B样条曲线拟合&#xff0c;通过Frenet标架确定运动轨迹…

datalist是什么,有什么作用?

<datalist>标签用于定义一个预定义选项列表&#xff0c;它可以与文本输入框&#xff08;<input type"text">&#xff09;一起使用&#xff0c;提供一组可选的值供用户选择或输入。<datalist>标签中的选项可以通过<option>标签来定义。 <…