diff --git a/fern/products/docs/pages/getting-started/quickstart.mdx b/fern/products/docs/pages/getting-started/quickstart.mdx index db7de402d..3746effc4 100644 --- a/fern/products/docs/pages/getting-started/quickstart.mdx +++ b/fern/products/docs/pages/getting-started/quickstart.mdx @@ -1,206 +1,270 @@ --- title: Quickstart -subtitle: Start building beautiful documentation in under 5 minutes +description: Start building beautiful documentation in under 5 minutes --- -With Fern, you can build beautiful developer documentation that matches your brand. Fern supports writing pages (written in Markdown) and generating API Reference documentation (from an OpenAPI Specification). +Build beautiful developer documentation that [matches your brand](https://buildwithfern.com/customers) with Fern. Fern supports writing pages in Markdown and generating API Reference documentation from an OpenAPI Specification. -In this guide, we'll show you how to get started with Fern in under 5 minutes. +Follow this guide to get started with Fern in under 5 minutes. + + + Migrating from existing documentation? Fern provides a white-glove migration service as part of the Enterprise plan. [Reach out here](https://buildwithfern.com/contact). + - - - All the configurations for your docs live in the `fern` folder. Inside, you'll - find a `docs.yml` file that contains all the settings for your documentation. + - - - Get started by cloning the [starter template](https://github.com/fern-api/docs-starter). - - - ```bash title="SSH" - git clone git@github.com:fern-api/docs-starter.git - ``` - ```bash title="HTTPS" - git clone https://github.com/fern-api/docs-starter.git - ``` - - - Next, please update the template settings to use your organization. - - - Edit the details in `fern.config.json` and `docs.yml` with your organization - name. - - - - ```json {2} - { - "organization": "{{YOUR_ORGANIZATION}}", - "version": "" - } - ``` - - - ```yml {2} - instances: - - url: {{YOUR_ORGANIZATION}}.docs.buildwithfern.com - ``` - - - - See the [fern.config.json reference](/learn/sdks/overview/project-structure#fernconfigjson) for more details. - - Finally, once you have [The Fern CLI](/learn/cli-api-reference/cli-reference/overview) installed, navigate to the docs directory (where the `fern` folder is located) and execute the following command to generate your documentation: - - ```bash - fern generate --docs - ``` - - - If you prefer, you can use our CLI to create a new project. Install the CLI - by running + Install the [Fern CLI](/learn/cli-api-reference/cli-reference/overview) so you can manage your project from the command line: - ```bash - npm install -g fern-api - ``` + ```bash + npm install -g fern-api + ``` + + - Then run + All the configuration for your docs lives in the `fern` folder. Create a fern folder by either using the [starter template](https://github.com/fern-api/docs-starter) or starting from scratch - ```bash - fern init --docs + + + + + ```bash title="SSH" + git clone git@github.com:fern-api/docs-starter.git + ``` + ```bash title="HTTPS" + git clone https://github.com/fern-api/docs-starter.git ``` + + + You'll see a basic site with a `fern` folder that contains an API definition, Markdown pages, and configuration files. [View the live example](https://plantstore.dev/welcome) to see what the starter template looks like when published. You can use these files to test out Fern's features, or replace them with your own files. + + + + + + + + + + + + + + + + + + + + + + + + + + + + - You will see a new `fern` folder in your project with the following structure: + ```bash + fern init --docs + ``` - - - - - - - Finally, navigate to the docs directory (where the `fern` folder is located) and execute the following command to generate your documentation: + You'll see a new `fern` folder in your project with the following configuration files (but no additional Markdown or API definition files): - ```bash - fern generate --docs - ``` + + + + + + - + + + Configure two settings (these values don't have to match): + + - **Organization name** in `fern.config.json`: Identifies your organization in the Fern system (including the [Fern Dashboard](https://dashboard.buildwithfern.com/)) + - **Docs URL** in `docs.yml`: Determines where your docs are published - + + + ```json {2} + { + "organization": "{{YOUR_ORGANIZATION}}", + "version": "" + } + ``` + + + ```yml {2} + instances: + - url: {{YOUR_DOMAIN}}.docs.buildwithfern.com + ``` + - We provide a white-glove migration service as part of our Enterprise plan. Interested? Request it - [here](https://buildwithfern.com/contact). + Use only alphanumeric characters, hyphens, and underscores for both values. + + + + Now that you have a basic docs site, you can customize it by adding tutorials, generating an API Reference, or finetuning the branding. (Or skip ahead to [preview](#preview-your-docs) and [publish](#publish-to-production).) - Add content with MDX files. - - ```markdown - --- - title: "Page Title" - description: "Subtitle (optional)" - --- - - Hello world! - ``` - - Fern supports [GitHub flavored Markdown (GFM)](https://github.github.com/gfm/) within MDX files, no plugin required. - - - In order for the Markdown page to show up, you'll need to reference them from your `docs.yml` file. You - can reference the Markdown page within a section or as a standalone page. - - ```yml - navigation: - - page: Hello World - path: docs/pages/hello-world.mdx - - section: Overview - contents: - - page: QuickStart - path: docs/pages/hello-world.mdx - ``` + Create Markdown (`.mdx`) files and fill them in. Read the [Markdown basics](/learn/docs/writing-content/markdown-basics) documentation to learn more. + + + Fern supports [GitHub flavored Markdown (GFM)](https://github.github.com/gfm/) within MDX files, no plugin required. You can also create [reusable snippets](/learn/docs/writing-content/reusable-snippets) to share content across multiple pages. + + + ```markdown docs/pages/hello-world.mdx + --- + title: "Page Title" + description: "Subtitle (optional)" + --- + + Hello world! + ``` + + Reference your new pages from your `docs.yml` file. You can reference the + Markdown page within a section or as a standalone page. + + ```yml docs.yml + navigation: + - page: Hello World + path: docs/pages/hello-world.mdx + - section: Overview + contents: + - page: Getting Started + path: docs/pages/getting-started.mdx + ``` - Add an API Reference by adding an OpenAPI Specification to your project. - ```bash - fern init --openapi /path/to/openapi.yml - ``` + If you cloned the starter template, you already have an `openapi.yaml` file with sample API definitions. If you started from scratch, add your OpenAPI spec: - This will create an `openapi.yml` file in your project. You can reference this file in your - `docs.yml` file by adding an api block. + ```bash + fern init --openapi /path/to/openapi.yml + ``` - ```yml - navigation: - - api: "API Reference" - ``` + Reference your API definition in the `docs.yml` file to [generate API Reference documentation](/learn/docs/api-references/generate-api-ref): + + ```yml docs.yml + navigation: + - api: "API Reference" + ``` - All of the branding for your docs can be configured in the `docs.yml` file. - For example, to set the logos, colors, and fonts for your docs, you can - add the following to your `docs.yml` file: + [Configure all of your site's branding](/learn/docs/configuration/site-level-settings), such as the logo, colors, and font, in the `docs.yml` file. - - ```yml - colors: - accent-primary: - dark: "#f0c193" - light: "#af5f1b" + + ```yml maxLines=7 + colors: + accent-primary: + dark: "#f0c193" + light: "#af5f1b" - logo: - dark: docs/assets/logo-dark.svg - light: docs/assets/logo-light.svg - height: 40 - href: https://buildwithfern.com/ - - favicon: docs/assets/favicon.svg - ``` - + logo: + dark: docs/assets/logo-dark.svg + light: docs/assets/logo-light.svg + height: 40 + href: https://buildwithfern.com/ + favicon: docs/assets/favicon.svg + ``` + - - - - You can preview your docs locally for testing purposes by following the instructions [here](/docs/preview-publish/previewing-changes-locally). - - - `PR previews` offer a way to preview changes from pull requests (PRs) before merging code to a production branch. Learn more [here](/docs/preview-publish/previewing-changes-in-a-pr). - - + + Before publishing, [preview your changes](/docs/preview-publish/previewing-changes-locally) in your local development environment or generate shareable preview links. + + + + + Run the local development server with hot-reloading. Your docs will automatically update as you edit Markdown and OpenAPI files: + + ```bash + fern docs dev + ``` + + + + Generate a preview URL you can share with your team: + + ```bash + fern generate --docs --preview + ``` + + - - - When you are ready for your docs to be publicly accessible, you can publish them using the Fern CLI. [Read more.](/learn/docs/preview-publish/publishing-your-docs) - - - Fern supports hosting your docs website on a custom domain or on a - custom subpath (e.g. `https://example.com/docs`). - Please reach out to the Fern team at support@buildwithfern.com to configure this. - - - Fern supports integrations with a variety of providers such as PostHog, Segment, Intercom, - Google Tag Manager, etc. - Find out more on this [page](/learn/docs/integrations/overview). - + When you're ready for your docs to be publicly accessible, [publish them](/learn/docs/preview-publish/publishing-your-docs): - - - + ```bash + fern generate --docs + ``` + + This command builds your documentation at the URL you configured in `docs.yml` (e.g., `https://yourdomain.docs.buildwithfern.com`). -[View examples of documentation websites](https://buildwithfern.com/customers) that have been published using Fern. + + Use the [Fern Dashboard](http://dashboard.buildwithfern.com) to manage your GitHub repository connection, organization members, and CLI version. Track analytics to understand how developers use your docs. + + + - - Use the [Fern Dashboard](http://dashboard.buildwithfern.com) to manage your GitHub repository connection, organization members (add or remove), and Fern CLI version. You can also view page views and unique visitors to your site. - +## Explore Fern's features + +Now that your docs are live, explore these features to enhance them further. + + + + Use the `docs.yml` file to configure colors, SEO, typography, layouts, and more. + + + Use Fern's built-in components to create interactive, well-organized documentation. + + + Add products, versions, nested sections, tabs, and more. + + + Use the Fern Editor to let non-technical team members edit docs in a WYSIWYG browser interface. + + + Host your docs on your own domain or subdomain (e.g., docs.example.com). + + + Integrate with PostHog, Segment, Intercom, Google Tag Manager, and other platforms. + +