VuePress 静态网站生成

news/2024/4/27 12:27:47/文章来源:https://blog.csdn.net/weixin_34032779/article/details/88614597

使用技术:

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

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

相关文章

最近花了几个夜晚帮师妹整了一个企业网站

2019独角兽企业重金招聘Python工程师标准>>> 背景&#xff1a; 话说年前有个师妹泪眼汪汪&#xff0c;楚楚动情地找我帮她弄个企业网站。 不过那时候&#xff0c;每天都苦B地闪着&#xff1a;“加班中&#xff0c;相信不用多久升职加薪,当上总经理,出任CEO,迎娶白富…

js+css完成的网站流行效果

预览预览2http://bbs.blueidea.com/thread-2814227-1-3.html 转载于:https://www.cnblogs.com/CB/archive/2008/07/01/1232873.html

众网站BETA LOGO

GOOGLE 转载于:https://www.cnblogs.com/kaixin110/archive/2009/02/11/1388301.html

使用squid代理后某些网站无法访问的解决办法

在测试Squid代理服务器&#xff0c;发现有些网站无法访问&#xff0c;但是绝大部分网站都是可以访问的。&#xff08;当前环境&#xff1a;squid-2.6.STABLE21-6版本&#xff09;这个问题就出现在我的博客上&#xff0c;访问http://www.liusuping.com&#xff0c;使用squid代理…

JiaThis™ - 提升网站流量的工具 收藏一下

http://www.jiathis.com/help/html/what-is-jiathis 网站分享的工具 JiaThis是一个提供网页地址收藏、分享及发送的WEB2.0按钮工具&#xff0c;网站的浏览者可以方便的分享到人人网、分享到开心网、分享到QQ空间、分享到新浪微博等一系列社会化关系网络站点。 网站主可以在这…

从该网站集配置的声明提供程序中出现错误

使用Sharepoint Designer2010创建外部内容类型- SQL Server 具体步骤参考 http://www.cnblogs.com/Sunmoonfire/archive/2010/06/20/1761224.html 至网站点击该列表出现"访问已被业务数据连接拒绝"的错误. 这时到管理中心-应用程序管理-管理服务应用程序 点击BDC服务…

2月第二周域名主机网站排名TOP15 中国数据升至13名

据国际统计机构Alexa最新统计数据&#xff0c;在2月6日至12日一周时间内&#xff0c;用户覆盖数排名TOP15的国内域名主机网站依次为&#xff1a;中国万网、西部数码、易名中国、新网、金名网、35互联、爱名网、主机屋、新网互联、商务中国、中资源、网域科技、中国数据、阳光互…

网站群2

引用&#xff1a;http://wzq.xa24h.com/portal.php?modview&aid2604 项目背景 上海计量测试技术研究院(SIMT)是由政府部门依法设置的法定计量检定机构&#xff0c;也是国务院计量行政管理部门批准建立的“华东国家计量测试中心”和国家科技部批准设立的国家级分析测试中心…

经典网页设计:精美的个人作品集网站设计欣赏【下篇】

作为一个网页设计师&#xff0c;需要经常去关注优秀的网站作品&#xff0c;获取创作灵感&#xff0c;掌握最新的设计趋势。在这个竞争激烈的就业市场&#xff0c;个人作品集网站是最好的求职工具。因此&#xff0c;设计师们都竭尽所能设计一个有创造性的个人作品展示网站&#…

利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能

2019独角兽企业重金招聘Python工程师标准>>> 介绍之前做两个声明&#xff1a; 1、以下代码可以直接运行&#xff0c;当然你别忘了引用jQuery才行&#xff0c;我可提醒了&#xff0c;别到时候跑不起来骂我就成&#xff1b; 2、下面的实现思想参照了网上的一些文章&…

网站基本概念

文章目录网站基本概念网站服务器IP域名DNS端口静态网站动态网站网站基本概念 网站 网站(Website)&#xff0c;是指在互联网上&#xff0c;根据一定的规则&#xff0c;使用HTML、PHP等代码语言制作的用于展示特定内容的相关网页的集合&#xff0c;有可供管理人员操作的后台及用…

php禁止和允许制定ip 访问网站

2019独角兽企业重金招聘Python工程师标准>>> 有的时候网站在未完成未正式上线的情况下&#xff0c;为了使网站在有很多问题的情况下&#xff0c;可以先临时屏蔽ip来达到禁止除自己之外的人来访问。 <?php if(getenv(HTTP_CLIENT_IP) && strcasecmp(gete…

零基础建站教程(html+js+php+mysql+ftp+apache)

序言&#xff1a;因为公司需求&#xff0c;我不得不去学习建站&#xff0c;以前都是做后台的&#xff0c;没有接触这些东西&#xff0c;所以也是从0开始研究的&#xff0c;大概半个月时间&#xff0c;学了三门语言加一些工具捣鼓出了一个小站&#xff0c;在此分享&#xff0c;也…

大规模网站架构的缓存机制和几何分形学

缓存机制和几何分形学 缓存机制在我们的实际研发工作中&#xff0c;被极其广泛地应用&#xff0c;通过这些缓存机制来提升系统交互的效率。简单的总结来说&#xff0c;就是在两个环节或者系统之间&#xff0c;会引入一个cache/buffer做为提升整体效率的角色。 而有趣的是&…

【大型网站技术实践】初级篇:借助Nginx搭建反向代理服务器

一、反向代理&#xff1a;Web服务器的“经纪人” 1.1 反向代理初印象 反向代理&#xff08;Reverse Proxy&#xff09;方式是指以代理服务器来接受internet上的连接请求&#xff0c;然后将请求转发给内部网络上的服务器&#xff0c;并将从服务器上得到的结果返回给internet上请…

C#Web从0到1—在自己的服务器上发布第一个网站

一、购买一个服务器&#xff1a; 选择&#xff1a;阿里云&#xff0c;腾讯云之类的&#xff0c;反正都有免费体验&#xff0c;照着注册指导一步一步来就可以了。这里选了啊里云&#xff0c;送6个月呢。 二、发布网站 https://blog.csdn.net/Mr_Lyoko/article/details/80153389…

Visual Studio 2017 下创建ASP.NET网站程序详细步骤

1、文件——新建——项目 2.、新弹出的窗口上选择Visual C#&#xff0c;然后选择ASP.NET Web 应用程序&#xff08;.NET Framework&#xff09;,然后点击确定 3、选择空——然后在下面勾选Web窗体&#xff0c;然后点击确定 4、右边的解决方案资源管理器&#xff0c;选择解决方案…

【Asp.net入门04】第一个ASP.NET 应用程序-如何添加Web窗体到网站中

添加Web窗体 本部分内容&#xff1a; 什么是web form怎样添加web form 1.添加Web窗体到项目中 Web 窗体是一项 ASP.NET 功能&#xff0c;您可以使用它为 Web 应用程序创建用户界面。Web 窗体页为您提供了一种强大而直接的编程模型&#xff0c;该模型使用您熟悉的快速应用程序…

iOS之学习资源收集--很好的IOS技术学习网站

点击图片也能打开相关的网站&#xff1a; https://boxueio.com/skill/swift http://ios.b2mp.cn/ http://gold.xitu.io/welcome/?utm_sourcecnblogs&utm_mediumbanner&utm_contentgaoshou&utm_campaignq3_website http://sspai.com/tag/iOS http://www.open-open.…

阿里云windows版本云服务发布asp.net网站,外网无法访问的问题

弄完以后&#xff0c;以为921是之间建的&#xff0c;可以内网访问。外网不能访问。当时搜索的姿势不对&#xff08;关键词&#xff09;&#xff0c;便去交流群请教了一下。得到重要的信息&#xff0c;才有思路了 开始设置全部分配端口 921是之前就建好的了&#xff0c;ip地址为…