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://xiahunao.cn/news/2659366.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

处理urllib.request.urlopen报错UnicodeEncodeError:‘ascii‘

参考:[Python3填坑之旅]一urllib模块网页爬虫访问中文网址出错 目录 一、报错内容 二、报错截图 三、解决方法 四、实例代码 五、运行截图 六、其他UnicodeEncodeError: ascii codec 问题 一、报错内容 UnicodeEncodeError: ascii codec cant encode charac…

CSP CCF 201509-2 日期计算 C++满分题解

解题思路&#xff1a; 1.用数组存入每个月份的天数&#xff0c;如果是闰年&#xff0c;2月份为29天&#xff0c;否则&#xff0c;2月份为28天。 2.判断是否是闰年 3.不断更新日期 #include<iostream> using namespace std;int main() {int y,d;cin>>y>>d;…

使用Python Flask搭建一个简单的Web站点并发布到公网上访问

文章目录 前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程访问Flask的问答界面 前言 Flask是一个Python编写的Web微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务&#xff0c;本期教程…

Java版商城:Spring Cloud+SpringBoot b2b2c电子商务平台,多商家入驻、直播带货及免 费 小程序商城搭建

随着互联网的快速发展&#xff0c;越来越多的企业开始注重数字化转型&#xff0c;以提升自身的竞争力和运营效率。在这个背景下&#xff0c;鸿鹄云商SAAS云产品应运而生&#xff0c;为企业提供了一种简单、高效、安全的数字化解决方案。 鸿鹄云商SAAS云产品是一种基于云计算的软…

HPM6750开发笔记《开发环境的搭建》

目录 一&#xff0c;下载完整的HPM—SDK 二&#xff0c;安装硬件驱动 二&#xff0c;软件激活 三&#xff0c;创建工程 1.用文档中给的方法创建工程&#xff1a; 2.用sdk_env_v1.3.0中提供的工具创建工程&#xff1a; 一&#xff0c;下载完整的HPM—SDK 下载网址&#x…

数据结构学习 Leetcode494 目标和

关键词&#xff1a;动态规划 01背包 dfs回溯 一个套路&#xff1a; 01背包&#xff1a;空间优化之后dp【target1】&#xff0c;遍历的时候要逆序遍历完全背包&#xff1a;空间优化之后dp【target1】&#xff0c;遍历的时候要正序遍历 题目&#xff1a; 解法一&#xff1a; …

Linux操作系统——进程(六) 进程地址空间

进程地址空间 C/C程序员一般将我们所写的程序看成如下这种结构&#xff1a; 我们所写的程序通过编译编译之后就可以以这样的方式进行分布. 我们先通过编写一段C语言代码来进行验证&#xff1a; 运行结果&#xff1a; 我们可以看出来上述地址遵循的就是我们上面画的一种结构。…

树莓派安装Nginx搭建web服务器结合内网穿透实现无公网IP远程访问本地站点

文章目录 1. Nginx安装2. 安装cpolar3.配置域名访问Nginx4. 固定域名访问5. 配置静态站点 安装 Nginx&#xff08;发音为“engine-x”&#xff09;可以将您的树莓派变成一个强大的 Web 服务器&#xff0c;可以用于托管网站或 Web 应用程序。相比其他 Web 服务器&#xff0c;Ngi…

数据分析-23--糖尿病预测(线性回归模型)(包含数据代码)

文章目录 0. 数据代码下载1. 项目介绍2. 数据处理1. 导入数据2. 处理数据 3. 建立模型4. 考察单个特征 0. 数据代码下载 关注公众号&#xff1a;『AI学习星球』 回复&#xff1a;糖尿病预测 即可获取数据下载。 算法学习、4对1辅导、论文辅导或核心期刊可以通过公众号或➕v&am…

【linux】touch的基本使用

碎碎念 刚接触linux时候的几个最基础的命令之一&#xff0c;用来创建文件。如果使用touch --help的时候会发现作者对于touch的简介&#xff1a;Update the access and modification times of each FILE to the current time.用于修改文件的访问和时间戳 带我的leader属于那种…

PDF控件Spire.PDF for .NET【安全】演示:修改加密PDF的密码

修改PDF文件的密码确实是一个理性的选择&#xff0c;尤其是当密码被某人知道并且您的PDF文件不再安全时。Spire.PDF for .NET使您能够用 C#、VB.NET 修改加密 PDF 文件的密码。您可以修改所有者密码和用户密码&#xff0c;并设置访问 PDF 文件时的用户限制。现在请看修改加密PD…

【软件工程大题】数据流图_DFD图_精简易上手

数据流图(DFD)是一种图形化技术,它描绘信息流和数据从输人移动到输出的过程中所经受的变换。 首先给出一个数据流图样例 基本的四种图形 直角矩形:代表源点或终点,一般来说,是人,如例图的仓库管理员和采购员圆形(也可以画成圆角矩形):是处理,一般来说,是动作,是动词名词的形式…

关键字:static关键字

在 Java 编程语言中&#xff0c;static关键字有以下几种主要用法&#xff1a; 静态变量&#xff1a;使用static修饰的变量被称为静态变量。静态变量属于类级别&#xff0c;而不是属于类的实例。这意味着无论创建了多少个类的实例&#xff0c;只会有一个静态变量的副本被所有实…

【Spring Security】认证之案例的使用、MD5加密、CSRF防御

目录 一、引言 1、什么是SpringSecurity认证 2、为什么使用SpringSecurity之认证 3、实现步骤 二、快速实现&#xff08;案例&#xff09; 1、添加依赖 2、配置 3、导入数据表及相关代码 4、创建登录页及首页 5、创建配置Controller 6、用户认证 6.1、用户对象User…

如何用Python批量计算Word中的算式

一、问题的提出 到了期末&#xff0c;大家都在忙着写总结、改试卷、算工作量&#xff0c;写总结可以借助于ChatGPT&#xff0c;改试卷可以用星火的自动批阅功能&#xff0c;算工作量就是一项比较棘手的问题&#xff0c;因为它涉及很多算式&#xff0c;有时需要老师用计算器算来…

判断电话号码是否重复-excel

有时候重复的数据不需要或者很烦人&#xff0c;就需要采取措施&#xff0c;希望以下的方法能帮到你。 1.判断是否重复 方法一&#xff1a; 1&#xff09;针对第一个单元格输入等号&#xff0c;以及公式countif(查找记录数的范围&#xff0c;需要查找的单元格&#xff09; 2…

二叉树题目:在二叉树中分配硬币

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;在二叉树中分配硬币 出处&#xff1a;979. 在二叉树中分配硬币 难度 6 级 题目描述 要求 给定一个有 n \texttt{n} n 个结点的二叉树的根结点 r…

删除数据后, redis 内存占用还是很高怎么办?

现象&#xff1a; reids 做了数据删除&#xff0c;数据量不大&#xff0c;使用 top 命令看&#xff0c;发现还是占用大量内存 原因&#xff1a; 1.redis 底层内存根据内存分配器分配&#xff0c;不会立刻释放 2.redis 释放的内存空间不是连续的&#xff0c;存在碎片 内存碎…

【Vulnhub 靶场】【Hms?: 1】【简单】【20210728】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/hms-1,728/ 靶场下载&#xff1a;https://download.vulnhub.com/hms/niveK.ova 靶场难度&#xff1a;简单 发布日期&#xff1a;2021年07月28日 文件大小&#xff1a;2.9 GB 靶场作者&#xff1a;niveK 靶场系…

基于ssm的学生就业管理系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本学生就业管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息…