随着年龄越来越大，记忆力越来越差了，有时候看到一篇好的文章，哪怕你是点击了收藏，当需要这个技术点的时候，你是不是还得去回忆一下那篇收藏的文章放到什么地方，是那个论坛上面的?
今日就教大家如何建立自己的知识档案库！
不要服务器！
不要流量费！
只需要一个码云账户！
白嫖才是程序员的王道！
一切的收费都是耍流氓！
我们要把钱存着娶媳妇！
什么是vuepress
通过编写Markdown 来生成静态网页
扫描二维码关注公众号，回复： 11623269 查看本文章
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。
由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。
VuePress 是一款使用 Vue 驱动的静态网站生成器，是 Vue 的作者 Evan You 为了方便文档的编写而开发的。
- 默认主题与 Vue 官方文档一致
- 简洁，少配置，高性能
- Markdown 专为技术文档提供拓展
- 自带 PWA
- 自定义主题，可定制程度完全由自己决定
vuepress生成的博客大概就是这样！
实战准备
1、 node.js
Node.js 版本
请确保你的 Node.js 版本大于等于 8。
2、码云账户一个
实战开始
node.js 的安装本文不做介绍
安装步骤
第一步 安装vuepress
命令: npm install -g vuepress第二步 创建项目
1、命令: mkdir vuepress-demo2、命令: cd vuepress-demo第三步 初始化项目
初始化项目
命令: npm init -y
第四步 创建文件
创建各种配置文件以及文件夹
- 修改「package.json」
{
"name": "vuepress-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}, "keywords": [],
"author": "",
"license": "ISC"
}创建 「docs」 文件夹
mkdir docs
进入「docs」文件夹
cd docs
创建README.md文件
echo > README.md---
home: true
heroImage: /logo.png
actionText: 快速上手 →
actionLink: /blog/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present xxxxxx
---创建**.vuepress**文件夹❝
命令: mkdir .vuepress❞
创建「blog」文件夹❝
命令: mkdir blog❞
进入.vuepress❝
命令: cd .vuepress❞
创建「public」文件夹
>命令: mkdir public
> >进入 public 放入2个 图片
> >一张logo.png > >一张favicon.ico创建「config.js」
❝命令: config.js❞
module.exports = {
title: 'fc blog',
description: '我的个人网站',
head: [ // 注入到当前页面的 HTML <head> 中的标签
[
'link', {
rel: 'icon',
href: '/logo.jpg'
}
] // 增加一个自定义的 favicon(网页标签的图标)
],
base: '', // 这是部署到github相关的配置
markdown: {
lineNumbers: true // 代码块显示行号
},
themeConfig: {
sidebarDepth: 3,
nav: [ // 导航栏配置
{
text: '博客',
link: '/blog/'
}
],
sidebar: {
'/blog/': [{
title: '文档',
collapsable: false,
children: [
'document/vuepress',
]
}]
}
}
};
进入「blog」文件夹，创建「document」文件夹
mkdir document创建「README.md」
❝命令: echo > README.md❞
内容:我的博客介绍
进入document文件夹创建vuepress.md
❝命令: echo > vuepress.md❞
# vuepress介绍阿斯达卡还是都很好看
创建start.cmd
npm run dev
创建build.cmd
npm run build
一些命令截图
第五步 启动
启动
访问地址: http://localhost:8080/
第六步 vuepress总结
vuepress官网:https://www.vuepress.cn
docs/README.md 为项目首页，可以根据自己需求修改
docs/.vuepress/config.js 为项目的总配置文件
❝
'/blog/': [{ title: '文档', collapsable: false, children: [ 'document/vuepress', ] }]
文章的添加就在children 节点添加
例如:
children: [ 'document/vuepress', 'document/vue', ]
文件夹下面必须有vue.md
vuepress-demo/docs/blog/document/
❞
部署到码云
1. 创建仓库
2. 修改配置文件
>vuepress-demo\docs\.vuepress\config.js
> >base改为码云同项目名字
> >base: '/vuepress-demo/', // 这是部署到github相关的配置3. 编译vuepress-demo
运行build.cmdimg
4. 上传到码云
5. 选中Gitee Pages
img
6. 填入静态HTML地址
img
7. 点击更新
img
8. 访问
❝
http://xxxxx/vuepress-demo
❞
img