1
1
---
2
2
sidebar_label : ' Home'
3
- displayed_sidebar : ' docs'
4
3
slug : /
5
4
sidebar_position : 1
6
5
title : ' ClickHouse Docs'
@@ -9,6 +8,8 @@ pagination_next: null
9
8
hide_title : true
10
9
id : ' home-page'
11
10
description : ' Docs homepage'
11
+ sidebar_custom_props :
12
+ hidden : true
12
13
---
13
14
14
15
import ClickHouseLogo from ' @site/src/icons/ClickHouseLogo' ;
@@ -23,33 +24,59 @@ import IconSQLConsole from '@site/src/icons/IconSQLConsole';
23
24
import IconLightning from ' @site/src/icons/IconLightning' ;
24
25
import IconDownload from ' @site/src/icons/IconDownload' ;
25
26
26
- export const Hero = ({ children, color}) => {
27
+ export const Hero = ({children , color }) => {
27
28
return (
28
29
<div className = ' home-page-hero' >
29
30
<div className = ' home-page-hero-left' >
30
31
<div style = { {display: ' flex' , flexDirection: ' row' , alignItems: ' center' , marginBottom: ' 12px' }} >
31
- <ClickHouseLogo width =' 220px ' color =' black ' />
32
+ <ClickHouseLogo width = ' 220px' color = ' black' />
33
+ </div >
34
+ <div style = { {fontSize: ' 16px' , lineHeight: ' 1.4' }} >Learn how to use ClickHouse through guides, reference
35
+ documentation, and videos
32
36
</div >
33
- <div style={{fontSize: '16px', lineHeight: '1.4'}}>Learn how to use ClickHouse through guides, reference documentation, and videos</div >
34
37
</div >
35
38
<div className = ' home-page-hero-right' >
36
39
<a href = ' /docs/cloud/overview' className = ' home-page-hero-button' >
37
- <div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
38
- <div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconCloud iconWidth={'24px'}/></div >
40
+ <div style = { {
41
+ fontWeight: ' 600' ,
42
+ fontSize: ' 18px' ,
43
+ marginBottom: ' 12px' ,
44
+ display: ' flex' ,
45
+ flexDirection: ' row' ,
46
+ alignItems: ' center'
47
+ }} >
48
+ <div style = { {display: ' flex' , float: ' left' , margin: 0 , marginRight: ' 8px' }} ><IconCloud
49
+ iconWidth = { ' 24px' } /></div >
39
50
<div >Cloud</div >
40
51
</div >
41
52
<div >The fastest way to get started with ClickHouse</div >
42
53
</a >
43
54
<a href = ' /docs/cloud/get-started/cloud-quick-start' className = ' home-page-hero-button' >
44
- <div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
45
- <div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconLightning iconWidth={'24px'}/></div >
55
+ <div style = { {
56
+ fontWeight: ' 600' ,
57
+ fontSize: ' 18px' ,
58
+ marginBottom: ' 12px' ,
59
+ display: ' flex' ,
60
+ flexDirection: ' row' ,
61
+ alignItems: ' center'
62
+ }} >
63
+ <div style = { {display: ' flex' , float: ' left' , margin: 0 , marginRight: ' 8px' }} ><IconLightning
64
+ iconWidth = { ' 24px' } /></div >
46
65
<div >Quick Start</div >
47
66
</div >
48
67
<div >Get started with ClickHouse in 5 minutes</div >
49
68
</a >
50
69
<a href = ' /docs/install' className = ' home-page-hero-button' >
51
- <div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
52
- <div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconDownload iconWidth={'24px'}/></div >
70
+ <div style = { {
71
+ fontWeight: ' 600' ,
72
+ fontSize: ' 18px' ,
73
+ marginBottom: ' 12px' ,
74
+ display: ' flex' ,
75
+ flexDirection: ' row' ,
76
+ alignItems: ' center'
77
+ }} >
78
+ <div style = { {display: ' flex' , float: ' left' , margin: 0 , marginRight: ' 8px' }} ><IconDownload
79
+ iconWidth = { ' 24px' } /></div >
53
80
<div >Install</div >
54
81
</div >
55
82
<div >Install guides for every platform</div >
@@ -59,24 +86,24 @@ export const Hero = ({ children, color}) => {
59
86
)
60
87
}
61
88
62
- export const HomePageOptionButton = ({ children, icon, iconWidth, svgIcon, link }) => {
89
+ export const HomePageOptionButton = ({children , icon , iconWidth , svgIcon , link }) => {
63
90
return (
64
91
<a
65
92
href = { link || ' #' }
66
93
className = ' home-page-option-button' >
67
94
<div className = ' home-page-option-icon' >
68
95
{
69
96
svgIcon ? svgIcon : (
70
- <img className='home-svg' src={icon} style={{width: iconWidth || '28px'}} />
97
+ <img className = ' home-svg' src = { icon } style = { {width: iconWidth || ' 28px' }} />
71
98
)
72
99
}
73
100
</div >
74
- <div style={{ fontWeight: '500' }}>{children}</div >
101
+ <div style = { {fontWeight: ' 500' }} >{ children } </div >
75
102
</a >
76
103
)
77
104
}
78
105
79
- export const ConnectToClickHouse = ({ children, color}) => {
106
+ export const ConnectToClickHouse = ({children , color }) => {
80
107
return (
81
108
<div className = ' home-page-section' >
82
109
<div className = ' home-page-section-left' >
@@ -86,71 +113,95 @@ export const ConnectToClickHouse = ({ children, color}) => {
86
113
</div >
87
114
<div >
88
115
<div className = ' home-page-button-container' >
89
- <HomePageOptionButton svgIcon={<IconTerminal iconWidth =' 28px ' />} link='/docs/interfaces/cli'>ClickHouse CLI</HomePageOptionButton >
90
- <HomePageOptionButton svgIcon={<IconSQLConsole iconWidth =' 28px ' />} link='/docs/cloud/get-started/sql-console'>Cloud SQL Console</HomePageOptionButton >
91
- <HomePageOptionButton icon =' /docs/images/logo-nodejs.svg ' link =' /docs/integrations/javascript ' >Node.js</HomePageOptionButton >
116
+ <HomePageOptionButton svgIcon = { <IconTerminal iconWidth = ' 28px' />} link = ' /docs/interfaces/cli' >ClickHouse
117
+ CLI</HomePageOptionButton >
118
+ <HomePageOptionButton svgIcon = { <IconSQLConsole iconWidth = ' 28px' />}
119
+ link = ' /docs/cloud/get-started/sql-console' >Cloud SQL
120
+ Console</HomePageOptionButton >
121
+ <HomePageOptionButton icon = ' /docs/images/logo-nodejs.svg'
122
+ link = ' /docs/integrations/javascript' >Node.js</HomePageOptionButton >
92
123
</div >
93
124
<div className = ' home-page-button-container' >
94
- <HomePageOptionButton icon =' /docs/images/logo-java.svg ' link =' /docs/integrations/java ' >Java</HomePageOptionButton >
95
- <HomePageOptionButton icon =' /docs/images/logo-python.svg ' link =' /docs/integrations/python ' >Python</HomePageOptionButton >
96
- <HomePageOptionButton icon =' /docs/images/logo-go.svg ' link =' /docs/integrations/go ' >Go</HomePageOptionButton >
125
+ <HomePageOptionButton icon = ' /docs/images/logo-java.svg'
126
+ link = ' /docs/integrations/java' >Java</HomePageOptionButton >
127
+ <HomePageOptionButton icon = ' /docs/images/logo-python.svg'
128
+ link = ' /docs/integrations/python' >Python</HomePageOptionButton >
129
+ <HomePageOptionButton icon = ' /docs/images/logo-go.svg'
130
+ link = ' /docs/integrations/go' >Go</HomePageOptionButton >
97
131
</div >
98
132
</div >
99
133
</div >
100
134
)
101
135
}
102
136
103
- export const MigrateToClickHouse = ({ children, color}) => {
137
+ export const MigrateToClickHouse = ({children , color }) => {
104
138
return (
105
139
<div className = ' home-page-section' >
106
140
<div className = ' home-page-section-left' >
107
141
<div style = { {fontWeight: ' 600' , fontSize: ' 18px' , marginBottom: ' 24px' }} >Migrate to ClickHouse</div >
108
- <div style={{marginBottom: '12px'}}>Load your data from other databases, data warehouses, and object storage</div >
142
+ <div style = { {marginBottom: ' 12px' }} >Load your data from other databases, data warehouses, and object
143
+ storage
144
+ </div >
109
145
<div ><a href = ' /docs/integrations' >View all integrations → </a ></div >
110
146
</div >
111
147
<div >
112
148
<div className = ' home-page-button-container' >
113
- <HomePageOptionButton icon =' /docs/images/logo-snowflake.svg ' link =' /docs/migrations/snowflake ' >Snowflake</HomePageOptionButton >
114
- <HomePageOptionButton icon =' /docs/images/logo-bigquery.svg ' link =' /docs/migrations/bigquery ' >BigQuery</HomePageOptionButton >
115
- <HomePageOptionButton icon =' /docs/images/logo-redshift.svg ' link =' /docs/integrations/redshift ' >Redshift</HomePageOptionButton >
149
+ <HomePageOptionButton icon = ' /docs/images/logo-snowflake.svg'
150
+ link = ' /docs/migrations/snowflake' >Snowflake</HomePageOptionButton >
151
+ <HomePageOptionButton icon = ' /docs/images/logo-bigquery.svg'
152
+ link = ' /docs/migrations/bigquery' >BigQuery</HomePageOptionButton >
153
+ <HomePageOptionButton icon = ' /docs/images/logo-redshift.svg'
154
+ link = ' /docs/integrations/redshift' >Redshift</HomePageOptionButton >
116
155
</div >
117
156
<div className = ' home-page-button-container' >
118
- <HomePageOptionButton icon =' /docs/images/logo-postgres.svg ' link =' /docs/integrations/postgresql ' >Postgres</HomePageOptionButton >
119
- <HomePageOptionButton icon =' /docs/images/logo-mysql.svg ' link =' /docs/integrations/mysql ' >MySQL</HomePageOptionButton >
120
- <HomePageOptionButton icon =' /docs/images/logo-s3.svg ' link =' /docs/integrations/s3 ' >S3</HomePageOptionButton >
157
+ <HomePageOptionButton icon = ' /docs/images/logo-postgres.svg'
158
+ link = ' /docs/integrations/postgresql' >Postgres</HomePageOptionButton >
159
+ <HomePageOptionButton icon = ' /docs/images/logo-mysql.svg'
160
+ link = ' /docs/integrations/mysql' >MySQL</HomePageOptionButton >
161
+ <HomePageOptionButton icon = ' /docs/images/logo-s3.svg'
162
+ link = ' /docs/integrations/s3' >S3</HomePageOptionButton >
121
163
</div >
122
164
</div >
123
165
</div >
124
166
)
125
167
}
126
168
127
- export const DeployClickHouse = ({ children, color}) => {
169
+ export const DeployClickHouse = ({children , color }) => {
128
170
return (
129
171
<div className = ' home-page-section' >
130
172
<div className = ' home-page-section-left' >
131
173
<div style = { {fontWeight: ' 600' , fontSize: ' 18px' , marginBottom: ' 24px' }} >Deploy ClickHouse</div >
132
174
<div style = { {marginBottom: ' 12px' }} >Deploy ClickHouse to our cloud or on your own infrastructure</div >
133
175
</div >
134
176
<div className = ' home-page-button-container' >
135
- <HomePageOptionButton svgIcon={<IconCloud iconWidth =' 28px ' />} link='https://clickhouse.com/cloud'>Cloud </HomePageOptionButton >
136
- <HomePageOptionButton svgIcon={<IconSingleNode iconWidth =' 28px ' />} link='/docs/architecture/introduction'>Node Deployment</HomePageOptionButton >
137
- <HomePageOptionButton svgIcon={<IconCluster iconWidth =' 28px ' />} link='/docs/architecture/cluster-deployment'>Cluster Deployment</HomePageOptionButton >
177
+ <HomePageOptionButton svgIcon = { <IconCloud iconWidth = ' 28px' />}
178
+ link = ' https://clickhouse.com/cloud' >Cloud</HomePageOptionButton >
179
+ <HomePageOptionButton svgIcon = { <IconSingleNode iconWidth = ' 28px' />}
180
+ link = ' /docs/architecture/introduction' >Node Deployment</HomePageOptionButton >
181
+ <HomePageOptionButton svgIcon = { <IconCluster iconWidth = ' 28px' />}
182
+ link = ' /docs/architecture/cluster-deployment' >Cluster
183
+ Deployment</HomePageOptionButton >
138
184
</div >
139
185
</div >
140
186
)
141
187
}
142
188
143
- export const MoreResources = ({ children, color}) => {
189
+ export const MoreResources = ({children , color }) => {
144
190
return (
145
191
<div className = ' home-page-section' >
146
192
<div className = ' home-page-section-left' >
147
193
<div style = { {fontWeight: ' 600' , fontSize: ' 18px' , marginBottom: ' 10px' }} >Additional resources</div >
148
194
</div >
149
195
<div >
150
196
<div className = ' home-page-button-container' >
151
- <HomePageOptionButton svgIcon={<IconSupport iconWidth =' 28px ' />} link='https://clickhouse.com/support/program'>Contact Support</HomePageOptionButton >
152
- <HomePageOptionButton svgIcon={<IconChangelog iconWidth =' 28px ' />} link='/docs/whats-new/changelog'>Changelog</HomePageOptionButton >
153
- <HomePageOptionButton svgIcon={<IconDatasets iconWidth =' 28px ' />} link='/docs/getting-started/example-datasets'>Sample Datasets</HomePageOptionButton >
197
+ <HomePageOptionButton svgIcon = { <IconSupport iconWidth = ' 28px' />}
198
+ link = ' https://clickhouse.com/support/program' >Contact
199
+ Support</HomePageOptionButton >
200
+ <HomePageOptionButton svgIcon = { <IconChangelog iconWidth = ' 28px' />}
201
+ link = ' /docs/whats-new/changelog' >Changelog</HomePageOptionButton >
202
+ <HomePageOptionButton svgIcon = { <IconDatasets iconWidth = ' 28px' />}
203
+ link = ' /docs/getting-started/example-datasets' >Sample
204
+ Datasets</HomePageOptionButton >
154
205
</div >
155
206
</div >
156
207
</div >
@@ -160,13 +211,13 @@ export const MoreResources = ({ children, color}) => {
160
211
export const HomeContainer = () => {
161
212
return (
162
213
<div className = ' home-container' >
163
- <Hero />
164
- <ConnectToClickHouse />
165
- <MigrateToClickHouse />
166
- <DeployClickHouse />
167
- <MoreResources />
214
+ <Hero />
215
+ <ConnectToClickHouse />
216
+ <MigrateToClickHouse />
217
+ <DeployClickHouse />
218
+ <MoreResources />
168
219
</div >
169
220
)
170
221
}
171
222
172
- <HomeContainer />
223
+ <HomeContainer />
0 commit comments