VuePress-theme-hope 搭建个人博客 2【快速上手】 —— 安装、部署 防止踩坑篇

续👆VuePress、VuePress-theme-hope 搭建个人博客 1【快速上手】

项目常用命令

  • vuepress dev [dir] 会启动一个开发服务器,以便让你在本地开发你的 VuePress 站点。
  • vuepress build [dir] 会将你的 VuePress 站点构建成静态文件,以便你进行后续部署。

使用模板

如果使用 VuePress Theme Hope 模板,可以在 package.json 中发现下列三个命令:

{"scripts": {"docs:build": "vuepress build src","docs:clean-dev": "vuepress dev src --clean-cache","docs:dev": "vuepress dev src"}
}

可以使用:

  • npm docs:dev 启动开发服务器
  • npm docs:build 构建项目并输出
  • npm docs:clean-dev 清除缓存并启动开发服务器

终止开发服务器

如果你需要终止开发服务器,请点击终端,并连续两次按下 Ctrl + C

页面的生成

VuePress 是以 Markdown 为中心的。你项目中的每一个 Markdown 文件都是一个单独的页面。

默认情况下,页面的路由路径是根据你的 Markdown 文件的相对路径决定的。

由于你的项目是通过创建助手生成的,那么你会得到以下文件结构:

└─ src├─ guide│  ├─ ...│  └─ page.md│  └─ markdown.md│  └─ README.md├─ ...├─ slide.md└─ README.md

你的 Markdown 文件对应的路由路径为:

相对路径路由路径
/README.md/
/slide.md/slide.html
/guide/README.md/guide/
/guide/slide.md/guide/slide.html
/guide/page.md/guide/page.html

README.md是特例,在 Markdown 中,它会作为所在文件夹的主页。所以在渲染为网页时,它的对应路径为网页中的主页路径 index.html

VuePress 项目结构

VuePress 只控制 VuePress 项目文件夹中的文件,也就是默认模板生成的 src 文件夹,项目下的其他文件不受 VuePress 控制。

一个基本的项目结构如下:

.
├── .github (可选的) → GitHub 配置文件存放路径
│    └── workflow → GitHub 工作流配置
│         └── docs-deploy.yml → 自动部署文档的工作流
│
├── src → 文档文件夹
│    │
│    ├── .vuepress (可选的) → VuePress 配置文件夹
│    │    │
│    │    ├── dist (默认的) → 构建输出目录
│    │    │
│    │    ├── public (可选的) → 静态资源目录
│    │    │
│    │    ├── styles (可选的) → 用于存放样式相关的文件
│    │    │
│    │    ├── config.{js,ts} (可选的) → 配置文件的入口文件
│    │    │
│    │    └── client.{js,ts} (可选的) → 客户端文件
│    │
│    ├── ... → 其他项目文档
│    │
│    └── README.md → 项目主页
│
└── package.json → Nodejs 配置文件

部署构建项目

  • 当你在本地完成项目的初步开发后,你就可以使用 pnpm docs:build 命令构建网站。
  • 如果你在使用模板,网站内容将会输出到 VuePress 项目的 .vuepress/dist 文件夹下。这些文件就是 VuePress 的最终输出结果。
  • 你可以将此文件夹的内容部署到你网站的服务器上。最简单的做法是上传到 GitHub 并开启 GitHub Pages。

部署到 GitHub Pages

如果你在使用模板,且在创建过程中选择了创建自动部署文档的 GitHub 工作流,那么你唯一要做的就是设置正确的 base选项

  • 如果你准备发布到 https://<USERNAME>.github.io/,你必须将整个项目上传至 https://github.com/<USERNAME>/<USERNAME>.github.io 仓库。在这种情况下你无需进行任何更改,因为 base 默认就是 "/"

  • 如果你的仓库地址是一个普通的形如 https://github.com/<USERNAME>/<REPO> 的格式,网站将会被发布到 https://<USERNAME>.github.io/<REPO>/ ,也就是说,你需要将 base 设置为 "/<REPO>/"

  • 当操作完成后,你应该前往 GitHub 仓库的设置页面,选择 gh-pages 作为 GitHub Pages 的源。

其他部署方式

  • 关于其他部署方式,请参阅 vuepress→部署
  • 关于Gitee,如果你在使用码云,你需要注意码云的特殊仓库是 https://gitee.com/<USERNAME>/<USERNAME>
  • 如果你推送到这个仓库,你的文档将会发布在 https://<USERNAME>.gitee.io 上。

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

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

相关文章

K8S 全局架构图 —— 筑梦之路

kube-apiserver&#xff1a; Kubernetes API 服务器验证并配置 API 对象的数据&#xff0c; 这些对象包括 pods、services、replicationcontrollers 等。API 服务器为 REST 操作提供服务&#xff0c;并为集群的共享状态提供前端&#xff0c; 所有其他组件都通过该前端进行交互。…

3DMAX 中的 VR 渲染器如何设置局部区域渲染?

3DMAX 中的 VR 渲染器如何设置局部渲染&#xff1f; 首先我们要得打开渲染设置&#xff0c;在3damx里按F10&#xff0c;调出渲染设置。选定渲染器为Vary渲染器&#xff1a; 设置VR的局部渲染&#xff0c;需要打开帧缓冲&#xff0c;我们在V-ary项下&#xff0c;打开帧缓冲(点击…

使用 uiautomatorviewer 获取元素的定位信息

1. 使用 adb 连接设备(真机或模拟器) 连接夜神模拟器:adb connect 127.0.0.1:62001 连接MuMu模拟器:adb connect 127.0.0.1:7555 2. 打开 uiautomatorviewer 在 android-sdk --> tools 目录,找到 uiautomatorviewer.bat,双击打开: 3. 连接指定的设备(以连接夜神…

使用cmake配置matplotlibcpp生成VS项目

https://gitee.com/feboreigns/matplotlibcpp 这篇文章需要一些cmake基础&#xff0c;python基础&#xff0c;visualstudio基础 准备环境 注意如果在VS平台使用必须要手动下载python&#xff0c;不能使用conda里面的&#xff0c;比如3.8版本&#xff0c;因为conda里面没有py…

Checkpoint 执行机制原理解析

在介绍Checkpoint的执行机制前&#xff0c;我们需要了解一下state的存储&#xff0c;因为state是Checkpoint进行持久化备份的主要角色。Checkpoint作为Flink最基础也是最关键的容错机制&#xff0c;Checkpoint快照机制很好地保证了Flink应用从异常状态恢复后的数据准确性。同时…

Zblog主题模板:ZblogitseanPage博客主题模板

zblog主题模板&#xff1a;ZblogitseanPage博客主题模板 ZblogitseanPage博客主题模板主要是以文字内容为主导&#xff0c;将页面的设计杂乱的图片和元素进行最小化或者去除&#xff0c;从而使整个页面更加简洁、清晰&#xff0c;突出信息的呈现。 下面介绍一下zblog主题模板:Z…

在Windows 10中,启用飞行模式至少有六种,总有一种适合你

在Windows 10上,你可以通过多种方式管理飞行模式,在本指南中,我将概述完成此配置的步骤。飞行模式是一种允许你通过单一选项快速禁用无线设备(如Wi-Fi、蓝牙、近场通信(NFC)、全球定位系统(GPS)和蜂窝)的功能。通常,当你在飞机上,或者你在禁止使用无线电信号的地方时…

Docker自建私人云盘系统

Docker自建私人云盘系统。 有个人云盘需求的人&#xff0c;主要需求有这几类&#xff1a; 文件同步、分享需要。 照片、视频同步需要&#xff0c;尤其是全家人都是用的同步。 影视观看需要&#xff08;分为家庭内部、家庭外部&#xff09; 搭建个人网站/博客 云端OFFICE需…

配置代理解决跨域(CORS)问题

一、跨域 &#xff1f; 我们在完成前后端分离项目时&#xff08;VueSpringBoot&#xff09;&#xff0c;有很多人会遇到跨域问题&#xff08;CORS&#xff09;。 跨域&#xff08;Cross-Origin Resource Sharing&#xff0c;CORS&#xff09;是浏览器的一项安全功能&#xff…

H5向微信小程序发送信息(小程序web-view打开H5)

引入weixin-js-sdk npm i weixin-js-sdk 页面引入 // 引入wxjsimport wx from "weixin-js-sdk"; 点击触发方法 methods: {goweap(id){console.log(wx);// H5传递数据 &#xff08;navigateBack&#xff09;wx.miniProgram.navigateBack({delta: 1});wx.min…

力扣(leetcode)第171题Excel表列序号(Python)

171.Excel表列序号 题目链接&#xff1a;171.Excel表列序号 给你一个字符串 columnTitle &#xff0c;表示 Excel 表格中的列名称。返回 该列名称对应的列序号 。 例如&#xff1a; A -> 1 B -> 2 C -> 3 … Z -> 26 AA -> 27 AB -> 28 … 示例 1: 输入: …

Java 8 中的 Stream 轻松遍历树形结构

在平时的需求开发中&#xff0c;我们经常会遍历一些树形结构&#xff0c;数据库中使用父id来关联&#xff0c;为了降低数据库的查询压力&#xff0c;我们可以使用java8中的Stream流一次性把数据查出来&#xff0c;然后通过流式处理。 实体类&#xff1a;Menu.java package com…

Django 中集成 CKEditor 富文本编辑器详解

概要 在 Web 应用中&#xff0c;富文本编辑器是提高用户体验的重要组件之一。CKEditor 是一款流行的、功能丰富的富文本编辑器。在 Django 项目中集成 CKEditor 不仅可以提升内容编辑的灵活性&#xff0c;还能丰富用户的互动体验。本文将详细介绍如何在 Django 中集成和配置 C…

Apache Commons JCS缓存解决方案

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff01;今天&#xff0c;咱们来聊聊Apache Commons JCS&#xff0c;一个Java界里的缓存大杀器。缓存技术&#xff0c;对于提高应用性能来说&#xff0c;就像是给它加了一剂兴奋剂&#xff0c;能让数据访问变得快如闪电。…

windows进行udp端口转发,解决项目中服务器收不到组播数据的问题

说明 windows7的netsh interface portproxy命令只支持tcp端口转发 如果要进行udp端口转发可以使用sokit 运行sokit 端口转发&#xff08;以为tcp作为讲解&#xff0c;udp类似&#xff09; 选择转发器 输入监听地址&#xff08;SRC地址&#xff09;和端口 输入转发地址&am…

零基础学Java第三天

复习与回顾&#xff1a; 1.八大基本数据类型整型: byte short int long浮点: float double字符: char布尔: boolean2.声明整型和浮点和布尔类型的数据 一个变量数据类型 变量名字 初始化的值;int a 234;float f1 34.5f;double d1 782.9;boolean b1 true;3.变量名…

深度学习核心技术与实践之深度学习基础篇

非书中全部内容&#xff0c;只是写了些自认为有收获的部分 神经网络 生物神经元的特点 &#xff08;1&#xff09;人体各种神经元本身的构成很相似 &#xff08;2&#xff09;早期的大脑损伤&#xff0c;其功能可能是以其他部位的神经元来代替实现的 &#xff08;3&#x…

nmap扫描和MS17-010(永恒之蓝)漏洞攻击

情况介绍 攻击机kali中使用ifconfig可以看到ip是192.168.0.106。 靶机Window 7使用ipconfig可以看到ip是192.168.0.100。 Nmap Nmap全称为Network Mapper&#xff0c;又成为“上帝之眼”&#xff0c;可以扫描ip和端口。 然后在kali攻击机上使用nmap 192.168.0.103可以看…

一元函数微分学——刷题(2

目录 1.题目&#xff1a;2.解题思路和步骤&#xff1a;3.总结&#xff1a;小结&#xff1a; 1.题目&#xff1a; 2.解题思路和步骤&#xff1a; 这个题目可能看上去比较吓人&#xff0c;但是&#xff0c;又很简单&#xff1b;因为一切都太明确了&#xff0c;跟着我仔细看一下&…

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

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