Skip to content

Commit

Permalink
style: add padding between text and images on getting started and inc…
Browse files Browse the repository at this point in the history
…lude necessary subheaders (#214)

## Why?

Text blocks and paragraphs on the "Getting started" page were getting
choked up between images and were generally too close to images. This
fix makes things look way more appealing. This PR adds subheaders that
were not formerly visible in the right-hand-side content navigation.


## Contribution checklist?

- [x] The commit messages are detailed
- [x] The `build` command runs locally
- [x] Assets or static content are linked and stored in the project
- [x] Document filename is named after the slug
- [x] You've reviewed spelling using a grammar checker
- [x] For documentation, guides or references, you've tested the
commands and steps
- [x] You've done enough research before writing
  • Loading branch information
tobySolutions authored Sep 13, 2024
1 parent 4e889a8 commit d6f8abb
Showing 1 changed file with 11 additions and 2 deletions.
13 changes: 11 additions & 2 deletions src/content/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import ButtonGray from '@components/ButtonGray';

![](./docs-hero-fleek.svg)

# What is Fleek?
## What is Fleek?

Fleek is an onchain edge-optimized cloud platform that allows users to build, host, and deploy websites and applications efficiently, empowering developers to create fast and high-performing apps.

Expand All @@ -25,7 +25,7 @@ Below are a few resources to help you get started with Fleek. Whether you're new

<div className="my-12 bg-gray-dark-6 p-[1px]" />

# Host an app
## Host an app

Learn how to host a React app and a Fleek template app in Astro on Fleek using the Fleek platform app. You will need to have an account on the [Fleek app](https://app.fleek.xyz) to follow the steps below.

Expand Down Expand Up @@ -61,12 +61,15 @@ Fleek supports static sites currently. SSR support is a work in progress and is
4. Push your app to Github
5. Go to the [Fleek app](https://app.fleek.xyz/) and go to `Settings` and click on "Git Integrations"
6. Ensure that you install both of the Github applications and that they both have the "Active" badge as below. They are important for any deployment from Fleek:

![Github integration active](./git-integration.png)

7. Go to the "Sites" tab, click on "Add new" and select the Github repository where your app is hosted
8. Ensure everything is correct with the build settings and click on "Deploy site". The correct build settings for a React app are:
- Build command: `npm run dev && npm run build`
- Publish directory: `dist`
9. Your site has been deployed and you can access it by clicking on the "Visit site" button:

![deployed website fleek page](./deployed-site.png)

### Host a Fleek template app
Expand All @@ -76,11 +79,16 @@ Deploy a Fleek template app in Astro on Fleek using the Fleek platform app.
1. Go to the [Fleek app](https://app.fleek.xyz/) and go to the "Sites" tab
2. Click on "Add new" and from the dropdown, select the "Use a template" option and it takes you to the templates page
3. Search for the "Astro Boilerplate" template and click on it

![Astro template page](./astro-template.png)

4. Select Github. Ensure you have your Github account connected, as in the Github integration step 6 in the React app section
5. You get a page you can customize the name that Fleek is to create and the account the Github account you connected earlier appears as well. You can choose if you want the repository private or public.

![Create and deploy](./create-and-deploy.png)

6. Fleek will start the deployment process and you can see the progress in the "Deploys" tab. Once the deployment is complete, you can access the site by clicking on the "Visit site" button.

![deployed astro site](./deployed-astro-site.png)

<div className="my-12 bg-gray-dark-6 p-[1px]" />
Expand Down Expand Up @@ -180,6 +188,7 @@ For this quick start, we will deploy a simple function that returns an "hello wo
1. On the project’s dashboard, click on the “Functions” button on the secondary navigation

2. Click on the “Create function” button on the extreme right-hand of the secondary navigation and a modal pops up:

![demo function name](./demo-function.png)

3. Go through the steps (from step 1 through to step 4) and follow the instructions per step
Expand Down

0 comments on commit d6f8abb

Please sign in to comment.