使用vuepress搭建一个完全免费的个人博客网站

最新推荐文章于 2024-06-19 18:19:02 发布
最新推荐文章于 2024-06-19 18:19:02 发布
阅读量1.9k 收藏 6
点赞数 3
分类专栏： Java教程 技术博客 开发文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yundashi168/article/details/115085111
版权

前言

只听过vue，没听过vuepress？它可是新的vue全家桶成员之一，尤雨溪大神推出的一款好用的模板。

不信？请看Evan You github。star数已过万，并不少。

vuepress用于迅速搭建技术文档网站与个人博客，简单快捷，下面和我一起开始学习吧！

（想直接coding的同学可从第三节开始）

一、模块概述

1. 定义

Vue 驱动的静态网站生成器

2. 亮点

​

自己总结的vuepress优点

3. 同类模块横向对比

①. Nuxt:

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

②. Docsify / Docute:
同样都是基于 Vue，然而它们都是完全的运行时驱动，因此对 SEO 不够友好

③. Hexo:
主题系统太过于静态以及过度地依赖纯字符串, 而不是基于Vue。同时，Hexo 的 Markdown 渲染的配置也不是最灵活的

④. GitBook：

  • 当文件很多时，每次编辑后的重新加载时间长得令人无法忍受
  • 默认主题导航结构也比较有限制性
  • 主题系统也不是 Vue 驱动的
  • GitBook 团队更专注于将其打造为一个商业产品而不是开源工具

二、成品展示

1. 技术文档网站：

vue全家桶官网：vue、vuex、vue-cli、vue-router以及vuepress本身

2. 个人博客：

博客1（默认主题）、博客2（自定义主题）

三、开始搭建

coding之前，建议大家先了解markdown语法，为之后的文档撰写做铺垫：传送门

1. 全局安装 VuePress

npm install \-g vuepress

2. 创建并进入项目

mkdir vuepress-demo && cd vuepress-demo

3. 初始化项目

npm init \-y // 默认配置yes
在生成的package.json中，添加如下两个启动命令：

"scripts": {
   
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
}
4. 创建基本项目结构

官方只有推荐目录结构，并没有现成的cli，所以需要通过命令行或手动创建如下结构：

vuepress-demo
├─package.json
├─docs
|  ├─README.md
|  ├─.vuepress
|  |     ├─config.js
|  |     ├─public
|  |     |   └avatar.png
|  |     |   └spider.png

其中有后缀的是文件，没后缀的是文件夹

5. 配置config.js

该文件为项目最重要的配置文件，几乎所有配置项都是在此进行。
我们先来一个最简单的配置看看效果：

module.exports = {
   
    title: '南宫的博客',
    head: [ // 注入到当前页面的 HTML <head> 中的标签
      ['link', {
    rel: 'icon', href: <
最低0.47元/天 解锁文章
yundashi168
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用VuePress搭建一个类型element ui文档
10-17
主要介绍了如何使用VuePress搭建一个类型element ui文档，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VuePress搭建博客教程（含部署到github）
weixin_45732455的博客
04-03 487
记录使用vuepress搭建个人博客的过程
VUE3实现个人网站模板源码
最新发布
xcLeigh
06-19 2051
VUE3实现个人网站模板源码，个人网站源码，兼容VUE各个版本，大作业网站源码，源码有五个页面，网站首页，个人工具，个人日志，个人相册，给我留言等模块，内容可以自己调整，自定义导航菜单，轮播图，表单，表格，自定义标签项，代码简单，上手快，模板通俗易懂，可以在此模板上改文字描述就行。可以直接使用。也可直接预览效果。
vue+element详细完整实现个人博客、个人网站
lucky_fang的博客
01-16 9282
接上一篇《vue+elementui实现非常好看的博客、网站首页，网站模板》。 上一篇实现了整个框架的搭建和首页的编码，在此基础上，这一期进行了最终的功能页面完善，增加了功能：同时对样式进行了更深层的改造和优化。 文章详情： 心情说说+我的相册+相册详情 所有文章+标签合集 四.数据处理 主要数据就是文章+相册，分别声明为json数据格式，存储于页面缓存，因为app.vue是一定会加载的，所以作者把这些初始化数据和存储操作都放在了app.vue，利于其他页面获取缓存加载
搭建个人博客网站 -- vue初学者学习总结
spacewow的博客
12-19 2532
阅读源码，初步学习Vue。本贴属个人学习总结。
MarkDown的使用简介
小仙儿
11-20 3454
MarkDown的使用简介 1、MarkDown概述 1.1、什么是MarkDown MarkDown是一种轻量级标记语言，使用易读易写的纯文本格式编写文档。 2004年由约翰·格鲁伯创建。使用MarkDown编写的文档可以导出HTML、Word、图像、PDF、Epub等多种格式的文档。MarkDown编写的文档，后缀名为.md或.markdown。 当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。甚至一些软件也集成了MarkDown功能，比...
vuepress博客搭建（一）导航栏与侧边栏
前端学习博客
06-05 6135
vuepress博客搭建系列文章
手把手教你用 VuePress 快速搭建个人技术博客~
静夜聆雨
10-31 2809
一、什么是 VuePress ? VuePress 是基于 vue 的极简静态网站生成器，实际上就是一个 vue 的单页应用，内置 webpack，可以用来写文档。详见 VuePress中文网 VuePress 可用于将 markdown 文件展示为 WEB 页面 二、展示效果 首页 文档页 三、开始搭建 目标：记录我学习HTMl、CSS、JavaScript的笔记。创建含有三篇文章（HTML、CSS、JavaScript）的项目 前提条件 使用 VuePress 需要先安装 Node.js，版本
Hexo已经看腻了，来手把手教你使用VuePress搭建个人博客
08-27
VuePress 是由 Vue.js 作者尤雨溪推出的一款全新的静态网站生成器，它结合了 Vue.js 的强大功能和 Webpack 的高效构建能力，特别适合用来创建技术文档和个性化博客。VuePress 的核心特点在于它是一个单页面应用程序...
使用vuepress搭建静态博客的示例代码
10-17
主要介绍了使用vuepress搭建静态博客的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于VuePress的个人博客网站设计源码
04-08
个人博客网站：基于VuePress开发，包含116个文件，包括91个Markdown文档、16个PNG图像文件、6个...该项目是一个基于VuePress的个人博客网站，旨在为用户提供一个简洁、易用的博客平台，用于记录和分享个人见解和经验。
基于 Vuepress 搭建个人博客，文章详细，助你快速上手
Jine
11-21 2605
搭建博客 几年前在小白阶段使用过 WordPress + 阿里云服务器 搭建了自己的博客， 也走了很多坑，从零摸坑最后也弄好了，也顺便使用了阿里云的一些服务， 但当时没有记录笔记的习惯，过了好久很多操作也遗忘了。 加上服务器过期了好多数据也没有备份，那就重新搭一个快速上手的博客， 想着怎么也应该尝试一些新的方法，刚好也了解到了尤大神的 Vuepress。因为也更好的支持 Vue 此文章内容将会抽时间持续更新ing，请尝试不同时间段来参考。 准备工作 1、准备服务器环境，或者最后部署到GitHub或码
vuepress（一）：搭建个人博客
weixin_41897680的博客
04-17 4886
使用vuepress搭建个人博客
Vuepress 2.x 简单创建一个blog
News777的博客
10-25 888
因为vuepress有非常多的配置项，这里我就简单介绍几个我日常用到的，若你有其它需求，可在官方文档中进行查询后配置————官方文档链接。
VuePress初学之利用模板theme创建一个个人博客网站
孙君的空间站
12-24 2395
基本学习了和html还有CSS相关的知识，了解了Vue的部署，简单写了个页面发布在自己的云服务器上，现在想要搭建一个更精致的页面，通过搜索了解到还有一个VuePress这个东西，是一个静态网页发布器，基于Vue，学习试一下本文属于原创文章，转载请著名作者出处并置顶！！
vuepress使用简介及个人博客搭建
欢迎大家一起攻克bug
06-19 886
在 docs 目录下，可以新建多个 Markdown 文件，用于编写博客或其他文档内容。然后，在 docs 目录下新建 blog 和 about 两个目录，并在其中分别创建。在项目根目录下新建一个 .vuepress 目录，并创建一个 config.js 文件，用于配置 VuePress。首先，在 GitHub 上创建一个与博客网站同名的仓库，并将代码提交到该仓库的 master 分支。然后，在 my-blog 目录下创建一个 docs 目录，并在其中新建。文件用于展示博客列表和个人简介。
Vue--搭建个人博客
old brother stable
01-12 9254
1.初始化vue项目 1.1环境初始化 1.安装node。官网直达 2.安装淘宝npm镜像提高下载速度。 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装vue脚手架vue-cli。 npm install --global vue-cli 1.2创建项目
手把手教你使用 VuePress 搭建个人博客
十年砍柴的博客
09-21 5189
有阅读障碍的同学，可以跳过第一至四节，下载我写好的工具包:git clone https://github.com/zhangyunchencc/vuepress-devkit.git 然后从第五节开始看。 一、为什么你需要一个博客？ 优秀的程序员都在写博客，写博客有很多好处： 帮助自己梳理、总结、理解知识点（个人提升） 帮助别人理解知识点（好人一生平安） 简历更好看，更多面试机会（升职加薪） 二、什么是 VuePress，为什么要使用 VuePress ？ VuePress是尤雨溪（vu...
vuepress搭建个人博客
mj的博客
06-19 681
项目搭建 #安装vuepress 第一步就是进行vuepress进行安装: 如果使用npm来安装, Node.js版本需要 >=8 才可以 yarn global add vuepress # 或者：npm install -g vuepress #注意 如果你的现有项目依赖了 webpack 3.x，推荐使用 Yarn而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。 #初始化项目 创建项目目录blog mkdir blog cd bl
vue 按钮跳转新页面_vuePress搭建一个vue风格的技术文档/博客
06-13
如果你想在 Vue 中实现按钮跳转到新页面，可以使用 Vue Router。首先，你需要安装 Vue Router： ``` npm install vue-router ``` 接着，在你的 Vue 实例中引入 Vue Router 并注册路由： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/new-page', name: 'NewPage', component: () => import('@/views/NewPage.vue') } ] const router = new VueRouter({ mode: 'history', routes }) export default router ``` 这里定义了一个路由，当访问 `/new-page` 时，会渲染 `NewPage.vue` 组件。 然后，在你的按钮组件中使用 `router-link` 标签： ```html <template> <router-link to="/new-page">跳转到新页面</router-link> </template> ``` 这样，点击按钮就会跳转到 `/new-page` 页面。 如果你想使用 VuePress 搭建一个 Vue 风格的技术文档/博客，可以参考 VuePress 官方文档中的教程：[VuePress](https://vuepress.vuejs.org/)。首先，你需要安装 VuePress： ``` npm install -D vuepress ``` 然后，在你的项目中创建一个 `.vuepress` 目录，并在其中创建一个 `config.js` 文件： ```javascript module.exports = { title: 'My Blog', description: 'My awesome blog built with VuePress', themeConfig: { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/' }, { text: 'About', link: '/about/' } ], sidebar: [ '/', '/guide/', '/about/' ] } } ``` 这里定义了站点的标题、描述、导航栏和侧边栏。接着，在 `.vuepress` 目录中创建一个 `README.md` 文件作为首页，以及其他的 Markdown 文件作为文章。 最后，你可以使用以下命令启动 VuePress： ``` npx vuepress dev ``` 这样，你就可以在浏览器中访问你的博客了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值