VuePress搭建永久文档/博客网站VuePress 使用
VuePress搭建永久文档/博客网站VuePress 使用
文档首页
详细文档
开发准备
只需要满足上述三个要求，任何人就都可以写出来一套属于自己的文档网站~
新建github代码仓库
新建github代码仓库
克隆代码到本地
克隆代码到本地
使用Github Pages
新建index文件
在当前文件下新建index.html
新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>hello github</h1>
</body>
</html>保存并提交代码至github，提交代码后等待1分钟
浏览器访问 http://自己的github用户名.github.io 看到hello github 到这一步 Github Page已经可以正常使用
如果不想用VuePress写文档，可以随便写点东西提交代码即可更新。
VuePress 使用
安装
# 全局安装VuePress
npm install -D vuepress本地新建文件夹>vuepress vuepress/新建docs文件夹 vuepress/新建package.json文件 vuepress/docs/新建README.md文件
创建文件
在docs/README.md中添加代码
# my first vuepress在package.json中添加代码
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}在vuepress中启动命令
npm run dev启动成功后打开看到以下页面说明vuepress已经初步配置成功
如果本地8080端口被占用请根据命令行中提示点端口进行访问
启动开发模式
文件配置
docs/文件下新建public/文件下新建img/文件下放入一张图片，用作首页显示图片
首页图片
修改首页显示文件 docs/README.md 官方配置手册
---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/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
---docs/文件下新建.vuepress文件夹/新建config.js文件
config配置文件
导航栏及侧边栏配置 .vuepress/config.js 官方配置手册
module.exports = {
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'External', link: 'https://google.com' },
],
sidebar: [
'/',
'/page-a',
['/page-b', 'Explicit link text']
]
}
}还可配置搜索框匹配、上/下一篇链接、自定义页面等，官方文档都写的非常清楚，可根据需要自行配置即可。
打包项目
全部配置完成后打包项目
npm run build 打包成功之后找到 docs/.vuepress/dist 文件夹下文件，全部拷贝到刚开始配置的 Github Page代码仓库中，提交代码，等待一分钟后访问 http://自己的github用户名.github.io
到此已经完成了所有配置，至于里面写什么，完全有你自己决定了。
最后说下为什么用这种方式写一些文章、笔记 我曾在自己的服务器上写博客，笔记网站，优点就是什么都可以自定义，并且想改什么就改什么。但是缺点太多了，自己部署服务器环境，装mysql，写后台，写数据库，再写前端...这下来搞得头皮发麻，成果还不尽理想，最关键的是服务器最便宜一年也好好几百。。万一那天养不起服务器了，之前写的东西就全白费了不是。 现在用github加vuepress，理论上来说，域名是永久可以访问的，这样一个在线文档或博客（根据你自己的配置喜好），并且vuepress也是基于vue的单页应用，访问速度及用户浏览反馈还是很棒的！