专栏首页前端vueVuePress搭建永久文档/博客网站VuePress 使用

VuePress搭建永久文档/博客网站VuePress 使用

VuePress是尤大神发布的一个全新的基于vue的文档生成器 在线预览 地址 源码 地址 效果图预览 ↓ ↓ ↓

文档首页

详细文档

开发准备

  • 一个github账号,没有的要自己注册一个 注册地址
  • 会使用git工具,克隆及提交代码等简单操作,git学习请自行 百度
  • Markdown语法参考地址 Markdown

只需要满足上述三个要求,任何人就都可以写出来一套属于自己的文档网站~

新建github代码仓库

新建github代码仓库

克隆代码到本地

克隆代码到本地

使用Github Pages

新建index文件

在当前文件下新建index.html

新建index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h1>hello github</h1>
</body>
</html>

保存并提交代码至github,提交代码后等待1分钟 浏览器访问 http://自己的github用户名.github.io 看到hello github 到这一步 Github Page已经可以正常使用 如果不想用VuePress写文档,可以随便写点东西提交代码即可更新。

VuePress 使用

安装

# 全局安装VuePress
npm install -D vuepress

本地新建文件夹>vuepress vuepress/新建docs文件夹 vuepress/新建package.json文件 vuepress/docs/新建README.md文件

创建文件

在docs/README.md中添加代码

# my first vuepress

在package.json中添加代码

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

在vuepress中启动命令

npm run dev

启动成功后打开看到以下页面说明vuepress已经初步配置成功 如果本地8080端口被占用请根据命令行中提示点端口进行访问

启动开发模式

文件配置

docs/文件下新建public/文件下新建img/文件下放入一张图片,用作首页显示图片

首页图片

修改首页显示文件 docs/README.md 官方配置手册

---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

docs/文件下新建.vuepress文件夹/新建config.js文件

config配置文件

导航栏及侧边栏配置 .vuepress/config.js 官方配置手册

module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' },
    ],
    sidebar: [
      '/',
      '/page-a',
      ['/page-b', 'Explicit link text']
    ]
  }
}

还可配置搜索框匹配上/下一篇链接自定义页面等,官方文档都写的非常清楚,可根据需要自行配置即可。

打包项目

全部配置完成后打包项目

npm run build 

打包成功之后找到 docs/.vuepress/dist 文件夹下文件,全部拷贝到刚开始配置的 Github Page代码仓库中,提交代码,等待一分钟后访问 http://自己的github用户名.github.io 到此已经完成了所有配置,至于里面写什么,完全有你自己决定了。

最后说下为什么用这种方式写一些文章、笔记 我曾在自己的服务器上写博客,笔记网站,优点就是什么都可以自定义,并且想改什么就改什么。但是缺点太多了,自己部署服务器环境,装mysql,写后台,写数据库,再写前端...这下来搞得头皮发麻,成果还不尽理想,最关键的是服务器最便宜一年也好好几百。。万一那天养不起服务器了,之前写的东西就全白费了不是。 现在用github加vuepress,理论上来说,域名是永久可以访问的,这样一个在线文档或博客(根据你自己的配置喜好),并且vuepress也是基于vue的单页应用,访问速度及用户浏览反馈还是很棒的!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 开发环境准备(一)

    官方推荐的是mongodb,mongodb也看了点,本身对数据库这块就不太熟,所以我也是从mysql开始,这里只介绍几种mysql工具

    RtyXmd
  • 0.开发准备

    Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 easy-mock 一个可视化,并且能快速生成模拟数据的服务 Mo...

    RtyXmd
  • 第三方账户登录--github

    使用node+express创建项目,可以参考这篇文章 node+express项目

    RtyXmd
  • 开发工具总结(15)之Vuepress制作文档并发布到GitHub

    转载请标明出处: https://www.jianshu.com/p/307684deff51

    AWeiLoveAndroid
  • 【点云备忘录】点云可视化代码的视频记录

    在学习过程中,很多东西过一段时间可能会遗忘,所以产生了录制视频的想法。不能算“视频教程”,只能算是备忘吧。在【点云备忘录】这个系列中,将用录屏+讲解的形式记录一...

    点云乐课堂
  • 深入理解事件

    javascript 给 DOM 绑定事件处理函数总的来说有2种方式:在 html 文档中绑定、在 js 代码中绑定。下面的方式1、方式2属于在 html 中绑...

    Chor
  • 青铜到王者,看看你的MySQL数据库是什么段位,如何提升?

    作者 | 张甦, 数据库领域的专家和知名人士、图书《MySQL王者晋级之路》作者,51CTO 专家博主。近10年互联网线上处理及培训经验,专注于 MySQL 数...

    数据和云
  • FullCalendar 日历插件中文说明文档

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalend...

    用户1149182
  • 吃灰Kindle复活计——用Kindle看网络小说

    曾经连续几个月关注它就为了等它降价几十块,还没买回来就已经幻想好日日夜夜与它形影不离,当它真的闯入你的生活,你不禁感叹:真香!(用Kindle盖出来的泡面真香)

    神无月
  • Maven(三)在Eclipse中使用Maven与Maven坐标

    这一篇讲解一下在eclipse中使用maven,在一些高版本的eclipse中是自带maven插件的。所以这里就不在讲解怎么安装插件了。 接下来我们创建一个Ma...

    用户1195962

扫码关注云+社区

领取腾讯云代金券