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的单页应用,访问速度及浏览反馈还是很棒的!

欢迎 star
欢迎留言讨论交流~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容