随著年纪愈来愈大,免疫力愈来愈差了,有时看见一则好的该文,即便你是点选了珍藏,当须要那个控制技术点的这时候,你呢还得去自述呵呵那篇珍藏的该文放在甚么地方性,是那个高峰论坛下面的?

本周一就教他们怎样创建他们的科学知识国家档案馆!

千万别伺服器!

千万别网络流量费!

只须要两个码云帐户!

白嫖才是开发人员的正道!

所有人的收费项目都是抢钱!

他们要把钱深藏闹洞房!

免费博客空间(博客QQ空间)-第1张

甚么是vuepress

透过撰写Markdown 来聚合动态页面

VuePress 由两部份共同组成:两个以 Vue 驱动力的主轴控制系统的简洁动态中文网站聚合辅助工具,和两个为撰写控制技术文件格式而强化的预设主轴。它是为的是全力支持 Vue 农健的文件格式市场需求而创建的。

由 VuePress 聚合的每一页面,都具备适当的预图形动态 HTML,它能提供更多出众的读取操控性,因此对 SEO 亲善。不过,页面读取后,Vue 就会将那些动态文本,接手为完备的单页面插件(SPA)。当使用者在下载公交站点时,能按需读取其它页面。

VuePress 是一款使用 Vue 驱动力的动态中文网站聚合器,是 Vue 的作者 Evan You 为的是方便文件格式的撰写而开发的。

  • 预设主轴与 Vue 官方文件格式一致
  • 简洁,少配置,高操控性
  • Markdown 专为控制技术文件格式提供更多拓展
  • 自带 PWA
  • 自定义主轴,可定制程度完全由他们决定

vuepress聚合的网志大概就是这样!

免费博客空间(博客QQ空间)-第2张
免费博客空间(博客QQ空间)-第3张

实战准备

1、 node.js

Node.js 版本

请确保你的 Node.js 版本大于等于 8。

2、码云帐户两个

实战开始

node.js 的安装本文不做介绍

安装步骤

第一步 安装vuepress

命令:npminstall -g vuepress
免费博客空间(博客QQ空间)-第4张

第二步 创建项目

1、命令: mkdir vuepress-demo2、命令:cdvuepress-demo
免费博客空间(博客QQ空间)-第5张

第三步 初始化项目

初始化项目

命令: npm init -y

免费博客空间(博客QQ空间)-第6张

第四步 创建文件

免费博客空间(博客QQ空间)-第7张

创建各种配置文件以及文件夹

  1. 修改「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
免费博客空间(博客QQ空间)-第8张

创建「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

一些命令截图

免费博客空间(博客QQ空间)-第9张

第五步 启动

启动

访问地址: http://localhost:8080/

免费博客空间(博客QQ空间)-第10张
免费博客空间(博客QQ空间)-第11张
免费博客空间(博客QQ空间)-第12张

第六步 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. 创建仓库

免费博客空间(博客QQ空间)-第13张

2. 修改配置文件

>vuepress-demo\docs\.vuepress\config.js>>base改为码云同项目名字>>base:/vuepress-demo/, // 这是部署到github相关的配置

3. 编译vuepress-demo

运行build.cmd
免费博客空间(博客QQ空间)-第14张

img

4. 上传到码云

免费博客空间(博客QQ空间)-第15张

5. 选中Gitee Pages

免费博客空间(博客QQ空间)-第16张

img

6. 填入动态HTML地址

免费博客空间(博客QQ空间)-第17张

img

7. 点选更新

免费博客空间(博客QQ空间)-第18张

img

8. 访问

http://xxxxx/vuepress-demo

免费博客空间(博客QQ空间)-第19张

img

免费博客空间(博客QQ空间)-第20张

项目demo地址

https://github.com/pengziliu/GitHub-code-practice/tree/master/vuepress-demo

原文链接:https://mp.weixin.qq.com/s/ljL_K8ktcCApEk8bTqXjuw