【教程】使用vuepress构建静态文档网站,并部署到github上

官网

  • 快速上手 | VuePress (vuejs.org)

构建项目

我们跟着官网的教程先构建一个demo

这里我把 vuepress-starter 这个项目名称换成了 howtolive

  1. 创建并进入一个新目录
mkdir howtolive && cd howtolive
  1. 使用你喜欢的包管理器进行初始化
yarn init 

image.png
这里的问题可以一路回车

  1. 将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

yarn add -D vuepress 

注意:如果你的现有项目依赖了 webpack 3.x,我们推荐使用 Yarn (opens new window)而不是 npm 来安装 VuePress。因为在这种情形下,npm 会生成错误的依赖树。
注意: 不要在后面添加:# npm install -D vuepress

  1. 创建你的第一篇文档
mkdir docs && echo '# Hello VuePress' > docs/README.md
  1. 在 package.json 中添加一些 scripts(opens new window)

这一步骤是可选的,但我们推荐你完成它。在下文中,我们会默认这些 scripts 已经被添加。

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

如下图所示
image.png

  1. 在本地启动服务器
yarn docs:dev 

VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。

项目启动之后就是这样
image.png

目录结构

VuePress 遵循 “约定优于配置” 的原则,推荐的目录结构如下:

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── public (存放网站图标等信息)
│   │   ├── styles 
│   │   │   └── palette.styl (网站自定义样式)
│   │   └── config.js (路由,图标等的配置文件)
│   │ 
│   ├── README.md
│   ├── guide 
│   │   └── README.md (具体文章博客)
│ 
└── package.json

如下图所示
image.png

配置网站标题和图标

配置文件

如果没有任何配置,这个网站将会是非常局限的,用户也无法在你的网站上自由导航。为了更好地自定义你的网站,让我们首先在你的文档目录下创建一个 .vuepress 目录,所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样:

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

一个 VuePress 网站必要的配置文件是 .vuepress/config.js,它应该导出一个 JavaScript 对象:

module.exports = {title: 'How to live',description: '让我们一起学习如何生活',head: [['link', { rel: 'icon', href: `favicon.ico` }]],}

把ico放在public下面
image.png

项目启动之后,如下之后:

image.png

默认主题配置

  • 默认主题配置 | VuePress (vuejs.org)

首页

---home: trueheroText: How to livetagline: 让我们一起学习如何生活吧actionText: 开始 →actionLink: /features:- title: 生理健康details: 了解自己的身体,养成良好的作息生活习惯- title: 心理健康details: 了解不同的文化,形成完善的认知观念---

image.png

注意需要重新编译后,才会看到效果

image.png

导航栏

在config.js中配置

    themeConfig: {// 主题设置logo: '/logo.png',nav: [{// 右上导航航条 docs/.vuepress 文件夹下text: '首页',link: '/',}, {text: '生理健康',items: [{ text: '了解身体结构', link: '/' }, // 可不写后缀 .md{ text: '养成良好生活习惯', link: 'https://www.baidu.com/' }// 外部链接]}, {text: '心理健康',link: '/'}],}

image.png

image.png

侧边栏

 themeConfig: {// 主题设置logo: '/logo.png',nav: [{// 右上导航航条 docs/.vuepress 文件夹下text: '首页',link: '/',}, {text: '生理健康',items: [{ text: '人体构造', link: '/生理健康/人体构造/通用/1肌肉' }, // 可不写后缀 .md{ text: '生活习惯', link: 'https://www.baidu.com/' }// 外部链接]}, {text: '心理健康',link: '/'}],sidebar: {//左侧列表'/生理健康/人体构造/': [{title: '人体构造',collapsable: true,children: [{title: '肌肉',path: '通用/1肌肉'},{title: '眼睛',path: '通用/2眼睛'}]},{title: '男性',collapsable: true,children: [{title: '喉结',path: '/男性/3喉结'}]}],'/': [''], //不能放在数组第一个,否则会导致右侧栏无法使用 },// 左侧列表展开级数,默认是 1sidebarDepth: 2,}

image.png

image.png

image.png

自定义样式

image.png

改变主题颜色

$accentColor = #378ae2

改变文章两侧空白宽度

.page .theme-default-content:not(.custom){max-width: none;
}

部署到github

部署 | VuePress (vuejs.org)

在根目录下建一个depoy.sh
image.png


#!/usr/bin/env sh# 确保脚本抛出遇到的错误
set -e# 生成静态文件
npm run docs:build# 进入生成的文件夹
cd docs/.vuepress/dist# 如果是发布到自定义域名
# echo 'www.example.com' > CNAMEgit init
git branch -m master main
git add -A
git commit -m 'deploy'# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main# 如果发布到 https://<USERNAME>.github.io/<REPO>git push -f git@github.com:ni'de.git maincd -

config.js也要修改
image.png

然后双击deploy.sh运行
image.png

或者在gitbash中打开

然后dist目录下生成打包好的项目,并同步到gihub
image.png

image.png

配置github

image.png

然后就可以通过github来访问静态网站了

image.png

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

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

相关文章

2023-2024-1 for循环-1(15-38)

7-15 输出闰年 输出21世纪中截止某个年份以来的所有闰年年份。注意&#xff1a;闰年的判别条件是该年年份能被4整除但不能被100整除、或者能被400整除。 输入格式: 输入在一行中给出21世纪的某个截止年份。 输出格式: 逐行输出满足条件的所有闰年年份&#xff0c;即每个年…

06-Scala面向对象

面向对象编程 ​ Scala是一门完全面向对象的语言&#xff0c;摒弃了Java中很多不是面向对象的语法。 ​ 虽然如此&#xff0c;但其面向对象思想和 Java的面向对象思想还是一致的 Scala包 1&#xff09;基本语法 Scala中基本的package包语法和 Java 完全一致 例如&#xf…

前端TypeScript学习day04-交叉类型与泛型

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 交叉类型 泛型 创建泛型函数 调用泛型函数&#xff1a; 简化调用泛型函数&#xff1a; 泛型约束 指定…

Marin说PCB之BGA焊盘削焊盘带来的焊接问题和解决办法

每周日上午10点钟都是小编最开心的时间了&#xff0c;这个点是斗破苍穹播出的时间。小编我从萧炎从这个动漫开播到现在都追了好多年了&#xff0c;强烈推荐喜欢这个小说的可以看这个动漫&#xff0c;拍的还不错&#xff0c;只是萧炎的配音不再是张沛老师了&#xff0c;有点可惜…

基于Java的宠物领养管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

编写HTTP协议代理的一些知识(源码)

早期上网经常需要使用代理服务器&#xff0c;现在用的比较少了&#xff0c;大家更耳熟能详的反而是“反向代理”如Nginx。 代理服务器一般用作局域网上网&#xff0c;而反向代理则是把来自互联网的连接转发到局域网上&#xff0c;作用刚好相反。 HTTP协议自身就带有对代理服务器…

在 Windows 平台上启动 MATLAB

目录 在 Windows 平台上启动 MATLAB 选择 MATLAB 图标 从 Windows 系统命令行调用 matlab 从 MATLAB 命令提示符调用 matlab 打开与 MATLAB 相关联的文件 从 Windows 资源管理器工具中选择 MATLAB 可执行文件 在 Windows 平台上启动 MATLAB 选择以下一种方式启动 MATLAB…

105AspectRatio调整宽高比组件_flutter

AspectRatio组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比。 AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展&#xff0c;widget 的高度是由宽 度和比率决定的&#xff0c;类似于 BoxFit 中的 contain&#xff0c;按照固定比率去尽量占满区域。 …

Java 继承与实现

一、继承&#xff08;extends&#xff09; 1.1 继承概念 继承是面向对象的基本特征&#xff0c;它允许子类继承父类的特征和行为&#xff0c;以提高代码的复用率和维护性等。下面一张图生动地展示了继承和类之间的关系&#xff1a; 继承图 上图中&#xff0c;“动物”、“食草…

数据结构与算法-栈

栈和队列是两种常用的线性结构&#xff0c;属于特殊的线性表&#xff0c;是线性表相关运算的一个子集。一般来说&#xff0c;线性表上的插入和删除操作不受任何限制&#xff0c;但栈只能在表的一端进行插入和删除操作&#xff0c;而队列则只能在一端进行插入操作&#xff0c;在…

物联网市场规模迅速增加,在交通、医疗、农业等方面发展势头迅猛

物联网&#xff08;Internet of things&#xff09;是一系列用于解决物的信息识别、交换、控制等技术的集合应用形成的网络。当连接从互联网时代的人与人走向万物互联&#xff0c;万物的数字化、智能化依赖物联网技术。因此&#xff0c;物联网是指利用各类信息识别设备&#xf…

Ceph介绍与部署

Ceph介绍与部署 一、存储基础1.1、单机存储设备1.1.1、单机存储的问题 1.2、商业存储解决方案1.3、分布式存储&#xff08;软件定义的存储 SDS&#xff09;1.3.1、分布式存储的类型 二、Ceph 简介三、Ceph 优势四、Ceph 架构五、Ceph 核心组件5.1、Pool中数据保存方式支持两种类…

Vue2实现图片预览功能 -- v-viewer:图片查看器

一. 先看效果图 二. 具体步骤 简介&#xff1a;一款基于 viewer.js 封装的Vue版插件&#xff0c;可用于图像查看&#xff0c;以及图片的旋转、缩放等功能预览 官网&#xff1a;v-viewer 文档说明&#xff1a;Vue图片浏览组件v-viewer&#xff0c;支持旋转、缩放、翻转等操作 - …

Ultra-Fast-Lane-Detection-v2 裁剪数据增强

目录 标注拆分为独立文件加载并数据增强 Ultra-Fast-Lane-Detection-v2 裁剪数据增强 main方法是调用示例

Android Studio的笔记--HttpURLConnection使用GET下载zip文件

HttpURLConnection使用GET下载zip文件 http get下载zip文件MainActivity.javaAndroidMainfest.xmlactivity_main.xmllog http get下载zip文件 MainActivity.java 用HttpURLConnection GET方法进行需注意&#xff1a; 1、Android 9及以上版本需要设置这个&#xff0c;否则会有…

网络爬虫实践小结

背景 近期工作中要解决两个问题&#xff0c;一个是数据组需要网爬一些图片数据&#xff0c;另外一个是要批量爬取公司用于文档协同的一个网站上的附件。于是乎&#xff0c;就写了两个脚本去完成任务。 爬虫思路 第一步&#xff1a;向确定的url发送请求&#xff0c;接收服务器…

[小林coding]4.2TCP重传,滑动窗口,流量控制,拥塞控制_1013

1.重传 1.1 超时重传 两个情况&#xff1a; a 数据包丢失 b ack应答丢失 RTT&#xff1a;网络包往返的时间&#xff08;不是一个定值&#xff09; RTO&#xff1a;超时重传的时间间隔&#xff08;也是一个动态的&#xff09; RTO设置的时间长&#xff1a;浪费时间资源&…

grafana api创建dashboard 记录

文章目录 json model导入申请api key创建dashboard删除dashboard json model导入 直接在ui通过json model 导入&#xff0c;开发自己用还好&#xff0c;但对非开发人员不太友好&#xff0c;故考虑通过api后台自动创建 api doc : https://grafana.com/docs/grafana/v9.3/devel…

AR动态贴纸SDK,让创作更加生动有趣

在当今的社交媒体时代&#xff0c;视频已经成为了人们表达自我、分享生活的重要方式。然而&#xff0c;如何让你的视频在众多的信息中脱颖而出&#xff0c;吸引更多的关注和点赞呢&#xff1f;答案可能就在你的手中——美摄AR动态贴纸SDK。 美摄AR动态贴纸SDK是一款专为视频编辑…

R语言——赋值(= ,<- ,<<-)

R语言 R语言——赋值&#xff08; &#xff0c;<- &#xff0c;<<-&#xff09; 文章目录 R语言一、 与 <- 的区别二、 <<- ,向上一环境层写入变量 R语言中" <- " 与 " " 都可以用来赋值&#xff0c;但R中建议使用" <- “…