随著年纪愈来愈大,免疫力愈来愈差了,有时看见一则好的该文,即便你是点选了珍藏,当须要那个控制技术点的这时候,你呢还得去自述呵呵那篇珍藏的该文放在甚么地方性,是那个高峰论坛下面的?
本周一就教他们怎样创建他们的科学知识国家档案馆!
千万别伺服器!
千万别网络流量费!
只须要两个码云帐户!
白嫖才是开发人员的正道!
所有人的收费项目都是抢钱!
他们要把钱深藏闹洞房!

甚么是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
评论已关闭!