diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 61ec70be..74efcaba 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -157,6 +157,10 @@ const config = { label: 'Getting Started', to: '/docs/getting-started', }, + { + label: 'Deploying to DigitalOcean', + to: '/blog/digital-ocean-app-platform', + }, ], }, // { diff --git a/docs/react-app-env.d.ts b/docs/react-app-env.d.ts new file mode 100644 index 00000000..5afd2510 --- /dev/null +++ b/docs/react-app-env.d.ts @@ -0,0 +1,5 @@ +declare module '*.png' +declare module '*.svg' +declare module '*.jpeg' +declare module '*.jpg' +declare module '*.webp' diff --git a/docs/src/components/HomepageSponsored/index.tsx b/docs/src/components/HomepageSponsored/index.tsx index 184acd6b..03b97880 100644 --- a/docs/src/components/HomepageSponsored/index.tsx +++ b/docs/src/components/HomepageSponsored/index.tsx @@ -15,6 +15,7 @@ type FeatureItem = { eventTitle?: string link: string allowsDarkMode?: boolean + extraLink?: string } type SponsorItem = FeatureItem & { @@ -26,6 +27,7 @@ const FeatureList: FeatureItem[] = [ title: 'Digital Ocean', Svg: require('@site/static/img/digital-ocean-powered-by.svg').default, link: 'https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge', + extraLink: '/blog/digital-ocean-app-platform', }, { title: 'Algolia', @@ -52,10 +54,10 @@ const SponsorList: SponsorItem[] = [ // }, ] -function Feature({ title, Svg, link, allowsDarkMode }: FeatureItem) { +function Feature({ title, Svg, link, allowsDarkMode, extraLink }: FeatureItem) { return (
-
+
+ {extraLink && ( + + Learn more about {title} + + )}
) diff --git a/docs/src/components/HomepageSponsored/styles.module.css b/docs/src/components/HomepageSponsored/styles.module.css index 512e506c..51e2dd39 100644 --- a/docs/src/components/HomepageSponsored/styles.module.css +++ b/docs/src/components/HomepageSponsored/styles.module.css @@ -20,6 +20,11 @@ gap: 21px; } +.feature-item { + display: flex; + flex-direction: column; +} + @media screen and (min-width: 1024px) { .features { display: flex; diff --git a/docs/src/pages/blog/digital-ocean-app-platform.tsx b/docs/src/pages/blog/digital-ocean-app-platform.tsx new file mode 100644 index 00000000..a8ab6e90 --- /dev/null +++ b/docs/src/pages/blog/digital-ocean-app-platform.tsx @@ -0,0 +1,207 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +/* eslint-disable import/no-unresolved */ +import React from 'react' +import Layout from '@theme/Layout' +import DigitalOceanBanner from '@site/static/img/digital-ocean-banner.webp' +import DigitalOceanLogin from '@site/static/img/digital-ocean-login.webp' +import DigitalOceanCreateApp from '@site/static/img/digital-ocean-create-app.webp' +import DigitalOceanAppConfig1 from '@site/static/img/digital-ocean-app-config-1.png' +import DigitalOceanAppConfig2 from '@site/static/img/digital-ocean-app-config-2.png' +import DigitalOceanStaticSite from '@site/static/img/digital-ocean-static-site.png' +import DigitalOceanCreateResource from '@site/static/img/digital-ocean-create-resource.png' +import { Tooltip } from 'react-tooltip' + +export default function Home(): JSX.Element { + return ( + +
+
+ DigitalOcean banner + +

How to Deploy a Static Site on DigitalOcean

+

+ This guide walks you through deploying a static React site + React-Tooltip library, + using DigitalOcean's App Platform. Follow these steps to get your site live quickly + and easy! +

+ +
+

Examples of Using React-Tooltip

+

1. Basic Tooltip

+

This example demonstrates a simple tooltip:

+ + 
+              {`import {Tooltip} from 'react-tooltip';\n\n◕‿‿◕\n\n`}
+
+ For more examples, check out the{' '} + + React-Tooltip documentation. + +
+ +

1. Uploading the project to GitHub

+

+ Your project needs to be hosted on GitHub for easy integration with DigitalOcean. + Here's how to do it: +

+
    +
  1. Create a new repository on GitHub and copy the repository URL.
    2. +
  2. + In your terminal, add the GitHub repository as a remote in your project folder: + 
    +                git remote add origin https://github.com/your-username/your-repo.git
+
    +
    3. +
  3. + Commit any pending changes and push your code to the main branch: + 
    +                git add .{'\n'}
+                git commit -m "Initial commit"{'\n'}
+                git push -u origin main
+
    +
    4. +
+ +

2. Setting up DigitalOcean App Platform

+

DigitalOcean App Platform makes it easy to deploy static sites. Follow these steps:

+
    +
  1. + Log in to your{' '} + + DigitalOcean + {' '} + account or sign up for a new account. + DigitalOcean Login +
    2. +
  2. + On the dashboard, click Create and select Apps. + DigitalOcean Create App +
    3. +
  3. + Connect your GitHub account to DigitalOcean by following the on-screen instructions. +
    4. +
  4. + Select your repository and branch. Usually, the main branch is used for + production. + DigitalOcean App config pt.1 +
    5. +
  5. + Specify the build output directory as build/, which is the default output + folder for React projects. + DigitalOcean App config pt.2 +
    6. +
  6. + Choose your deployment plan. You can have up to 3 static sites on free tier. + DigitalOcean Static Site +
    7. +
  7. + Click Create Resources and wait for the process to complete. + DigitalOcean Create Resource +
    8. +
+ +

+ After the deployment finishes, DigitalOcean will provide a URL for your live site. Visit + this URL and enjoy your live site! +

+ +

Support

+

If you run into any issues, refer to:

+ +
+
+ + ) +} diff --git a/docs/static/img/digital-ocean-app-config-1.png b/docs/static/img/digital-ocean-app-config-1.png new file mode 100644 index 00000000..1ed3a3ef Binary files /dev/null and b/docs/static/img/digital-ocean-app-config-1.png differ diff --git a/docs/static/img/digital-ocean-app-config-2.png b/docs/static/img/digital-ocean-app-config-2.png new file mode 100644 index 00000000..ebd63dab Binary files /dev/null and b/docs/static/img/digital-ocean-app-config-2.png differ diff --git a/docs/static/img/digital-ocean-banner.webp b/docs/static/img/digital-ocean-banner.webp new file mode 100644 index 00000000..93bd2bd1 Binary files /dev/null and b/docs/static/img/digital-ocean-banner.webp differ diff --git a/docs/static/img/digital-ocean-create-app.webp b/docs/static/img/digital-ocean-create-app.webp new file mode 100644 index 00000000..aceb0705 Binary files /dev/null and b/docs/static/img/digital-ocean-create-app.webp differ diff --git a/docs/static/img/digital-ocean-create-resource.png b/docs/static/img/digital-ocean-create-resource.png new file mode 100644 index 00000000..77fcc1d8 Binary files /dev/null and b/docs/static/img/digital-ocean-create-resource.png differ diff --git a/docs/static/img/digital-ocean-login.webp b/docs/static/img/digital-ocean-login.webp new file mode 100644 index 00000000..fb93f3e5 Binary files /dev/null and b/docs/static/img/digital-ocean-login.webp differ diff --git a/docs/static/img/digital-ocean-static-site.png b/docs/static/img/digital-ocean-static-site.png new file mode 100644 index 00000000..2b812440 Binary files /dev/null and b/docs/static/img/digital-ocean-static-site.png differ