VuePress、VuePress-theme-hope 搭建个人博客 1【快速上手】 —— 防止踩坑篇

vuePress官网地址  👉 首页 | VuePress

手动安装

这一章节会帮助你从头搭建一个简单的 VuePress 文档网站。如果你想在一个现有项目中使用 VuePress 管理文档,从步骤 3 开始。

  • 步骤 1: 创建并进入一个新目录

mkdir vuepress-starter
cd vuepress-starter

  • 步骤 2: 初始化项目

git init

npm init

  •  步骤 3: 将 VuePress 安装为本地依赖

npm install -D vuepress@next

  •  步骤 4: 在 package.json 中添加一些 scripts
{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}
  • 步骤 5: 将默认的临时目录和缓存目录添加到 .gitignore 文件中 

Tips:若本地没有.gitignore 文件,手动添加一个.gitignore即可。

echo 'node_modules' >> .gitignore

echo '.temp' >> .gitignore

echo '.cache' >> .gitignore

  • 步骤 6: 创建你的第一篇文档

mkdir docs

echo '# Hello VuePress' > docs/README.md

  • 步骤 7: 在本地启动服务器来开发你的文档网站
npm run docs:dev

VuePress 会在 http://localhost:8080在新窗口打开 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时,浏览器中的内容也会自动更新。

现在,你应该已经有了一个简单可用的 VuePress 文档网站。

VuePress 有一个开箱即用的默认主题,如果你不指定要使用的主题,那么会自动使用默认主题。

Vuepress-Theme-Hope搭建个人博客示例👇

安装

在 [dir] 文件夹内新建 vuepress-theme-hope 项目:

npm init vuepress-theme-hope [dir]

要将 vuepress-theme-hope 作为文档构建器添加到现有项目中,请在项目根目录中运行以下命令:

npm init vuepress-theme-hope add [dir]

TIps:这里的 [dir] 是一个参数,你需要使用真实的文件夹名称替换它,例如 docsblog 或其他你喜欢的名称。

创建项目

在创建项目的过程中,会有一些选项让你选择:

创建项目的类型:文档docs类型

如果你在模板初始化成功后选择立即启动开发服务器,稍等片刻,你就可以在浏览器地址栏输入 localhost:8080/ 访问开发服务器了。

将会看到👇界面:

创建项目的类型:博客blog类型

如果你在模板初始化成功后选择立即启动开发服务器,稍等片刻,你就可以在浏览器地址栏输入 localhost:8080/ 访问开发服务器了。

将会看到👇界面:

 可参考自定义主题👇

主页 | VuePress-theme-hope  

主页 | vuepress-theme-rceo

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

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

相关文章

基于鸿蒙OS开发一个前端应用

创建JS工程:做鸿蒙应用开发到底学习些啥? 若首次打开DevEco Studio,请点击Create Project创建工程。如果已经打开了一个工程,请在菜单栏选择File > New > Create Project来创建一个新工程。选择HarmonyOS模板库&#xff0c…

在微服务中如何实现全链路的金丝雀发布?

目录 1. 什么金丝雀发布?它有什么用? 2.如何实现全链路的金丝雀发布 2.1 负载均衡模块 2.2 网关模块 2.3 服务模块 2.3.1 注册为灰色服务实例 2.3.2 设置负载均衡器 2.3.3 传递灰度发布标签 2.4 其他代码 2.4.1 其他业务代码 2.4.2 pom.xml 关…

TrustZone之可信操作系统

有许多可信内核,包括商业和开源的。一个例子是OP-TEE,最初由ST-Ericsson开发,但现在是由Linaro托管的开源项目。OP-TEE提供了一个功能齐全的可信执行环境,您可以在OP-TEE项目网站上找到详细的描述。 OP-TEE的结构如下图所示&…

申请sectigo和certum的IP证书注意事项

IP数字证书可以为只有公网IP地址的站点提供网站传输信息加密服务,一方面可以消除用户在浏览器访问网站时的“不安全”提示,另一方面现在主流浏览器会优先收录安装了数字证书的网站,为公网IP地址网站安装IP证书有利于提升网站SEO(搜…

数据结构学习 Leetcode474 一和零

关键词:动态规划 01背包 一个套路: 01背包:空间优化之后dp【target1】,遍历的时候要逆序遍历完全背包:空间优化之后dp【target1】,遍历的时候要正序遍历 目录 题目: 思路: 复杂…

Seata 中封装了四种分布式事务模式,分别是: AT 模式, TCC 模式, Saga 模式, XA 模式,

文章目录 seata概述Seata 中封装了四种分布式事务模式,分别是:AT 模式,TCC 模式,Saga 模式,XA 模式, 今天我们来聊聊seata seata 概述 在微服务架构下,由于数据库和应用服务的拆分&#xff0c…

Vue3-27-路由-路径参数的简单使用

什么是路径参数 在路由配置中,可以将【参数】放在【路由路径】中, 从而实现,同一个 路由,同一个组件,因路径参数不同,可以渲染出不同的内容。特点 : 1、当携带不同路径参数的路由相互跳转时&am…

React 路由

引言 在我们之前写的页面当中,用我们的惯用思维去思考的话,可能会需要写很多的页面,例如做一个 tab 栏,我们可能会想每个选项都要对应一个 HTML 文件,这样会很麻烦,甚至不友好,我们把这种称为 …

把这些软件测试经典面试题!全背下来,拿offer就像喝水一样!

1、什么是兼容性测试?兼容性测试侧重哪些方面? 兼容测试主要是检查软件在不同的硬件平台、软件平台上是否可以正常的运行,即是通常说的软件的可移植性。兼容的类型,如果细分的话,有平台的兼容,网络兼容&am…

SpingBoot的项目实战--模拟电商【2.登录】

🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于SpringBoot电商项目的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 一.功能需求 二.代码编写 …

Illustrator脚本 #015 自动角线

这是一个在画板上自动生成辅助线和角线的脚本,只要单击最右边按钮运行脚本即可。 绿色的为参考线及出血线。 #target "Illustrator" var settings {addTrim : true,addBleedGuide : true,addCenterGuide : true,addCover : false,overlapAlert : false,…

GameFi 2024年或将迎来新的爆发!

在数字时代,游戏已经不仅仅是一种娱乐方式,更是一种跨越现实和虚拟界限的全球性文化现象。而游戏金融(GameFi)正是这场数字革命的下一个巨大风潮。 随着科技的不断发展和创新,2024年,GAMEFI(Gam…

算法——链表

链表常用技巧 画图分析!!!!!!!!!!——直观形象,便于理解、大多数都是模拟引入虚拟头结点(哨兵位) 典型的就是在第一个节点…

智能优化算法应用:基于沙猫群算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于沙猫群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于沙猫群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.沙猫群算法4.实验参数设定5.算法结果6.参考文…

javaweb初体验

javaweb初体验 文章目录 javaweb初体验前言一、流程:1.创建Maven的父工程2.创建Maven,Webapp的子工程3.在pom.xml文件中添加依赖(父工程与子工程共用)4.写一个helloservlet类实现httpservlet接口,重写doget&#xff0c…

idea中终端Terminal页面输入命令git log后如何退出

1、idea中Terminal输入命令git log后如何退出? 2、解决 输入q键会自动退出git log命令

【Java系列】多线程案例学习——基于阻塞队列实现生产者消费者模型

个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【Java系列专栏】【JaveEE学习专栏】 本专栏旨在分享学习JavaEE的一点学习心得,欢迎大家在评论区交流讨论💌 目录…

ubuntu 在线安装 python3 pip

ubuntu 在线安装 python3 pip 安装 python3 pip sudo apt -y install python3 python3-pip升级 pip python3 -m pip install --upgrade pip

【头歌实训】kafka-入门篇

文章目录 第1关:kafka - 初体验任务描述相关知识Kafka 简述Kafka 应用场景Kafka 架构组件kafka 常用命令 编程要求测试说明答案代码 第2关:生产者 (Producer ) - 简单模式任务描述相关知识Producer 简单模式Producer 的开发步骤Ka…

ROS多机通信

1:安装ssh sudo apt-get install openssh-server ps -e|grep ssh2:网络静态IP设置 3:配置文件修改 sudo gedit /etc/hosts192.168.3.11 用户名 192.168.3.22 用户名另一台4:重启网络 sudo /etc/init.d/network-manager resta…