随著年纪愈来愈大，免疫力愈来愈差了，有时看见一则好的该文，即便你是点选了珍藏，当须要那个控制技术点的这时候，你呢还得去自述呵呵那篇珍藏的该文放在甚么地方性，是那个高峰论坛下面的?
本周一就教他们怎样创建他们的科学知识国家档案馆！
千万别伺服器！
千万别网络流量费！
只须要两个码云帐户！
白嫖才是开发人员的正道！
所有人的收费项目都是抢钱！
他们要把钱深藏闹洞房！
甚么是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
命令:npminstall -g vuepress
第二步 创建项目
1、命令: mkdir vuepress-demo2、命令:cdvuepress-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:trueheroImage:/logo.pngactionText:快速上手→actionLink:/blog/features:-title:简洁至上details:以Markdown为中心的项目结构，以最少的配置帮助你专注于写作。-title:Vue驱动力details:享受Vue+webpack的开发体验，在Markdown中使用Vue组件，同时能使用Vue来开发自定义主轴。-title:高操控性details:VuePress为每一页面预图形聚合动态的HTML，同时在页面被读取的这时候，将作为SPA运行。footer:MITLicensed|Copyright©2018-presentxxxxxx---创建**.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中的标签[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」文件夹
mkdirdocument创建「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.cmd
img
4. 上传到码云
5. 选中Gitee Pages
img
6. 填入动态HTML地址
img
7. 点选更新
img
8. 访问
❝
http://xxxxx/vuepress-demo
❞
img
项目demo地址
https://github.com/pengziliu/GitHub-code-practice/tree/master/vuepress-demo
原文链接：https://mp.weixin.qq.com/s/ljL_K8ktcCApEk8bTqXjuw
评论已关闭！