香港云服务器 哪家

随着年龄越来越大，记忆力越来越差了，有时候看到一篇好的文章，哪怕你是点击了收藏，当需要这个技术点的时候，你是不是还得去回忆一下那篇收藏的文章放到什么地方，是那个论坛上面的?

今日就教大家如何建立自己的知识档案库！

不要服务器！

不要流量费！

只需要一个码云账户！

白嫖才是程序员的王道！

一切的收费都是耍流氓！

我们要把钱存着娶媳妇！

什么是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-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://github.com/pengziliu/GitHub-code-practice/tree/master/vuepress-demo

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

群英云服务器好么