VuePress 静态网站生成

news/2024/4/27 17:57:11/文章来源:https://blog.csdn.net/weixin_34051201/article/details/88614593

使用技术:

  • VuePress - Vue 驱动的静态网站生成器
仓库地址:https://github.com/yinian-R/v...

全局安装

## 安装
yarn global add vuepress # 或者:npm install -g vuepress

现有项目

如果你想在一个现有项目中使用 VuePress,同时想要在该项目中管理文档,则应该将 VuePress 安装为本地依赖。

## 没有项目可以初始化
yarn init## 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者:npm install -D vuepress## 新建一个 docs 文件夹
mkdir docs## 新建一个 markdown 文件
echo # Hello VuePress! > docs/README.md## 开始写作
npx vuepress dev docs

接着,在 package.json 里加一些脚本:

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

基本配置

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

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

module.exports = {title: 'Hello VuePress',description: 'Just playing around'
}

静态资源

创建public文件夹,主要用于存放静态资源

.
├─ docs
│  └─ .vuepress
│     └─ public
│          └─ image
│               └─ favicon.ico

添加网站 favicon,修改 .vuepress/config.js 内容

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

导航栏

你可以通过 themeConfig.nav 增加一些导航栏链接:

module.exports = {themeConfig: {nav: [{ text: '主页', link: '/' },{ text: '指南', link: '/guide/' },{text: '语言',items: [{ text: '中文', link: '/language/chinese/' },{ text: 'English', link: '/language/english/' }]},{ text: 'GitHub', link: 'https://github.com' }]}
};

首页

需要在dosc/README.md指定 home: true

---
home: true
heroImage: /image/favicon.ico
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /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
---

侧边栏

想要使 侧边栏(Sidebar)生效,需要配置 themeConfig.sidebar,基本的配置,需要一个包含了多个链接的数组:

module.exports = {themeConfig: {sidebar: ['/',['/hello', 'hello page']]}
};

部署

设置部署站点的基础路径。

module.exports = {base: '/vuepress-demo/',};

在你的项目中,创建一个如下的 deploy.sh 文件

#!/usr/bin/env bash
# 确保脚本抛出遇到的错误
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# 如果发布到 https://<USERNAME>.github.io/<REPO>git push -f git@github.com:yinian-R/vuepress-demo.git master:gh-pagescd -

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

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

相关文章

sharepoint2010人性化的地方--员工离职AD账号禁用(个人网站自动提醒上级经理功能)...

sharepoint2010人性化的地方--员工离职AD账号禁用&#xff08;个人网站自动提醒上级经理功能&#xff09; 最近有个项目&#xff0c;每个员工都开通了个人网站&#xff0c;但是有些员工离职后禁用AD账号后自动给该员工的个人属性中的“上级经理”指定的经理发一份提醒邮件如下&…

Java开发者都爱用的11个网站,赶紧码住!

在世界各地&#xff0c;成千上万的Java开发者进行着各式各样的软件开发项目。不同的开发者使用的工具不同&#xff0c;每一个项目所要求的技术也不同。 以下就列举了11个可以帮助Java开发者提升编程能力的网站&#xff0c;建议收藏哦~ 1Stack Overflow Stack Overflow是Java领域…

python之很好的网站

1、python官方开发者文档查询和python下载网站 2、 转载于:https://www.cnblogs.com/goodboy-heyang/p/5723443.html

IIS日志-网站运维的好帮手

阅读目录 开始IIS日志包含了哪些信息IIS日志的配置如何分析IIS日志推荐的IIS日志分析方法IIS日志中的异常记录再谈 scwin32status64寻找性能问题寻找可改进的目标程序架构对IIS日志分析过程的影响对于一个需要长期维护的网站来说&#xff0c;如何让网站长久稳定运行是件很有意义…

如何通过XAMPP来实现单个服务器上建多个网站

xampp 是一个非常方便的本地 apache php mysql 的调试环境&#xff0c;在本地安装测试 WordPress 等各种博客、论坛程序非常方便。今天我们来给大家介绍一下&#xff0c;如何使用 XAMPP 在本地进行安装多个网站。 一般情况下&#xff0c;我们只需要网站程序放到 xampp/htdoc …

网站压力测试工具

2019独角兽企业重金招聘Python工程师标准>>> webbench的使用 wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz tar -zxvf webbench-1.5.tar.gz cd webbench-1.5 make && make install 进行测试 webbench -c 200 -t 60 http://localho…

本地电脑搭建java网站,java web 环境搭建

1.背景最近开始学习Java web 开发&#xff0c;老师给的环境配置教程都需要把自己所有东西全部重新删掉然后安装&#xff0c;如果你懂还好&#xff0c;要是不懂&#xff0c;估计就是一个报错找一天。那么我接下来写下这篇教程&#xff0c;希望能帮到一部分需要的人。2.eclipse安…

如何一步一步用DDD设计一个电商网站(十三)—— 领域事件扩展

本系列所有文章 如何一步一步用DDD设计一个电商网站&#xff08;一&#xff09;—— 先理解核心概念 如何一步一步用DDD设计一个电商网站&#xff08;二&#xff09;—— 项目架构 如何一步一步用DDD设计一个电商网站&#xff08;三&#xff09;—— 初涉核心域 如何一步一步用…

安全分析的几个好的工具网站的使用

最近在工作中还是遇到了一些攻击者追查等等事情&#xff0c;结合自己过去做过一年的安全分析师的经验&#xff0c;对几款比较好的追踪溯源网站的使用做一个简介。 一、关联神器passivetotal 1、网址&#xff1a;https://community.riskiq.com/ 2、简介&#xff1a;常用来搜索IP…

java 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎 网站源码

java 企业网站源码 前后台都有 静态模版引擎&#xff0c; 代码生成器大大提高开发效率前台&#xff1a; 支持三套模版&#xff0c; 可以在后台切换官网 http://www.fhadmin.org/系统介绍&#xff1a;1.网站后台采用主流的 SSM 框架 jsp JSTL&#xff0c;网站后台采用freemaker静…

我用阿里云部署的个人网站并帮兄弟表白

我叫田程&#xff0c;是四川理工学院一名大二的学生&#xff0c;主修通信工程专业。因为个人的兴趣爱好&#xff0c;目前在用ECS云服务器部署网站和挂机。 我的初衷只是想做一个类似广告联盟的产品&#xff0c;后来发现对我来说兴趣是大于功利的&#xff0c;就放弃了盈利的想法…

SEO优化-robots.txt解读

一、什么是robots.txt robots.txt 文件由一条或多条规则组成。每条规则可禁止&#xff08;或允许&#xff09;特定抓取工具抓取相应网站中的指定文件路径。 通俗一点的说法就是&#xff1a;告诉爬虫&#xff0c;我这个网站&#xff0c;你哪些能看&#xff0c;哪些不能看的一个协…

net java开发网站性能_TechEmpower Web 框架性能第19轮测试结果正式发布,ASP.NET Core在主流框架中拔得头筹...

TechEmpower 第19轮编程语言框架性能排行榜2020年5月28日正式发布,详见官方博客&#xff1a;https://www.techempower.com/blog/2020/05/28/framework-benchmarks-round-19/&#xff0c;TechEmpower基准测试有许多场景(也称为测试类型)&#xff0c;此次评测多了一个综合评分选项…

网站域名空间服务器,网站 域名 空间 服务器

网站 域名 空间 服务器 内容精选换一换本节介绍使用华为云DDoS高防保障业务连续性&#xff0c;且网站域名解析至中国大陆节点服务器的备案场景。如图1所示。① 配置网站域名(www.example.com)&#xff0c;接入华为云DDoS高防&#xff0c;把域名解析指向高防IP。② 用户通过网站…

注册网站域名多少钱_新手如何注册域名—建立网站,从域名注册开始

注册域名的一般流程是什么&#xff1f;个人申请域名流程需要知道哪些&#xff1f;一、域名注册流程、方法&#xff1a;1.在网站上注册一个用户名。(http://www.11977.net/reg/ 点击注册 这里我们列举恒派互联)点击注册会员账号2. 登陆会员号。3. 查询你要注册的域名是否被人注册…

服务器建立down文件夹不能,学习笔记五、windows iis网站搭建和ftp服务器配置

安装IIS服务选中文件服务&#xff0c;顺便把ftp文件也装上直接下一步下一步安装完成网站虚拟目录个人理解就是目录建站建立虚拟目录映射对应的具体目录之后&#xff0c;访问采用域名虚拟目录别名/ip虚拟目录别名1、不同端口搭建网站2、不同域名搭建网站(相同ip相同端口&#xf…

网站的客户端和服务器地址,主站和从站与服务器客户端

主站和从站与服务器客户端 内容精选换一换华为云帮助中心&#xff0c;为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档&#xff0c;帮助您快速上手使用华为云服务。用户可以在公有云MRS集群以外的节点上使用客户端&#x…

云服务器上传php网站,php代码上传云服务器

php代码上传云服务器 内容精选换一换登录Windows弹性云服务器如图1所示。(可选)使用密钥文件解析密码。对于密钥方式鉴权的弹性云服务器&#xff0c;需先通过管理控制台提供的获取密码功能&#xff0c;将创建弹性云服务器时使用的密钥文件解析为密码。具体操作&#xff0c;请参…

看看来自日本的扫描,做网站需要注意的

2019独角兽企业重金招聘Python工程师标准>>> 今天研究网站日志发现的&#xff0c;一个来自日本IP的网站扫描&#xff0c;总结&#xff1a; 1. 尽量不要用常见的主流CMS&#xff0c;即便用&#xff0c;目录名也要改得面目全非&#xff0c;外加服务器限制直接访问 2. …

wordpress js 运行短代码_WordPress网站速度优化攻略

WordPress网站在内容逐渐增多时&#xff0c;会出现网站速度慢的问题。WordPress网站速度优化也成为了网站优化的重要事项之一。47%的用户只有两秒的耐心等待网站加载。不仅如此&#xff0c;网站还会受到搜索引擎对长时间加载的排名惩罚。为什么WordPress网站速度快不起来网站速…