Skip to content

Commit 7d8626c

Browse files
danielbariondanielbarion
committed
docs: add digital ocean page
1 parent 08bfc6f commit 7d8626c

9 files changed

+219
-0
lines changed

‎docs/docusaurus.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,10 @@ const config = {
157157
label: 'Getting Started',
158158
to: '/docs/getting-started',
159159
},
160+
{
161+
label: 'Deploying to DigitalOcean',
162+
to: '/blog/digital-ocean-app-platform',
163+
},
160164
],
161165
},
162166
// {

‎docs/src/pages/blog/digital-ocean-app-platform.tsx

+215
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
/* eslint-disable jsx-a11y/anchor-is-valid */
2+
/* eslint-disable import/no-unresolved */
3+
import React from 'react'
4+
import Layout from '@theme/Layout'
5+
// @ts-ignore
6+
import DigitalOceanBanner from '@site/static/img/digital-ocean-banner.webp'
7+
// @ts-ignore
8+
import DigitalOceanLogin from '@site/static/img/digital-ocean-login.webp'
9+
// @ts-ignore
10+
import DigitalOceanCreateApp from '@site/static/img/digital-ocean-create-app.webp'
11+
// @ts-ignore
12+
import DigitalOceanAppConfig1 from '@site/static/img/digital-ocean-app-config-1.png'
13+
// @ts-ignore
14+
import DigitalOceanAppConfig2 from '@site/static/img/digital-ocean-app-config-2.png'
15+
// @ts-ignore
16+
import DigitalOceanStaticSite from '@site/static/img/digital-ocean-static-site.png'
17+
// @ts-ignore
18+
import DigitalOceanCreateResource from '@site/static/img/digital-ocean-create-resource.png'
19+
// @ts-ignore
20+
import { Tooltip } from 'react-tooltip'
21+
22+
export default function Home(): JSX.Element {
23+
return (
24+
<Layout title="Deploy on DigitalOcean" description="Guide to hosting a site with React-Tooltip">
25+
<main
26+
style={{
27+
padding: '2rem',
28+
display: 'flex',
29+
flexDirection: 'column',
30+
alignItems: 'center',
31+
justifyContent: 'center',
32+
minHeight: '100vh',
33+
width: '100%',
34+
overflowX: 'hidden',
35+
}}
36+
>
37+
<div style={{ maxWidth: '800px', width: '100%' }}>
38+
<img
39+
src={DigitalOceanBanner}
40+
alt="DigitalOcean banner"
41+
style={{
42+
width: '100%',
43+
maxWidth: '100%',
44+
height: 'auto',
45+
marginBottom: '1rem',
46+
}}
47+
/>
48+
49+
<h1>How to Deploy a Static Site on DigitalOcean</h1>
50+
<p>
51+
This guide walks you through deploying a static React site + React-Tooltip library,
52+
using DigitalOcean&apos;s App Platform. Follow these steps to get your site live quickly
53+
and easy!
54+
</p>
55+
56+
<div style={{ marginTop: '2rem', marginBottom: '2rem' }}>
57+
<h2>Examples of Using React-Tooltip</h2>
58+
<h3>1. Basic Tooltip</h3>
59+
<p>This example demonstrates a simple tooltip:</p>
60+
<div style={{ marginBottom: '1rem' }}>
61+
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!" href="#">
62+
◕‿‿◕
63+
</a>
64+
<Tooltip id="my-tooltip" />
65+
</div>
66+
<pre style={{ background: '#f4f4f4', padding: '1rem', borderRadius: '4px' }}>
67+
{`import {Tooltip} from 'react-tooltip';\n\n<a id="my-anchor-element">◕‿‿◕</a>\n\n<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />`}
68+
</pre>
69+
For more examples, check out the{' '}
70+
<b>
71+
<a href="docs/category/examples">React-Tooltip documentation</a>.
72+
</b>
73+
</div>
74+
75+
<h2>1. Uploading the project to GitHub</h2>
76+
<p>
77+
Your project needs to be hosted on GitHub for easy integration with DigitalOcean.
78+
Here&apos;s how to do it:
79+
</p>
80+
<ol>
81+
<li>Create a new repository on GitHub and copy the repository URL.</li>
82+
<li>
83+
In your terminal, add the GitHub repository as a remote in your project folder:
84+
<pre style={{ background: '#f4f4f4', padding: '1rem', borderRadius: '4px' }}>
85+
git remote add origin https://github.com/your-username/your-repo.git
86+
</pre>
87+
</li>
88+
<li>
89+
Commit any pending changes and push your code to the <code>main</code> branch:
90+
<pre style={{ background: '#f4f4f4', padding: '1rem', borderRadius: '4px' }}>
91+
git add .{'\n'}
92+
git commit -m &quot;Initial commit&quot;{'\n'}
93+
git push -u origin main
94+
</pre>
95+
</li>
96+
</ol>
97+
98+
<h2>2. Setting up DigitalOcean App Platform</h2>
99+
<p>DigitalOcean App Platform makes it easy to deploy static sites. Follow these steps:</p>
100+
<ol>
101+
<li>
102+
Log in to your{' '}
103+
<a href="https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge/">
104+
DigitalOcean
105+
</a>{' '}
106+
account or sign up for a new account.
107+
<img
108+
src={DigitalOceanLogin}
109+
alt="DigitalOcean Login"
110+
style={{
111+
width: '100%',
112+
maxWidth: '100%',
113+
height: 'auto',
114+
marginTop: '1rem',
115+
marginBottom: '1rem',
116+
}}
117+
/>
118+
</li>
119+
<li>
120+
On the dashboard, click <strong>Create</strong> and select <strong>Apps</strong>.
121+
<img
122+
src={DigitalOceanCreateApp}
123+
alt="DigitalOcean Create App"
124+
style={{
125+
width: '100%',
126+
maxWidth: '100%',
127+
height: 'auto',
128+
marginTop: '1rem',
129+
marginBottom: '1rem',
130+
}}
131+
/>
132+
</li>
133+
<li>
134+
Connect your GitHub account to DigitalOcean by following the on-screen instructions.
135+
</li>
136+
<li>
137+
Select your repository and branch. Usually, the <code>main</code> branch is used for
138+
production.
139+
<img
140+
src={DigitalOceanAppConfig1}
141+
alt="DigitalOcean App config pt.1"
142+
style={{
143+
width: '100%',
144+
maxWidth: '100%',
145+
height: 'auto',
146+
marginTop: '1rem',
147+
marginBottom: '1rem',
148+
}}
149+
/>
150+
</li>
151+
<li>
152+
Specify the build output directory as <code>build/</code>, which is the default output
153+
folder for React projects.
154+
<img
155+
src={DigitalOceanAppConfig2}
156+
alt="DigitalOcean App config pt.2"
157+
style={{
158+
width: '100%',
159+
maxWidth: '100%',
160+
height: 'auto',
161+
marginTop: '1rem',
162+
marginBottom: '1rem',
163+
}}
164+
/>
165+
</li>
166+
<li>
167+
Choose your deployment plan. You can have up to 3 static sites on free tier.
168+
<img
169+
src={DigitalOceanStaticSite}
170+
alt="DigitalOcean Static Site"
171+
style={{
172+
width: '100%',
173+
maxWidth: '100%',
174+
height: 'auto',
175+
marginTop: '1rem',
176+
marginBottom: '1rem',
177+
}}
178+
/>
179+
</li>
180+
<li>
181+
Click <strong>Create Resources</strong> and wait for the process to complete.
182+
<img
183+
src={DigitalOceanCreateResource}
184+
alt="DigitalOcean Create Resource"
185+
style={{
186+
width: '100%',
187+
maxWidth: '100%',
188+
height: 'auto',
189+
marginTop: '1rem',
190+
marginBottom: '1rem',
191+
}}
192+
/>
193+
</li>
194+
</ol>
195+
196+
<p>
197+
After the deployment finishes, DigitalOcean will provide a URL for your live site. Visit
198+
this URL and enjoy your live site!
199+
</p>
200+
201+
<h2>Support</h2>
202+
<p>If you run into any issues, refer to:</p>
203+
<ul>
204+
<li>
205+
The <a href="https://www.digitalocean.com/docs/">DigitalOcean Documentation</a>
206+
</li>
207+
<li>
208+
The <a href="docs/category/examples">React-Tooltip Documentation</a>
209+
</li>
210+
</ul>
211+
</div>
212+
</main>
213+
</Layout>
214+
)
215+
}

‎docs/static/img/digital-ocean-app-config-1.png

37.2 KB
Loading

‎docs/static/img/digital-ocean-app-config-2.png

33.4 KB
Loading

‎docs/static/img/digital-ocean-banner.webp

28.5 KB
Binary file not shown.

‎docs/static/img/digital-ocean-create-app.webp

35.8 KB
Binary file not shown.

‎docs/static/img/digital-ocean-create-resource.png

32.7 KB
Loading

‎docs/static/img/digital-ocean-login.webp

35 KB
Binary file not shown.

‎docs/static/img/digital-ocean-static-site.png

38.7 KB
Loading

0 commit comments

Comments
 (0)