VuePress 静态网站生成

2019-02-14 admin

使用技术:

仓库地址: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' > 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 -

原文链接:https://segmentfault.com/a/1190000018139086

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53691.html

文章标题:VuePress 静态网站生成

相关文章
javascript转换静态图片,增加粒子动画效果
使用getImageData接口获取图片的像素点,然后基于像素点实现动画效果,封装成一个简单的lib &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;pa...
2017-03-24
javascript实现动态导入js与css等静态资源文件的方法
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下: &#x2F;** * 动态导入静态资源文件js&#x2F;css *&#x2F; var $import = fu...
2017-03-27
JS实现生成会变大变小的圆环实例
本文实例讲述了JS实现生成会变大变小的圆环。分享给大家供大家参考。具体如下: 这里使用javascript生成圆环,会变大变小,对于研究如何利用JavaScript生成动画效果,这是个很好的范例。 运行效果如下图所示: 具体代码如下: &...
2017-03-29
JavaScript实现鼠标滑过处生成气泡的方法
本文实例讲述了JavaScript实现鼠标滑过处生成气泡的方法。分享给大家供大家参考。具体实现方法如下: &lt;HTML&gt; &lt;HEAD&gt; &lt;title&gt;鼠标周围在网页上生成气泡&lt;&#x2F;title&...
2017-03-23
4种方法帮你的网站创建更丰富的Web体验
现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的Web体验。 对于那些还在用IE6的朋友,我只想说一句:go...
2015-12-22
js实现的四级左侧网站分类菜单实例
本文实例讲述了js实现的四级左侧网站分类菜单。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Tra...
2017-03-23
js实现适用于素材网站的黑色多级菜单导航条效果
本文实例讲述了js实现适用于素材网站的黑色多级菜单导航条效果。分享给大家供大家参考。具体如下: 这是一款适用于素材网站的黑色多级菜单导航条,无需jQuery,采用CSS+javaScript来实现,整体效果非常棒,用来学习CSS也是很不错的...
2017-03-29
JavaScript生成福利彩票双色球号码
如下所示: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt...
2017-03-23
JavaScript实现网站访问次数统计代码
作为一个网站的管理员或者说站长,都希望知道到底有多少人访问了网站,这个时候就需要有一个统计功能来满足需要,当然功能比较单一和简单,如果想要强大的统计效果,那最好还是使用现在比较成熟的统计工具,比如站长统计或者腾讯统计等等。 代码一: 代码如...
2017-03-29
JavaScript随机生成信用卡卡号的方法
本文实例讲述了JavaScript随机生成信用卡卡号的方法。分享给大家供大家参考。具体分析如下: 这段JS代码根据信用卡卡号产生规则随机生成信用卡卡号,是可以通过验证的,仅供学习参考,请不要用于非法用途,否则后果自负。 var visaPr...
2017-03-22
回到顶部