1.简介
官网 https://vuepress.vuejs.org/zh/
Vue 驱动的静态网站生成器
2.起步
1.安装
// 全局安装
yarn global add vuepress # 或者:npm install -g vuepress
// 本地依赖安装
yarn add -D vuepress # npm install -D vuepress
mkdir vuepress-starter && cd vuepress-starter
yarn init # npm init
2.创建你的第一篇文档
// 新建一个 markdown 文件
mkdir docs && echo '# Hello VuePress' > docs/README.md
在 package.json 中添加一些 scripts
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
在本地启动服务器
yarn docs:dev # npm run docs:dev
- 启动项目:
npm run docs:dev
这条命令相当于vuepress dev docs - 打包项目:
npm run build
这条命令相当于 vuepress build docs
3.配置
1.配置文件
如果没有任何配置,这个网站将会是非常局限的,用户也无法在你的网站上自由导航。为了更好地自定义你的网站,让我们首先在你的文档目录下创建一个 .vuepress 目录,所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样:
mkdir .vuepress
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
一个 VuePress 网站必要的配置文件是 .vuepress/config.js,它应该导出一个 JavaScript 对象:
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around'
}
mkdir public
vuepressBlogDemo
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ └── config.js
└── package.json
这个文件夹是用来放置静态资源的,打包出来之后会放在.vuepress/dist/的根目录。
2.基本配置
module.exports = {
title: '学之道',
description: '学无止境--业精于勤,荒于嬉;行成于思,毁于随',
// 注入到当前页面的 HTML <head> 中的标签
head: [
['link', { rel: 'icon', href: '/favicon.ico' }], // 增加一个自定义的 favicon(网页标签的图标)
],
base: '/', // 这是部署到github相关的配置
markdown: {
lineNumbers: true // 代码块显示行号
},
// themeConfig: {
// sidebarDepth: 2, // e'b将同时提取markdown中h2 和 h3 标题,显示在侧边栏上。
// lastUpdated: 'Last Updated' // 文档更新时间:每个文件git最后提交的时间
// },
themeConfig: {
lastUpdated: '上次更新', // string | boolean
nav:[
{ text: 'html', link: '/html/' }, // 内部链接 以docs为根目录
{ text: '博客', link: 'https://blog.csdn.net/sinat_29421531?spm=1008.2028.3001.5343/' }, // 外部链接
// 下拉列表
{
text: 'GitHub',
items: [
{ text: 'GitHub地址', link: 'https://github.com/fenglongtian' },
{
text: 'Gitee',
link: 'https://gitee.com/fenglongtian'
}
]
}
]
}
};
---
home: true
heroText: 学无止境
tagline: 业精于勤,荒于嬉;行成于思,毁于随
heroImage: /hero.gif
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 学习
details: 读书学习可以开拓视野,增长见识!既要保持学习,也要学会抬头看路。
- title: 技能
details: 一步一个脚印,脚踏实地,向前走...始于前端,不止于前端,努力成为一个优秀的工程师,学会总结与分享,做些有意义的事!
- title: 感悟
details: 人生短暂,学会感受生活,学会享受生活...
footer: MIT Licensed | Copyright © 2018-present 京ICP备16006076号-1
---
部署
GitHub Pages
-
在
docs/.vuepress/config.js
中设置正确的 base。如果你打算发布到https://<USERNAME>.github.io/
,则可以省略这一步,因为 base 默认即是 “/”。如果你打算发布到https://<USERNAME>.github.io/<REPO>/
(也就是说你的仓库在 https://github.com//),则将 base 设置为"/<REPO>/"
。 -
在你的项目中,创建一个如下的 deploy.sh 文件(请自行判断去掉高亮行的注释):
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
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:<USERNAME>/<REPO>.git master:gh-pages
cd -