随着年龄越来越大，记忆力越来越差了，有时候看到一篇好的文章，哪怕你是点击了收藏，当需要这个技术点的时候，你是不是还得去回忆一下那篇收藏的文章放到什么地方，是那个论坛上面的?
今日就教大家如何建立自己的知识档案库！
不要服务器！
不要流量费！
只需要一个码云账户！
白嫖才是程序员的王道！
一切的收费都是耍流氓！
我们要把钱存着娶媳妇！
什么是vuepress
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。
由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。
VuePress 是一款使用 Vue 驱动的静态网站生成器，是 Vue 的作者 Evan You 为了方便文档的编写而开发的。
默认主题与 Vue 官方文档一致简洁，少配置，高性能Markdown 专为技术文档提供拓展自带 PWA自定义主题，可定制程度完全由自己决定
vuepress生成的博客大概就是这样！
实战准备
1、 node.js
2、码云账户一个
实战开始
安装步骤
第一步 安装vuepress
命令: npm install -g vuepress
第二步 创建项目
1、命令: mkdir vuepress-demo2、命令: cd vuepress-demo
第三步 初始化项目
第四步 创建文件
创建各种配置文件以及文件夹
修改「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」 文件夹
进入「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**文件夹?
创建「blog」文件夹?
进入.vuepress?
创建「public」文件夹
>命令: mkdir public
>
>进入 public 放入2个 图片
>
>一张logo.jpg
>
>一张favicon.ico
创建「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」
进入document文件夹创建vuepress.md
?命令: echo > vuepress.md?
创建start.cmd
创建build.cmd
npm run build
第五步 启动
启动
第六步 vuepress总结
vuepress官网:https://www.vuepress.cn
docs/README.md 为项目首页，可以根据自己需求修改
docs/.vuepress/config.js 为项目的总配置文件
部署到码云
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. 访问
img
关注公众号：lmcjl_com（长按复制）
本文来自作者:小落落，不代表懒猪博客立场！
转载请注明：https://my.lmcjl.com/50430.html
本文链接：https://my.lmcjl.com/post/13897.html
4 评论