blog-engine-08-vuepress 以 Markdown 为中心的静态网站生成器

简介: 对比多个博客引擎如 Jekyll, Hugo, Hexo, Pelican, Gatsby, VuePress 和 Nuxt.js,文章提供了安装和入门指南。VuePress 是专为 Vue.js 爱好者设计的静态网站生成器,强调 Vue 集成、Markdown 编写、美观默认主题及插件系统。安装涉及 Node.js,通过全局安装 VuePress,然后创建、预览、构建和部署静态文件。适合技术文档和简单博客,但对非 Vue.js 用户有一定学习曲线。

拓展阅读

blog-engine-01-常见博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 对比

blog-engine-02-通过博客引擎 jekyll 构建 github pages 博客实战笔记

blog-engine-02-博客引擎jekyll-jekyll 博客引擎介绍

blog-engine-02-博客引擎jekyll-jekyll 如何在 windows 环境安装,官方文档

blog-engine-02-博客引擎jekyll-jekyll SEO

blog-engine-04-博客引擎 hugo intro 入门介绍+安装笔记

blog-engine-06-pelican 静态网站生成 windows 安装实战

blog-engine-07-gatsby 建极速网站和应用程序 基于React的最佳框架,具备性能、可扩展性和安全性

blog-engine-08-vuepress 以 Markdown 为中心的静态网站生成器

blog-engine-09-nuxt 构建快速、SEO友好和可扩展的Web应用程序变得轻松

blog-engine-10-middleman 静态站点生成器,利用了现代 Web 开发中的所有快捷方式和工具

前言

由于个人一直喜欢使用 markdown 来写 个人博客,最近就整理了一下有哪些博客引擎。

感兴趣的小伙伴也可以选择自己合适的。

VuePress 是什么?

VuePress 可以被看作是一个为 Vue.js 爱好者量身定做的博客引擎和文档生成器。

VuePress 的特点

  1. 为 Vue.js 定制
    VuePress 是由 Vue.js 的创造者尤雨溪团队开发的,完美集成了 Vue.js 的生态。

  2. Markdown 写作
    使用 Markdown 语法来写作,简洁高效,让你更专注于内容创作。

  3. Vue 驱动的界面
    你可以像写 Vue 应用一样,使用 Vue 组件来增强你的文档页面。

  4. 默认主题美观
    VuePress 有一个开箱即用的默认主题,看起来既简洁又专业。

  5. 插件系统
    通过插件,你可以扩展 VuePress 的功能,比如增加搜索、评论等。

  6. 部署简单
    生成的静态文件可以轻松部署到 GitHub Pages、Netlify 等多种平台上。

如何安装 VuePress?

  1. 安装 Node.js
    VuePress 是基于 Node.js 的,所以首先需要在你的电脑上安装 Node.js。

  2. 安装 VuePress
    打开终端或命令提示符,输入以下命令安装 VuePress:

    npm install -g vuepress
    
  3. 创建新网站
    使用以下命令创建一个新的 VuePress 网站:

    vuepress create my-blog
    cd my-blog
    

    这里的 my-blog 是你的博客名,可以自定义。

如何使用 VuePress?

  1. 编写文档
    在博客的 docs 目录下创建 Markdown 文件,就可以开始写文档了。

  2. 本地预览
    输入以下命令启动本地开发服务器:

    vuepress dev
    

    然后在浏览器中输入 http://localhost:8080,就可以实时预览你的博客了。

  3. 构建静态文件
    当你的文档写好后,使用以下命令构建静态网页:

    vuepress build
    

    这会在 .vuepress/dist 目录下生成静态文件。

  4. 部署网站
    .vuepress/dist 目录下的文件部署到你选择的平台上,你的博客就上线了。

  5. 定制主题
    VuePress 允许你通过修改默认主题的样式或者使用社区提供的主题来定制你的网站外观。

VuePress 的优势

  • Vue.js 集成
    如果你是 Vue.js 的粉丝,VuePress 提供了完美的集成体验。

  • 简洁美观
    VuePress 的默认主题既简洁又美观,适合技术文档和个人博客。

  • 社区支持
    VuePress 有一个活跃的社区,你可以找到大量的教程和帮助。

  • 易于扩展
    通过 Vue 组件和插件,你可以轻松扩展 VuePress 的功能。

VuePress 的局限

  • 主要面向技术文档
    VuePress 主要设计用于技术文档和简单的博客,对于复杂的网站构建可能不够灵活。

  • 对新手有一定门槛
    对于不熟悉 Vue.js 或者前端开发的用户来说,可能需要一些时间来学习和熟悉。

如果你熟悉 Vue.js,想要一个简洁、高效的平台来展示你的技术文章,VuePress 是一个非常好的选择。

相关文章
|
自然语言处理 JavaScript
vue3-ts-vite:Google 多语言调试 / 网页中插入谷歌翻译元素 / 翻译
vue3-ts-vite:Google 多语言调试 / 网页中插入谷歌翻译元素 / 翻译
312 0
|
2月前
|
自然语言处理 JavaScript 前端开发
静态文档网站生成神奇器:VuePress!尤雨溪的旧爱!
【10月更文挑战第3天】静态文档网站生成神奇器:VuePress!尤雨溪的旧爱!
静态文档网站生成神奇器:VuePress!尤雨溪的旧爱!
|
4月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
115 1
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
5月前
|
资源调度 前端开发
文本,vitepress的使用,如何使用vitevitepress没有config.js该怎么办?这里使用vitepress进行手动配置,参考只爭朝夕不負韶華的文章
文本,vitepress的使用,如何使用vitevitepress没有config.js该怎么办?这里使用vitepress进行手动配置,参考只爭朝夕不負韶華的文章
|
7月前
|
安全 网络架构 Python
blog-engine-06-pelican 静态网站生成 支持 markdown 和 reST 语法
这篇内容介绍了多个静态博客引擎的对比及详细教程,包括 Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js 和 Middleman。重点讲述了 Pelican,一个Python编写的静态博客生成器,其特点是静态生成、Markdown写作、丰富的主题和插件系统,以及简单的部署。安装Pelican需要先安装Python,然后通过pip安装Pelican并使用pelican-quickstart初始化博客。文章还提到了Pelican的优点,如速度快、写作体验好、社区支持和高度可定制,但也指出其静态性质和学习曲线较陡峭的不足之处。
|
7月前
|
前端开发 数据管理 Ruby
blog-engine-10-middleman 静态站点生成器,利用了现代 Web 开发中的所有快捷方式和工具
这篇内容介绍了Middleman,一个基于Ruby的静态网站生成器。Middleman的特点包括静态网站生成、模板系统、前端技术支持、数据管理和简单的部署。安装步骤涉及安装Ruby和运行`gem install middleman`。使用方法包括在`source`目录编写内容,使用`middleman server`预览,`middleman build`构建网站,然后部署到服务器。Middleman的优势在于速度、灵活性和数据管理,但需要Ruby知识,且社区规模较小。适合熟悉Ruby并寻求强大建站工具的用户。
|
XML JavaScript 前端开发
【静态Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
【静态Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
|
前端开发 JavaScript
基于node.js开发的文章生成器(七、网页版本的文章生成器--前端页面篇)
# 引言 经过前面六章的学习,我们已经有了很多知识的储备,本次我们来制作文章生成器的前端部分。 # 数据的传递 接下来这里我们的传递方式主要通过form表单和axios两种方式来传递数据。 ## 传统的form表单传递 传统的form表单传递方式首先通过`<form></form>`标签来完成。 ### 传统的form表单传递---练习测试 我们建立 csss.html和csss.js文件夹 csss.html代码如下: ``` <!DOCTYPE html> <html> <head> <title>xx</title> </head>
|
JavaScript
js基础笔记学习223文档得加载2
js基础笔记学习223文档得加载2
70 0
js基础笔记学习223文档得加载2
|
JavaScript
js基础笔记学习222文档得加载1
js基础笔记学习222文档得加载1
86 0
js基础笔记学习222文档得加载1
下一篇
DataWorks