VuePress 静态网站生成方法步骤


Posted in Javascript onFebruary 14, 2019

使用技术:

VuePress - Vue 驱动的静态网站生成器

仓库地址:https://github.com/yinian-R/vuepress-demo

全局安装

## 安装
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' > CNAME

git 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-pages

cd -

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 element属性控制
Jul 23 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
extract-text-webpack-plugin用法详解
Feb 14 #Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 #Javascript
快速了解Node中的Stream流是什么
Feb 13 #Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 #Javascript
vue实现点击隐藏与显示实例分享
Feb 13 #Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 #Javascript
JavaScript实现的拼图算法分析
Feb 13 #Javascript
You might like
php5.5中类级别的常量使用介绍
2013/10/02 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
node.js实现快速截图
2016/08/27 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
js实现点击烟花特效
2020/10/14 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python多层装饰器用法实例分析
2018/02/09 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Python try except else使用详解
2021/01/12 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
经典促销广告词大全
2014/03/19 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
事业单位鉴定材料
2014/05/25 职场文书
旷课检讨书范文
2014/10/30 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
教师师德表现自我评价
2015/03/05 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
redis实现的四种常见限流策略
2021/06/18 Redis
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL