VuePress静态博客生成器介绍

麦田4年前 (2019-10-02)工作笔记789

VuePress介绍


VuePress 由两部分组成:第一部分是一个极简静态网站生成器,它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。


每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。


它是如何工作的?


事实上,一个 VuePress 网站是一个由 Vue、Vue Router 和 webpack 驱动的单页应用。如果你以前使用过 Vue 的话,当你在开发一个自定义主题的时候,你会感受到非常熟悉的开发体验,你甚至可以使用 Vue DevTools 去调试你的自定义主题。


在构建时,我们会为应用创建一个服务端渲染(SSR)的版本,然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于 Nuxt 的 nuxt generate 命令,以及其他的一些项目,比如 Gatsby


VuePress对类似程序的评价:


Nuxt


VuePress 能做的事情,Nuxt 理论上确实能够胜任,但 Nuxt 是为构建应用程序而生的,而 VuePress 则专注在以内容为中心的静态网站上,同时提供了一些为技术文档定制的开箱即用的特性。


Docsify / Docute


这两个项目同样都是基于 Vue,然而它们都是完全的运行时驱动,因此对 SEO 不够友好。如果你并不关注 SEO,同时也不想安装大量依赖,它们仍然是非常好的选择!


Hexo


Hexo 一直驱动着 Vue 的文档 —— 事实上,在把我们的主站从 Hexo 迁移到 VuePress 之前,我们可能还有很长的路要走。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串,而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互,同时,Hexo 的 Markdown 渲染的配置也不是最灵活的。


GitBook


我们的子项目文档一直都在使用 GitBook。GitBook 最大的问题在于当文件很多时,每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性,并且,主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。

相关文章

Win10系统安装Hugo详细教程

Hugo是主流的静态网站生成器,也叫静态博客生成器。hugo是在本地运行的软件,在本地电脑按照规定格式写好文章,然后通过hugo可以一键生成一个优秀的网站!Hugo生成的网站是目前最新的自适应性网站,...

Hugo主题ivy的配置

Hugo主题ivy特别简洁,首页文章列表只有标题。主题文件也很简单,内容清晰,网站加载速度极快,这点比Hugo主题beautiful好很多!我在优化这个主题中遇到的问题如下:1、善用exampleSi...

Hugo主题rockrock的配置

rockrock主题很干净,我很喜欢,但是这些主题都需要配置和优化:1、Hugo实现猜你喜欢功能(相关文章,或者相关内容功能)使用dw打开模板文件:themes/主题rockrock/layouts/...

Hugo主题jane的配置

麦田的博客是用Hugo搭建,主题是jane。jane主题添加关于我们和友情链接页面,并添加到页面菜单:新建md文件到文件夹content,重命名为about,页面头部加入:---title: &quo...

Hugo主题hyde的配置

hyde主题是国外网友spf13的作品,大约六年前制作的,样式和界面竟然到现在还不落后,可惜我在编辑和优化过程中发现,这个主题有些文件丢失,导致功能缺失。经过半天的优化,还是有些小问题无法解决。现在是...

Win10系统安装Hexo教程

Hexo也是一款静态博客生成器,是基于node.js制作的博客工具,Hexo和Jekyll都属于热门的静态博客生成器。Hexo的安装和Hugo一样比较简单,两者都比Jekyll安装简单!Hexo的安装...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。