神奇不需要服务器吗？神奇不需要服务器

威哥 2023-03-02 21:37:36 503

神奇不需要服务器吗？神奇不需要服务器通过编写Markdown 来生成静态网页我们要把钱存着娶媳妇！只需要一个码云账户！白嫖才是程序员的王道！一切的收费都是耍流氓！

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

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

不要服务器！

不要流量费！

只需要一个码云账户！

白嫖才是程序员的王道！

一切的收费都是耍流氓！

我们要把钱存着娶媳妇！

神奇不需要服务器吗？神奇不需要服务器(1)

什么是vuepress

通过编写Markdown 来生成静态网页

VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。

VuePress 是一款使用 Vue 驱动的静态网站生成器，是 Vue 的作者 Evan You 为了方便文档的编写而开发的。

默认主题与 Vue 官方文档一致
简洁，少配置，高性能
Markdown 专为技术文档提供拓展
自带 PWA
自定义主题，可定制程度完全由自己决定

vuepress生成的博客大概就是这样！

神奇不需要服务器吗？神奇不需要服务器(2)

神奇不需要服务器吗？神奇不需要服务器(3)

实战准备

1、 node.js

Node.js 版本

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

2、码云账户一个

实战开始

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

安装步骤第一步安装vuepress

命令: npm install -g vuepress

神奇不需要服务器吗？神奇不需要服务器(4)

第二步创建项目

1、命令: mkdir vuepress-demo2、命令: cd vuepress-demo

神奇不需要服务器吗？神奇不需要服务器(5)

第三步初始化项目

初始化项目

命令: npm init -y

神奇不需要服务器吗？神奇不需要服务器(6)

第四步创建文件

神奇不需要服务器吗？神奇不需要服务器(7)

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

修改「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: true heroImage: /logo.png 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**文件夹❝

命令: mkdir .vuepress❞

创建「blog」文件夹❝

命令: mkdir blog❞

进入.vuepress❝

命令: cd .vuepress❞

创建「public」文件夹

>命令: mkdir public > >进入 public 放入2个图片 > >一张logo.png > >一张favicon.ico

神奇不需要服务器吗？神奇不需要服务器(8)

创建「config.js」

❝命令: 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」

❝命令: echo > README.md❞

内容:我的博客介绍

进入document文件夹创建vuepress.md

❝命令: echo > vuepress.md❞

# vuepress介绍阿斯达卡还是都很好看

创建start.cmd

npm run dev

创建build.cmd

npm run build