开始

准备材料

  • Github账号

  • vercel账号

Github部分

创建一个仓库,仓库名字可以瞎填,其他默认(仓库一定要设置为Public)

可以选择在Github上创建文件/或者本地git push到仓库 我这里不写了。

开始

在Github上分别创建 index.html _coverpage.md _sidebar.md README.md 文件

1)在 README.md文件里填入以下内容:

1
2
3
# 标题

Test Web-doc

2)在 _sidebar.md 文件填入以下内容:

1
2
3
4
- 开始

- [概述](/README.md)

3)在 _coverpage.md 文件填入以下内容:

1
2
3
4
# Test <small>0.0.1</small>

<a href="https://blog.cycxtit.top">博客</a>
<a href="#README">Get Started</a>>

4)在 index.html 填入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<!-- vue主题样式 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
<!-- 暗黑主题插件样式 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/style.min.css"
title="docsify-darklight-theme" type="text/css" />
</head>

<body>
<div id="app">Loading...</div>
<!-- 在github上编辑插件 -->
<script src="//cdn.jsdelivr.net/npm/docsify-edit-on-github"></script>
<script>
window.$docsify = {
basePath: '/', // 资源相对路径
name: 'Test', // 文档标题,会显示在侧边栏顶部
nameLink: '/', // 点击文档标题后的跳转地址
repo: 'cycxtIT/web-doc', // 有repo属性则右上角会展示github图标,点击可进入
loadSidebar: true, // 加载侧边栏
externalLinkTarget: '_blank', // 外部链接的打开方式,默认_blank
cornerExternalLinkTarget: '_blank', // 右上角链接的打开方式。默认为 _blank
routerMode: 'hash', // 路由方式 默认hash
coverpage: true, // 展示封面
notFoundPage: true, // 在找不到指定页面时加载_404.md
auto2top: true, // 切换页面后是否自动跳转到页面顶部
search: { // 搜索插件配置
paths: 'auto',
placeholder: '搜索',
noData: '没有结果!'
},
count: { // 字数统计插件配置
countable: true,
fontsize: '0.9em',
color: 'rgb(90,90,90)',
language: 'chinese'
},
pagination: { // 分页插件配置
previousText: '上一章节',
nextText: '下一章节',
crossChapter: true,
},
plugins: [
EditOnGithubPlugin.create(
'https://github.com/cycxtIT/web-doc/blob/master/docs/',
null,
function ( file ) {
if ( file.indexOf( 'en' ) === -1 ) {
return '在 GitHub 上编辑'
} else {
return 'Edit on Github'
}
}
)
],
themeColor: "#42b983", // 暗黑模式主题色
darklightTheme: {
siteFont: "PT Sans",
defaultTheme: 'dark',
codeFontFamily: 'Roboto Mono, Monaco, courier, monospace',
bodyFontSize: '17px',
dark: {
accent: '#42b983',
toogleBackground: '#ffffff',
background: '#091a28',
textColor: '#b4b4b4',
codeTextColor: '#ffffff',
codeBackgroudColor: '#0e2233',
borderColor: '#0d2538',
blockQuoteColour: '#858585',
highlightColor: '#d22778',
sidebarSublink: '#b4b4b4',
codeTypeColor: '#ffffff',
coverBackground: 'linear-gradient(to left bottom, hsl(118, 100%, 85%) 0%,hsl(181, 100%, 85%) 100%)',
toogleImage: 'url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/sun.svg)'
},
light: {
accent: '#42b983',
toogleBackground: '#091a28',
background: '#ffffff',
textColor: '#34495e',
codeTextColor: '#525252',
codeBackgroudColor: '#f8f8f8',
borderColor: 'rgba(0, 0, 0, 0.07)',
blockQuoteColor: '#858585',
highlightColor: '#d22778',
sidebarSublink: '#b4b4b4',
codeTypeColor: '#091a28',
coverBackground: 'linear-gradient(to left bottom, hsl(118, 100%, 85%) 0%,hsl(181, 100%, 85%) 100%)',
toogleImage: 'url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/moon.svg)'
}
}
}
</script>
</body>

<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<!--全局搜索插件-->
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
<!--字数统计插件-->
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
<!--代码段复制插件-->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
<!--图片缩放插件-->
<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
<!-- 阅读进度条插件 -->
<script src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/index.min.js"></script>
<!-- 暗黑主题切换插件 -->

</html>

配置 vercel 自动部署

推送本地代码到 github 仓库,完成之后通过 vercel.com/dashboard 进入 vercel 的工作台

点击右边的 New Project 按钮,导入刚刚创建的git仓库点击create部署即可。(如果没有的话可以自己摸索摸索看看怎么部署)

到这一步就算成功了,从此以后,只要你在本地对文档内容做了修改,vercel 就会触发自动更新了。

图片

创建仓库

vercel部署

部署后的样子