VuePress 静态网站生成

news/2024/4/27 16:08:13/文章来源:https://blog.csdn.net/weixin_33951761/article/details/88614591

使用技术:

  • 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_746841.aspx

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

相关文章

网站导航(TreeView 控件)

TreeView 是让人印象最深刻的导航控件之一&#xff0c;不仅因为它允许呈现富树视图&#xff0c;还因为它支持按需填入树的部分&#xff08;不需要刷新整个页面&#xff09;。但最重要的是&#xff0c;它支持很多样式来改变它的外观。 通过几个基本的属性&#xff0c;可以把 Tre…

ASP.NET MVC 学习网站

转载于:https://www.cnblogs.com/nlsoft/archive/2013/03/24/2978563.html

大流量网站性能优化:一步一步打造一个适合自己的BigRender插件(转)

BigRender 当一个网站越来越庞大&#xff0c;加载速度越来越慢的时候&#xff0c;开发者们不得不对其进行优化&#xff0c;谁愿意访问一个需要等待 10 秒&#xff0c;20 秒才能出现的网页呢&#xff1f; 常见的也是相对简单易行的一个优化方案是 图片的延迟加载。一个庞大的页面…

运行Silverlight3 的网站弹出 IE 安全确认框

问题贴&#xff1a;http://social.microsoft.com/Forums/zh-CN/partnercndevsilverlight/thread/b2a133a3-05ab-4698-ba91-2db6a5e1d736 Q: 程序用Silverlight3写的!但是客户端安装了 Silverlight4, 有时候会弹出下面确认框. 如果在安装Silverlight3的客户端访问则不会出现上面…

Python的scrapy之爬取boss直聘网站

在我们的项目中&#xff0c;单单分析一个51job网站的工作职位可能爬取结果不太理想&#xff0c;所以我又爬取了boss直聘网的工作&#xff0c;不过boss直聘的网站一次只能展示300个职位&#xff0c;所以我们一次也只能爬取300个职位。 jobbossspider.py: # -*- coding: utf-8 -*…

ASP.NET网站部署问题集

这几天为了给客户演示我们的项目&#xff0c;发现原来程度在开发环境和部署环境中还不太一样&#xff0c;原本在开发环境中程度运行的好好的&#xff0c;而部署后装在服务器则可能产生不少的错误。因此记录下所遇到的问题&#xff0c;方便以后查询同时也希望能帮遇到相关问题的…

多屏设备网站设计

2019独角兽企业重金招聘Python工程师标准>>> 解决方案&#xff1a; 不同域名 为不同设备屏幕编写代码 相同域名 判断设备类型选择不同的视图 自适应网页设计 转载于:https://my.oschina.net/u/190049/blog/173248

一个在线学习正则表达式的网站

今天发现了一个不错的网站regexr.com&#xff0c;可以在线学习正则表达式。 如图&#xff0c;网站左边包含了常用的正则表达式&#xff0c;我们可以随时参考&#xff0c;右边是一些示例文字&#xff0c;英文段落、电话号码、网址、电子邮箱地址等都有。网站上面可以输入正则表达…

瞬时响应:网站的高性能架构

原文地址&#xff1a;http://blog.csdn.net/taochangchang/article/details/14105327 什么叫高性能的网站&#xff1f; CDN全称Content Delivery Network&#xff0c;即内容分发网络。腾讯提供的CDN服务与一般意义上的CDN服务是一样的&#xff0c;旨在将网站的静态内容发布到最…

云瓣影音网站微信端(已开源)

随着该项目的发布到线上(小打小闹)&#xff0c;即将又要开启另一段崭新的旅程。强迫自己停下来写写所学所得&#xff0c;个人认为总结和分享是一种很棒的学习方式。那让我们先来瞧瞧项目长的什么样。如果着急要源码的朋友&#xff0c;可以下拉到最后~~ 微信端部分展现 从微信端…

jitter 如何优化网络_网络推广如何做好网站SEO优化

网络推广做好网站整站SEO优化的方式有很多&#xff0c;如何才能做好SEO优化&#xff1f;一、定位网站关键词SEO给一个网站刚开始做优化的时候&#xff0c;不是立马就设置关键词&#xff0c;而是先分析该网站主要是做什么产品/服务。知道网站的目的是做什么&#xff0c;是卖产品…

如何把自己的网站部署在网上_新手如何自己建网站?

在当前&#xff0c;生活上很多事情已经和互联网息息相关了&#xff0c;每个我们都会网上浏览各种网站&#xff0c;新闻网站看新闻&#xff0c;购物网站在线购买&#xff0c;视频网站可以看视频&#xff0c;各种类型的网站基本都会有&#xff0c;企业建网站为了宣传和提供服务&a…

移动建站平台

搜狐快站是一个很不错的移动建站平台&#xff0c;而且很多功能现在都免费了。这个消息&#xff0c;对于我们这些草根创业者来说&#xff0c;无疑是天上掉了一个大馅饼砸到了我们的头上。既然馅饼掉到了俺们的头上了&#xff0c;咱们就吃了吧。对于搜狐快站&#xff0c;我就不和…

网站刷关键词_百度关键词指数怎样刷,怎么样刷关键词的权重?重庆百度快照排名...

我们在做网站优化的时候&#xff0c;通常会去看关键词的百度指数&#xff0c;选择那些有指数的关键词来重点优化。虽然原则上百度指数是自然形成的&#xff0c;但是我们通过某些方式&#xff0c;也能够有效的刷百度指数。本文重点给大家介绍下百度关键词指数怎样刷&#xff0c;…

unbantu下安装mysql_「ubuntu安装mysql」五:在Ubuntu 16.04下安装MySQL - seo实验室

ubuntu安装mysql1&#xff0c;首先执行下面三条命令&#xff1a;执行第一条命令&#xff1a;sudo apt-get install mysql-server如下图&#xff1a;输入 y &#xff0c;下载安装时会出现要求设置密码的界面&#xff1a;输入自己想设置的密码&#xff0c;之后再次输入确认密码。…

关注经典:CSS Awards 获奖网站作品赏析《第一季》

每天都有很多新的网站推出&#xff0c;其中不乏一些设计极其优秀的作品。这个系列的文章&#xff0c;我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平&#xff0c;相信你可以得到很大的启发。 您可能感兴趣的相关文章…

ios图片放大之后如何不模糊_几个图片处理的网站

图片来源 &#xff1a;http://pexels.com在制作PPT时候我们会常常遇到以下的问题&#xff1a;问题1&#xff1a;有了一张原图&#xff0c;想找一张像素更高的图片&#xff1b;问题2&#xff1a;使用的图片像素太低、尺寸太小、模糊等&#xff1b;问题3&#xff1a;使用的图片太…

node mysql 搭建博客_用Node ejs模板 和Mysql搭建一个 个人博客网站基础

koa2-blog本项目是采用koa2框架制作的开源blog系统如果对您有帮助&#xff0c;您可以点右上角 "Star" 支持一下 谢谢&#xff01; ^_^如果你觉得对你有帮助&#xff0c;可以点击folk&#xff0c;或者follow一下&#xff0c;我会不定时跟新一些有趣的东西.~~~ 0.0koa2…

微软推出一个非常有趣的网站—— How-old.net 看照片猜年龄!

周末休闲一下啊&#xff01;&#xff01;微软推出一个非常有趣的网站—— How-old.net 看照片猜年龄&#xff01;这是由微软机器学习团队的工程师们开发的一个“年龄测试”的新玩意&#xff0c;通过图像脸部识别和大数据分析&#xff0c;可以快速识别出照片中的人的性别和年龄&…

电子商务网站-数据库设计

转载 陈小龙哈 2015-07-22 13:58:39 评论(0) 496人阅读 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104…