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 条评论
登录 后参与评论

相关文章

来自专栏维C果糖

Git 的安装流程及步骤

在之前的「史上最简单的 GitHub 教程」中,我们已经知道了如何创建 GitHub 账号、创建仓库、进行个性化设置等等,但是我们还要知道:GitHub 是基于...

2497
来自专栏图像识别与深度学习

2018-03-24python3.6.2 Tensorflow环境配置(win10 64位)

1717
来自专栏守望轩

Visual Studio 2008 每日提示(二十五)

#241、在调试状态用立即窗口做计算器或调试面板 原文链接:You can use the immediate window as a glorified c...

2913
来自专栏Django中文社区

注册

用户注册就是创建用户对象,将用户的个人信息保存到数据库里。回顾一下 Django 的 MVT 经典开发流程,对用户注册功能来说,首先创建用户模型(M),这一步我...

4295
来自专栏代码小睿

静态页面如何实现 include 引入公用代码

  一直以来,我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的,就像下面这样:

2640
来自专栏魏艾斯博客www.vpsss.net

用 phpstudy 搭建本地 php 环境及安装 wordpress 教程

7944
来自专栏Java面试笔试题

在VMware上安装CentOS版本的Linux虚拟机

2.点击“编辑虚拟机设置”,选择“CD/DVD”,点击"使用ISO映像文件"在本地找到合适的镜像文件;

1302
来自专栏小二的折腾日记

使用gitpage+Hexo搭建自己的博客

摘自:https://xuanwo.org/2015/03/26/hexo-intor/ 写的很详细了,就不仔细写一遍了,就当个记录吧,以后出问题了好解决一点。

972
来自专栏Golang语言社区

【Golang语言社区】前端编程-手机端调试利器 - 总结与实践

一些调试工具 说起手机端调试,相比大家都不陌生。 由于手机浏览器没有像PC端浏览器一样有开发调试工具,所以一般手机端的调试都要借助于电脑,现在的调试方式通常有以...

4724
来自专栏祝威廉

StreamingPro-Editor, 基于Intellij Idea 的编辑器插件发布

StreamingPro在内部已经用在比较复杂的项目上了。所以导致配置文件巨复杂,之前同事提到这事,然后我自己把配置代码拉下来,看了下确实如此。一开始想着能否利...

942

扫码关注云+社区

领取腾讯云代金券