随着年龄越来越大，记忆力越来越差了，有时候看到一篇好的文章，哪怕你是点击了收藏，当需要这个技术点的时候，你是不是还得去回忆一下那篇收藏的文章放到什么地方，是那个论坛上面的?
今日就教大家如何建立自己的知识档案库！
不要服务器！
不要流量费！
只需要一个码云账户！
白嫖才是程序员的王道！
一切的收费都是耍流氓！
我们要把钱存着娶媳妇！
什么是vuepress
通过编写Markdown 来生成静态网页
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.jpg
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.jpg
>
>一张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-demodocs.vuepressconfig.js
>
>base改为码云同项目名字
>
>base: ‘/vuepress-demo/’, // 这是部署到github相关的配置
3. 编译vuepress-demo
运行build.cmd
img
4. 上传到码云
5. 选中Gitee Pages
img
6. 填入静态HTML地址
img
7. 点击更新
img
8. 访问
?
http://xxxxx/vuepress-demo
?
img
项目demo地址
原文链接：https://mp.weixin.qq.com/s/ljL_K8ktcCApEk8bTqXjuw
本文来自投稿，不代表展天博客立场，如若转载，请注明出处：https://www.me900.com/50430.html
