VuePress 静态网站生成

news/2024/4/28 23:32:09/文章来源:https://blog.csdn.net/weixin_33905756/article/details/88614594

使用技术:

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

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

相关文章

最近新上的电子商务网站

最近新上的电子商务网站&#xff0c;是一个B2C的&#xff0c;做这个站花费20天的时间&#xff0c;感觉很辛苦&#xff0c;但然我好好的了解烘培行业&#xff0c;烘培行业电子商务的企业21 Cake,好利来。 这样的网站在跟踪需求后&#xff0c;需要实现几个关键点&#xff0c;1用户…

我的建站经历(一)

转载自我的博客:https://blog.ljyngup.com 我的建站经历(一) 我建站时的状况为&#xff1a; 1.学生党 2.未满十八岁 3.预算不高(大约200左右) 4.不想花太多精力在建站上&#xff0c;想快速建站开始写博客。 5.不以盈利为目的(以后发展好了另说) 6.想拥有一个属于自己的…

长春网站建设×××,网站制作的步骤

当今互联网时代&#xff0c;人们大多从网络获取信息。为了迎合时代步伐&#xff0c;多数企业选择建立自己的网站&#xff0c;以此来提高企业知名度&#xff0c;扩大企业影响范围。如下就是网站制作的一些基本步骤&#xff0c;供大家了解:一、域名的选择根据所要建站的性质和内容…

干货!手把手教你打造自己的seo生态资源,让排名不在是梦想

又到了分享经验的时刻&#xff0c;每到这时候&#xff0c;高粱seo心里总是美滋滋的&#xff0c;因为分享是一种快乐&#xff0c;更是一种收获&#xff0c;能够与人分享&#xff0c;本身就是一种成功。在上一篇文章当中&#xff0c;高粱seo用两个实战案例&#xff0c;证明了目前…

大型网站技术架构(三)架构核心要素

2019独角兽企业重金招聘Python工程师标准>>> 所谓架构&#xff0c;一种通俗的说法就是“最高层次的规划&#xff0c;难以改变的决定”&#xff0c;这些规划和决定奠定了事物未来发展的方向和最终的蓝图。 而软件架构即“有关软件整体结构与组件的抽象描述&#xff0…

hadoop(datanode)宕机的原因和解决办法?_网站流量异常的10大原因

站点在日常运转的过程中&#xff0c;可能会遇到流量出现异常的现象&#xff0c;我们这里所说的异常是指流量下降达到一个较大的比率&#xff0c;且是如几天以上持续性的。作为一个SEOer&#xff0c;应该学会如何从各个维度去分析与查找到流量波动的原因&#xff0c;这里不仅限于…

公众号网页授权php,微信公众号里的PHP网站进行网页授权

要进行网页授权,肯定要和微信合作,首先,要有一个自己的公众号,而且必须要经过认证的公众号.(如果没有,可以去申请测试号)订阅号和服务号以及测试号:订阅号专注的是推送消息,所以一些高级接口会没有.服务号专注的是用户交互,所以接口会比订阅号多一点,相对的,推送消息的数量就会…

mouseenter 与mouseover 区别

mouseenter 与mouseover 区别 mouseenter与mouseover有什么不同&#xff0c;也许可以从两方面去讲。看他们是是否支持冒泡或者是否为事件的触发时机&#xff1b; 只有当鼠标指针在对象的边界之外&#xff0c;用户把鼠标移动到对象的边界内时&#xff0c;事件mouseenter才触发。…

Nginx 开启 Gzip压缩提升网站速度

多说无益 &#xff0c;直接上配置 vim nginx.conf 参数 gzip配置的常用参数 gzip on|off; #是否开启gzip gzip_buffers 32 4K| 16 8K #缓冲(压缩在内存中缓冲几块? 每块多大?) gzip_comp_level [1-9] #推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源) gzip_disab…

Bootstrap响应式网站开发实战 # 第二章习题答案

1.用Bootstrap实现一个隔行变色的表格 <!DOCTYPE html> <html> <head><title>Bootstrap Practice</title><link rel

Bootstrap响应式网站开发实战 # 第三章习题答案

一、选择题 AAA 二、操作题 1.实现如图所示的效果(四列网格布局) <!DOCTYPE html> <html> <head><title>Bootstrap Practice</title

Bootstrap响应式网站开发实战 # 第四章习题答案

一、选择题 1.A 2.B 3.A 二、操作题 1.实现如图所示的效果 <!DOCTYPE html> <html lang="zh-CN"> <head>

Bootstrap响应式网站开发实战 # 第五章习题答案

一、选择题 1.A 2.A 3.A 4.A 5.B 6.B 7.B 二、操作题 请用多媒体对象实现如图所示效果图 <!DOCTYPE html> <html lang="zh-CN"> <head>

Bootstrap响应式网站开发实战 # 第七章习题答案

1.实现如图所示效果 (网页里实现幻灯片切换效果 / 轮播) <!DOCTYPE html> <html lang="zh-CN"> <head><meta

Bootstrap响应式网站开发实战 # 第八章习题答案

如图所示 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset

修改网站自动关闭时间timeout_优雅关闭线程池的方案

我们经常在项目中使用的线程池&#xff0c;但是是否关心过线程池的关闭呢&#xff0c;可能很多时候直接再项目中直接创建线程池让它一直运行当任务执行结束不在需要了也不去关闭&#xff0c;这其实是存在非常大的风险的&#xff0c;大量的线程常驻在后台对系统资源的占用是巨大…

在这里输入你要搜索的内容怎么不显示_网站收录释疑,当遇到收录问题,我们该怎么处理...

做SEO的童鞋们都清楚&#xff0c;网站收录是一个网站能够获得排名的基础&#xff0c;网站内容被搜索引擎收录&#xff0c;它才有可能在这个搜索引擎里获得排名&#xff0c;这是先决条件。网站收录是什么&#xff1f;打个比方&#xff0c;一个高中生要在全国高考获得名次&#x…

爬虫得到的页面和实际页面有出入_蜘蛛爬虫抓取网站页面的策略

如今&#xff0c;每天都有很多SEO人员在在更新着网站的页面&#xff0c;如果搜索引擎中蜘蛛爬虫没有选择性的抓取页面&#xff0c;那将会是一个庞大的工作量。根据以上情况可以了解到&#xff0c;蜘蛛爬虫在进行抓取的时候&#xff0c;是有一定的策略的&#xff0c;是有选择性的…

Vue预渲染prerender-spa-plugin的使用,改善少数营销页面的 SEO

1. 安装&#xff1a; cnpm i prerender-spa-plugin -D 2. 配置&#xff1a; webpack.prod.conf.js&#xff1a; const PrerenderSPAPlugin require(prerender-spa-plugin) const Renderer PrerenderSPAPlugin.PuppeteerRenderer ... plugins: [ ...// 预渲染new Prerende…

打不开网站 服务器程序错误怎么办啊,“网站打不开”怎么办?快速排查思路及解决方案...

一、域名解析不生效原因分析&#xff1a;域名解析并非添加后就会立即生效&#xff0c;解析不生效就会让域名找不到服务器&#xff0c;这样就会造成网站打不开。解析长时间无法生效或不对&#xff0c;需要联系域名提供商或者dns提供商协助排查。目前解析不生效有以下原因&#x…