VuePress搭建个人博客(手动安装)


天行健,君子以自强不息;地势坤,君子以厚德载物。


每个人都有惰性,但不断学习是好好生活的根本,共勉!


文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。


金陵子弟来相送,欲行不行各尽觞。
请君试问东流水,别意与之谁短长?
——《金陵酒肆留别》


文章目录

  • 一、环境
    • 1. Node环境
    • 2. 包管理器
  • 二、手动安装
    • 1. 创建项目文件夹
    • 2. 初始化项目
      • 2.1 git初始化
      • 2.2 npm初始化
    • 3. 安装VuePress
      • 3.1 安装vuepress
      • 3.2 安装打包工具和主题
    • 4. 创建docs和docs/.vuepress文件夹
      • 4.1 docs
      • 4.2 docs/.vuepress
      • 4.3 .gitignore
    • 5. 创建VuePress配置文件config.js
    • 6. 创建文档
    • 7. 项目目录结构
  • 三、启动项目
    • 1. scripts命令配置
    • 2. 运行项目
    • 3. 访问项目
  • 四、站点配置


VuePress个人博客专栏


VuePress 是一个以 Markdown 为中心的静态网站生成器。
相关介绍可参考官网:https://vuepress.vuejs.org/zh/guide/introduction.html

一、环境

1. Node环境

Node.js版本不低于18.19.0

2. 包管理器

需要使用包管理器(如pnpm、yarn、npm等),一般安装ndoe后都会包含npm
注意:
使用pnpm需要安装vue作为peer-dependencies
使用yarn 2+需要在.yarnrc.yml文件中设置nodeLinker: ‘node-modeules’

这里我们使用npm包管理器,即npm命令

二、手动安装

官网教程:https://vuepress.vuejs.org/zh/guide/getting-started.html

1. 创建项目文件夹

在本地创建项目文件夹vuepress-manual
在这里插入图片描述

2. 初始化项目

打开项目文件夹,在当前路径下打开cmd窗口
在这里插入图片描述

2.1 git初始化

如果需要使用git远程仓库的可以执行该命令,不需要则跳过,我这里执行

git init

在这里插入图片描述

2.2 npm初始化

初始化包管理器

npm init

执行命令后会弹出一些选项,多数情况下回车即可

package name: (vuepress-manual) 包名,可自定义,这里默认当前文件夹,回车
version: (1.0.0) 版本号,可自定义,这里默认,回车
description: this is a manual vuepress demo 描述,可自定义,这里随便输入一句话,回车
entry point: (index.js) 入口,默认index.js,回车
test command: test 测试命令,默认空,这里直接输入了test,回车
git repository: 远程仓库地址,默认空,这里先不输入,回车
keywords: 关键字,默认空,这里不输入,回车
author: libai 作者,默认空,这里输入libai,回车
license: (ISC) 证书协议,默认是ISC,回车

以上内容均可在package.json文件中修改
截图如下
在这里插入图片描述
最后会展示一下所配置的内容,然后输入y即可完成项目的初始化

3. 安装VuePress

3.1 安装vuepress

安装vuepress

npm install -D vuepress@next

在这里插入图片描述

3.2 安装打包工具和主题

安装打包工具和主题

npm install -D @vuepress/bundler-vite@next @vuepress/theme-default@next

在这里插入图片描述

4. 创建docs和docs/.vuepress文件夹

创建docs和docs/.vuepress文件目录

4.1 docs

在项目文件夹vuepress-manual下创建docs文件夹
docs 目录是你放置 Markdown 文件的地方,它同时也会作为 VuePress 的源文件目录。
在这里插入图片描述

4.2 docs/.vuepress

在docs文件夹下创建.vuepress文件夹

docs/.vuepress 目录,即源文件目录下的 .vuepress 目录,是放置所有和 VuePress 相关的文件的地方。
在这里插入图片描述
当前这里只有一个配置文件。默认还会在该目录下生成临时文件、缓存文件和构建输出文件。建议你把它们添加到 .gitignore 文件中。

4.3 .gitignore

后续远程仓库创建后会有该文件,不过也可以自己在本地先创建,为的就是忽略本地的一些不必要提交的文件类型
.gitignore文件内容如下,该文件位置与docs目录同级

# VuePress 默认临时文件目录
.vuepress/.temp
# VuePress 默认缓存目录
.vuepress/.cache
# VuePress 默认构建生成的静态文件目录
.vuepress/dist

5. 创建VuePress配置文件config.js

在docs/.vuepress目录下创建config.js
docs/.vuepress/config.js内容如下

import { viteBundler } from '@vuepress/bundler-vite'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'export default defineUserConfig({bundler: viteBundler(),theme: defaultTheme(),
})

6. 创建文档

在docs文件夹下创建第一个文档README.md
内容如下

# Hello World

7. 项目目录结构

最终的项目目录结构如下

├─ docs
│  ├─ .vuepress
│  │  └─ config.js
│  └─ README.md
└─ package.json

三、启动项目

在配置之前,使用启动命令npm run docs:dev会报错
在这里插入图片描述

1. scripts命令配置

在项目的package.json文件中的scripts部分添加以下内容

    "docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"

配置后
npm run docs:dev启动服务
npm run docs:build构建项目,然后可使用dist目录部署项目
在 docs/.vuepress/dist 目录中可以找到构建生成的静态文件

package.json完整内容如下

{"name": "vuepress-manual","version": "1.0.0","description": "this is a manual vuepress demo","main": "index.js","scripts": {"test": "test","docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"},"author": "libai","license": "ISC","devDependencies": {"@vuepress/bundler-vite": "^2.0.0-rc.15","@vuepress/theme-default": "^2.0.0-rc.42","vuepress": "^2.0.0-rc.15"}
}

2. 运行项目

执行命令运行项目

npm run docs:dev

运行后输出如下
在这里插入图片描述

3. 访问项目

可根据输出的访问地址访问项目
在这里插入图片描述

四、站点配置

关于站点的一些配置项,可参考文章进行定制化配置,如主题、导航栏等
VuePress搭建个人博客(配置)


感谢阅读,祝君暴富!


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

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

相关文章

【信创】推荐一款在龙芯CPU终端上使用的WiFi接收器 _ 统信 _ 麒麟

原文链接:【信创】推荐一款在龙芯CPU终端上使用的WiFi接收器 | 统信 | 麒麟 Hello,大家好啊!今天给大家带来一篇关于在龙芯CPU架构的台式机上如何安装和使用无线WiFi接收器的文章。对于使用龙芯CPU的台式机用户来说,安装并配置WiF…

Word文档的读取(1)

读取一个班的答题卡 解决方法: 导入os模块后,将乔老师的文件夹路径 /Users/qiao/answerKey 赋值给变量allKeyPath。使用os.listdir()函数获取该路径下所有的答题卡名称列表,并赋值给变量allItems。最后使用for循环遍历所有答题卡&#xff0c…

Python机器学习——利用Keras和基础神经网络进行手写数字识别(MNIST数据集)

Python机器学习——利用Keras和基础神经网络进行手写数字识别(MNIST数据集) 配置环境创建虚拟环境安装功能包并进环境 编程1. 导入功能包2. 加载数据集3. 数据预处理4. 构建神经网络5. 神经网络训练6. 测试模型训练效果 配置环境 首先安装Anaconda&…

江协科技STM32学习- P9 OLED调试工具

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

大屏地图区域显示、复选框多选打点,自定义窗体信息(vue3+TS)

效果图: NPM 安装 Loader: npm i amap/amap-jsapi-loader --save 并设置 key 和安全密钥: import AMapLoader from amap/amap-jsapi-loader;//引入高德地图window._AMapSecurityConfig {securityJsCode: "「你申请的安全密钥」"…

Ubuntu 22.04 安装增强功能失败

安装的时候,总是失败,然后根据提示查看 log 猜测可能需要安装g12 ubuntu22.04.2 目前(until 23.6.25) gcc 的默认版本是 11.3.0, 有些 c 的特性无法享用.Launchpad toolchain test buildsLanchpad toolchain build 将 Lanchpad 上的 PPA 加入到 apt 搜…

使用Selenium与WebDriver实现跨浏览器自动化数据抓取

背景/引言 在数据驱动的时代,网络爬虫成为了收集和分析海量数据的关键工具。为了应对不同浏览器环境下的兼容性问题,Selenium与WebDriver成为了开发者实现跨浏览器自动化数据抓取的首选工具。本文将深入探讨如何利用Selenium和WebDriver实现跨浏览器的数…

Redis主从数据同步过程:命令传播、部分重同步、复制偏移量等

请记住胡广一句话,所有的中间件所有的框架都是建立在基础之上,数据结构,计算机网络,计算机原理大伙一定得看透!!~ 1. Redis数据同步 1.1 数据同步过程 大家有没想过为什么Redis多机要进行数据同步&#…

视频监控管理平台LntonAIServer视频智能分析抖动检测算法应用场景

在视频监控系统中,视频画面的稳定性对于确保监控效果至关重要。抖动现象是指视频画面中存在不稳定或频繁晃动的情况,这可能会影响视频的清晰度和可读性。LntonAIServer通过引入抖动检测功能,帮助用户及时发现并解决视频流中的抖动问题&#x…

计算机网络练级第一级————认识网络

目录 网络搁哪? 网络的发展史(了解) 独立模式: 网络互联: 局域网时期: 广域网时期: 什么是协议 TCP/IP五层/四层模型 用官话来说: 我自己的话来说 第一层应用层&#xff1…

erlang学习: Mnesia Erlang数据库

创建Mnesia数据库 mnesia:create_schema([node()]).在shell里输入该行代码即可创建一个mnesia数据库于当前文件夹下 编译器文件路径下同样也有 数据库表定义创建 之后是数据库表定义,打开数据库创建完成后,启动数据库,添加一些表定义&…

多路转接之poll(接口介绍,struct pollfd介绍,实现原理,实现非阻塞网络通信代码)

目录 poll 引入 介绍 函数原型 fds struct pollfd 特点 nfds timeout 取值 返回值 原理 如何实现关注多个fd? 如何确定哪个fd上有事件就绪? 如何区分事件类型? 判断某事件是否就绪的方法 代码 示例 总结 为什么说它解决了fd上限问题? 缺点 poll 引入…

大模型RAG实战|构建知识库:文档和网页的加载、转换、索引与存储

我们要开发一个生产级的系统,还需要对LlamaIndex的各个组件和技术进行深度的理解、运用和调优。本系列将会聚焦在如何让系统实用上,包括:知识库的管理,检索和查询效果的提升,使用本地化部署的模型等主题。我将会讲解相…

故障诊断迁移学习项目DDC(保姆教程)

本项目从零开始搭建深度领域混淆(Deep Domain Confusion,DDC)算法。项目包括加载CWRU轴承原始信号,信号处理、数据集制作,模型搭建,DDC域混淆算法设计、特征可视化,混淆矩阵等流程来帮助读者学习…

超级帐本(Hyperledger)

1. Hyperledger 项目 Hyperledger 下有两类项目:第一类是区块链框架项目;第二类是支持这些区块链的相关工具或模块。 在 Hyperledger 框架下,目前有 5 个区块链框架项目:Fabric、Sawtooth Lake、Iroha、Burrow 和 Indy。 在模块类下,则有 Hyp…

Spring Boot 集成 Redisson 实现消息队列

包含组件内容 RedisQueue:消息队列监听标识RedisQueueInit:Redis队列监听器RedisQueueListener:Redis消息队列监听实现RedisQueueService:Redis消息队列服务工具 代码实现 RedisQueue import java.lang.annotation.ElementTyp…

原生 iOS 引入 Flutter 报错 kernel_blob.bin 找不到

情况 在一次原生 iOS 项目中引入 Flutter 的过程中,在模拟器中运行出现报错: 未能打开文件“kernel_blob.bin”,因为它不存在。 如下图: 模拟器中一片黑 原因&解决方案 这个是因为 Flutter 的打包 iOS framework 命令中…

OCR技术视角:智能文档管理中的票据自动化识别与处理

在数字化转型的浪潮中,企业对于高效、自动化的文档管理需求日益增长。票据作为企业运营中不可或缺的部分,其识别与管理的智能化成为了提升工作效率的关键。本文将深入探讨智能文档系统中票据识别功能的原理、技术优势以及在不同行业中的应用实践&#xf…

Java、python、php、node.js版 铁路售票自动选座系统 高铁购票系统 火车订票平台(源码、调试、LW、开题、PPT)

💕💕作者:计算机源码社 💕💕个人简介:本人 八年开发经验,擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等,大家有这一块的问题可以一起交流&…

Mac无法安装软件怎么解决?mac安装软件提示无法验证开发者怎么办

在使用 macOS 系统时,你可能会遇到一个常见的问题:当你尝试安装或打开某些应用程序时,系统会弹出一个警告,提示“无法验证开发者”。出现这个提示导致自己无法去进行程序安装,接下来我们就来看看如何解决此问题的方法吧…