Skip to content

jiaheng6/jgsrty.github.docs

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

137 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

使用 Github Pages

由 GitHub 网站服务,为众多 GitHub 用户提供了良好的服务器部署环境以及域名的好工具

开发准备

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

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

新建github代码仓库

新建github代码仓库

克隆代码到本地

克隆代码到本地

创建入口文件

在当前文件下新建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 Pages

保存并提交代码至github,提交代码后等待1分钟

浏览器访问 http://自己的github用户名.github.io 看到 hello github 到这一步 Github Page已经可以正常使用

如果不想用VuePress写文档,可以随便写点东西提交代码即可更新。

使用 VuePress

VuePress是尤大神发布的一个全新的基于vue的文档生成器

安装

# 全局安装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

到此已经完成了所有配置,至于里面写什么,完全有你自己决定了。

About

☀️ 🐾 personal blog docs 项目预览:

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • Shell 100.0%