当前位置: 首页 > news >正文

vuepress使用简介及个人博客搭建

目录

  • 一、介绍
  • 二、环境准备
  • 三、安装运行vuepress
  • 四、目录结构
  • 五、配置文件
  • 六、导航栏配置
  • 七、导航栏logo
  • 八、浏览器图标
  • 九、侧边栏配置
  • 十、添加 Git 仓库和编辑链接
  • 十一、部署到GitHub
  • 十二、搭建成功

一、介绍

VuePress 是 Vuejs 官方提供的一个是Vue驱动的静态网站生成器,基于Markdown语法生成网页。简单的说它就是一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown 文档,并且可以将其发布到github。

VuePress ,一个全新的基于 vue 实现的静态网站生成器,实际上就是一个 vue 的 spa 应用,内置 webpack,可以用来写文档。

VuePress 由两部分组成:一个以 Vue 驱动的主题系统简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

vuepress官网:https://vuepress.vuejs.org/zh/
在这里插入图片描述
我的博客:小宇博客
在这里插入图片描述

二、环境准备

1、安装NodeJs: NodeJs 安装教程

2、安装Git :Git基础使用教程

3、注册GitHub账号:GitHub官网

三、安装运行vuepress

npm install -g vuepress # # 安装

接下来,创建一个新的 VuePress 项目:

# 创建一个目录
mkdir vuepress-starter
# 进入目录
cd vuepress-starter

初始化项目:生成一个package.json文件

npm init -y

在这里插入图片描述
安装本地依赖

npm install -D vuepress

修改package.json 中添加一些 scripts

{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}

在这里插入图片描述
在本地启动服务器 VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。

npm run docs:dev

四、目录结构

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.jsondocs/.vuepress: 用于存放全局的配置、组件、静态资源等。
docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
docs/.vuepress/theme: 用于存放本地主题。
docs/.vuepress/styles: 用于存放样式相关的文件。
docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件,会生成在最终的 CSS 文件结尾,具有比默认样式更高的优先级。
docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量,或者设置新的 stylus 颜色常量。
docs/.vuepress/public: 静态资源目录。
docs/.vuepress/templates: 存储 HTML 模板文件。
docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
docs/.vuepress/config.js: 配置文件的入口文件,也可以是 YML 或 toml。
docs/.vuepress/enhanceApp.js: 客户端应用的增强。

五、配置文件

在项目根目录下创建一个 .vuepress 文件夹,并在其中创建一个 config.js 文件,这是 VuePress 的配置文件
在这里插入图片描述
编辑 .vuepress/config.js 文件,添加基本配置

module.exports={title: "小宇博客",     // 网站的标题description: "我的个人博客",    // 网站的描述}

在docs目录下创建README.md 首页的配置

---
home: true
heroImage: /assets/img/logo.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

六、导航栏配置

导航栏的配置在 docs/.vuepress/cpnfig.js 中配置

themeConfig: {nav: [{ text: '首页', link: '/' },{text: '技术笔记',items: [{ text: '前端', items:[{ text: 'HTML & CSS', link: '/guide/前端学习笔记/' },{ text: 'JavaScript', link: '/guide/japanese/' },{ text: 'Vue', link: '/guide/japanese/' },]},{ text: '后端', items:[{ text: '前端学习笔记', link: '/guide/前端学习笔记/' },{ text: 'Java学习笔记', link: '/guide/japanese/' }]},]},{text: '常见问题',items: [{ text: 'Chinese', link: '/language/chinese/' },{ text: 'Japanese', link: '/language/japanese/' }]},{text: '面试常问',items: [{ text: 'Chinese', link: '/language/chinese/' },{ text: 'Japanese', link: '/language/japanese/' }]},{text: '开源项目',items: [{ text: 'Chinese', link: '/language/chinese/' }// { text: 'Japanese', link: '/language/japanese/' }]},{ text: '关于我', link: '/about/about.md' }],}

在这里插入图片描述

七、导航栏logo

编辑 .vuepress/config.js 创建/public/assets/img/
在这里插入图片描述

module.exports = {themeConfig: {logo: '/assets/img/comet.png',}
}

在这里插入图片描述

八、浏览器图标

编辑 .vuepress/config.js

module.exports={head: [['link', { rel: 'icon', href: '/assets/img/favicon.ico' }]],}

九、侧边栏配置

我把侧边栏的内容放在了guide下了
在这里插入图片描述
导航栏的配置在 docs/.vuepress/cpnfig.js 中配置

   themeConfig: {sidebar: [{title: 'HTML基础学习',   // 必要的// path: '/前端学习笔记/',      // 可选的, 标题的跳转链接,应为绝对路径且必须存在collapsable: true, // 可选的, 默认值是 true,sidebarDepth: 1,    // 可选的, 默认值是 1children: [{title: 'HTML基础学习',path: '/guide/前端学习笔记/01html基础.md'},{title: 'bas',path: '/guide/前端学习笔记/00html基础.md'},]},{title: 'Group 2',children: [{title: 'java',path: '/java/01java.md'}],//   initialOpenGroupIndex: -1 // 可选的, 默认值是 0}]}

在这里插入图片描述
禁止侧边栏

---
lang: zh-CN
title: 页面的标题
date: 2077-10-01
description: 页面的描述,可省略
sidebar: false         #  sidebar: false   禁用侧边栏 auto 开启
---

在这里插入图片描述

十、添加 Git 仓库和编辑链接

git配置在 docs/.vuepress/cpnfig.js 中配置

 themeConfig: {// 你的 Git 项目地址,添加后会在导航栏的最后追加repo: '地址',}

十一、部署到GitHub

项目/docs/.vuepress/config.js base必须配置正确
在这里插入图片描述
在vuepress项目的根目录下添加deploy.sh文件,该文件是用于执行发布的脚本文件。

#!/usr/bin/env sh# 确保脚本抛出遇到的错误
set -e# 生成静态文件
npm run docs:build# 进入生成的文件夹
cd docs/.vuepress/dist# 如果是发布到自定义域名
# echo 'www.example.com' > CNAMEgit init
git add -A
git commit -m 'deploy'# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master# 这里是填写你的github仓库地址,把git@github.com:xxx/xxx.git替换成你的仓库地址
git push -f git@github.com:fanchens/vuepress.git master:gh-pagescd -

在这里插入图片描述
部署教程1

在项目根目录下打开终端(git bash、cmd等都可以),执行sh deploy.sh命令

sh deploy.sh

部署教程2

npm run docs:build

dist是反编译后的文件 把这个文件的内容放到git就可以了

在这里插入图片描述

十二、搭建成功

演示
我的博客:小宇博客

在这里插入图片描述


在这里插入图片描述

相关文章:

vuepress使用简介及个人博客搭建

目录 一、介绍二、环境准备三、安装运行vuepress四、目录结构五、配置文件六、导航栏配置七、导航栏logo八、浏览器图标九、侧边栏配置十、添加 Git 仓库和编辑链接十一、部署到GitHub十二、搭建成功 一、介绍 VuePress 是 Vuejs 官方提供的一个是Vue驱动的静态网站生成器&…...

c#文件读写

1.1读取文件 方法说明​File.ReadAllText(FilePath);​读取指定路径的文件​File.ReadAllText(FilePath, Encoding);​通过指定编码格式来读取指定文件​File.ReadAllBytes();​读取二进制文件&#xff0c;并把内容读取到一个字节数组​File.ReadAllLines();​以行的形式读取文…...

WIFI 企业级认证手段 EAP-TLS介绍

EAP-TLS&#xff08;EAP-Transport Layer Security&#xff09;被认为是WLAN网络里最安全的认证方法&#xff0c;因此被企业广泛采用。本文会针对EAP-TLS的基本原理进行介绍。 在介绍原理之前&#xff0c;先介绍下WLAN网络里认证加密手段涉及到的一些基本概念。 1 802.1x IEE…...

【网络架构】keepalive

目录 一、keepalive基础 1.1 作用 1.2 原理 1.3 功能 二、keepalive安装 2.1 yum安装 2.2 编译安装 三、配置文件 3.1 keepalived相关文件 3.2 主配置的组成 3.2.1 全局配置 3.2.2 配置虚拟路由器 四、实际操作 4.1 lvskeepalived高可用群集 4.2 keepalivedngi…...

【Dison夏令营 Day 03】使用 Python 创建我们自己的 21 点游戏

21 点(英文&#xff1a;Blackjack)是一种在赌场玩的纸牌游戏。这种游戏的参与者不是互相竞争&#xff0c;而是与赌场指定的庄家竞争。在本文中&#xff0c;我们将从头开始创建可在终端上玩的玩家与庄家之间的二十一点游戏。 二十一点规则 我们将为从未玩过二十一点的读者提供…...

Workbench密码登录登录失败

Workbench密码登录登录失败操作系统禁用了密码登录方式&#xff0c;会导致使用了正确的用户名和密码仍无法登录 sudo vim /etc/ssh/sshd_config 输入O进入编辑 改完后重启 systemctl restart sshd.service 登录报错 有试了几遍登上了 可能是改完还要等一会儿...

哈尔滨高校大学智能制造实验室数字孪生可视化系统平台项目的验收

哈尔滨高校大学智能制造实验室数字孪生可视化系统平台项目的验收&#xff0c;标志着这一技术在教育领域的应用取得了新的突破。项目旨在开发一个数字孪生可视化系统平台&#xff0c;用于哈尔滨高校大学智能制造实验室的设备模拟、监测与数据分析。项目的主要目标包括&#xff1…...

009、MongoDB的分片策略

目录 MongoDB的分片策略:范围分片vs哈希分片 1. 范围分片(Range Sharding) 1.1 工作原理 1.2 优点 1.3 缺点 1.4 研究支持 2. 哈希分片(Hash Sharding) 2.1 工作原理 2.2 优点 2.3 缺点 2.4 研究支持 3. 选择合适的分片策略 4. 实践案例 4.1 电子商务平台 4.2 社…...

go~缓存设计配合singleFlight

一个缓存设计&#xff0c;配合go的singleFlight 最开始的设计如下 添加分布式缓存 上线后分布式缓存上涨的流量并不等于下游下降的流量&#xff0c;而是下游下降的流量 * 2&#xff5e;3 究其原因&#xff0c;就是采用了go的singleFlight&#xff0c;假定请求缓存时长10ms&a…...

多线程引发的安全问题

前言&#x1f440;~ 上一章我们介绍了线程的一些基础知识点&#xff0c;例如创建线程、查看线程、中断线程、等待线程等知识点&#xff0c;今天我们讲解多线程下引发的安全问题 线程安全&#xff08;最复杂也最重要&#xff09; 产生线程安全问题的原因 锁&#xff08;重要…...

在晋升受阻或遭受不公待遇申诉时,这样写是不是好一些?

在晋升受阻或遭受不公待遇申诉时&#xff0c;这样写是不是好一些&#xff1f; 在职场中&#xff0c;晋升受阻或遭受不公待遇是员工可能面临的问题之一。面对这样的情况&#xff0c;如何撰写一份有效的申诉材料&#xff0c;以维护自己的合法权益&#xff0c;就显得尤为重要。#李…...

LeetCode 2710.移除字符串中的尾随零:模拟

【LetMeFly】2710.移除字符串中的尾随零&#xff1a;模拟 力扣题目链接&#xff1a;https://leetcode.cn/problems/remove-trailing-zeros-from-a-string/ 给你一个用字符串表示的正整数 num &#xff0c;请你以字符串形式返回不含尾随零的整数 num 。 示例 1&#xff1a; 输…...

代码随想录训练营第二十三天 39组合总和 40组合总和II 131分割回文串

第一题&#xff1a; 原题链接&#xff1a;39. 组合总和 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 终止条件&#xff1a; 用一个sum值来记录当前组合中元素的总和。当sum的值大于target的时候证明该组合不合适&#xff0c;直接return。当sum的值等于target的…...

【C++】数组、字符串

六、数组、字符串 讨论数组离不开指针&#xff0c;指针基本上就是数组的一切的基础&#xff0c;数组和指针的相关内容参考我的C系列博文&#xff1a;【C语言学习笔记】四、指针_通过变量名访问内存单元中的数据缺点-CSDN博客【C语言学习笔记】三、数组-CSDN博客 1、数组就是&…...

MySQL InnoDB支持几种行格式

数据库表的行格式决定了一行数据是如何进行物理存储的&#xff0c;进而影响查询和DML操作的性能。 在InnoDB中&#xff0c;常见的行格式有4种&#xff1a; 1、COMPACT&#xff1a;是MySQL 5.0之前的默认格式&#xff0c;除了保存字段值外&#xff0c;还会利用空值列表保存null…...

Day6: 344.反转字符串 541. 反转字符串II 卡码网:54.替换数字

题目344. 反转字符串 - 力扣&#xff08;LeetCode&#xff09; void reverseString(vector<char>& s) {int len s.size();int left 0;int right len - 1;while (left < right){swap(s[left], s[right--]);}return;} 题目541. 反转字符串 II - 力扣&#xff0…...

kubekey 离线安装高可用 kubernetes 集群

1. 准备环境 版本&#xff1a; kubernetes: v1.29.2 kubesphere: v3.4.1 kubekey: v3.1.1 说明&#xff1a; kubekey 只用于安装 kubernetes&#xff0c;因为 kubesphere 的配置在安装时经常需要变动&#xff0c;用 ks-installer 的 yaml 文件更好管理&#xff1b;ks-installe…...

大数据面试题之Hive(2)

目录 Hive的join操作原理&#xff0c;leftjoin、right join、inner join、outer join的异同? Hive如何优化join操作 Hive的mapjoin Hive语句的运行机制&#xff0c;例如包含where、having、group by、orderby&#xff0c;整个的执行过程? Hive使用的时候会将数据同步到HD…...

求推荐几款http可视化调试工具?

Postman 非常流行的API调试工具&#xff0c;适用于构建、测试和文档化APIs。它支持各种HTTP方法&#xff0c;有强大的集合和环境管理功能&#xff0c;以及代码生成能力。 BB-API 是一款旨在提升开发效率的工具&#xff0c;它专注于提供简约、完全免费且功能强大的HTTP模拟请…...

Python逻辑控制语句 之 判断语句--if else结构

1.if else 的介绍 if else &#xff1a;如果 ... 否则 .... 2.if else 的语法 if 判断条件: 判断条件成立&#xff0c;执行的代码 else: 判断条件不成立&#xff0c;执行的代码 &#xff08;1&#xff09;else 是关键字, 后⾯需要 冒号 &#xff08;2&#xff09;存在冒号…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...