You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: fern/products/docs/pages/getting-started/how-it-works.mdx
+96-90Lines changed: 96 additions & 90 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,80 +5,86 @@ description: Learn how Fern transforms your API specifications and documentation
5
5
6
6
Fern combines your API specifications, static Markdown files (like how-to guides and tutorials), media assets (images, videos, etc.), and custom settings defined in your `docs.yml` file to generate a beautiful, interactive hosted documentation site.
7
7
8
+
9
+
<Calloutintent="info">
10
+
Content
11
+
</Callout>
12
+
13
+
8
14
This process is built around two major workflows: **editing** and **deploying** your documentation.
9
15
10
16
<Accordiontitle="System architecture">
11
-
12
-
This diagram shows the technical infrastructure that powers the documentation generation process.
13
-
14
-
```mermaid
15
-
flowchart TD
16
-
%% Input sources at the top
17
-
subgraph inputs ["Input Sources"]
18
-
API["API Specs"]
19
-
DOCS["Docs.yml"]
20
-
MDX["MDX files"]
21
-
MEDIA["Media content"]
22
-
end
23
-
24
-
%% Generation process
25
-
GENERATE[["fern generate<br/>--docs"]]
26
-
27
-
%% AWS VPC section
28
-
subgraph vpc ["Fern AWS VPC"]
29
-
direction LR
30
-
MICROSERVICE["Fern Docs<br/>microservice"]
31
-
DATABASE[("Database")]
32
-
S3[("S3")]
33
-
end
34
-
35
-
%% External services
36
-
SERVICES["External Services<br/>(UpStash, Algolia, PostHog,<br/>TurboPuffer, AI Inference)"]
37
-
38
-
%% Vercel hosting
39
-
subgraph vercel ["Vercel"]
40
-
direction LR
41
-
STATIC["Static site"]
42
-
EXPLORER["API explorer"]
43
-
EDGE["Vercel Edge<br/>(Middleware)"]
44
-
end
45
-
46
-
%% External connections as hexagons
47
-
CLOUDFLARE{{"Cloudflare (CORS)"}}
48
-
WORKOS{{"WorkOS"}}
49
-
CUSTOMER{{"Customer API"}}
50
-
51
-
USER(("User"))
52
-
53
-
%% Vertical flow connections
54
-
API --> GENERATE
55
-
DOCS --> GENERATE
56
-
MDX --> GENERATE
57
-
MEDIA --> GENERATE
58
-
59
-
GENERATE --> MICROSERVICE
60
-
MICROSERVICE --> SERVICES
61
-
SERVICES <--> STATIC
62
-
63
-
STATIC --> CLOUDFLARE
64
-
EXPLORER <--> CLOUDFLARE
65
-
EDGE <--> WORKOS
66
-
67
-
CLOUDFLARE --> CUSTOMER
68
-
EDGE <--> USER
69
-
70
-
%% Internal connections
71
-
MICROSERVICE -.-> DATABASE
72
-
MICROSERVICE -.-> S3
73
-
```
17
+
This diagram shows the technical infrastructure that powers the documentation generation process.
18
+
19
+
```
20
+
flowchart TD
21
+
%% Input sources at the top
22
+
subgraph inputs ["Input Sources"]
23
+
API["API Specs"]
24
+
DOCS["Docs.yml"]
25
+
MDX["MDX files"]
26
+
MEDIA["Media content"]
27
+
end
28
+
29
+
%% Generation process
30
+
GENERATE[["fern generate<br/>--docs"]]
31
+
32
+
%% AWS VPC section
33
+
subgraph vpc ["Fern AWS VPC"]
34
+
direction LR
35
+
MICROSERVICE["Fern Docs<br/>microservice"]
36
+
DATABASE[("Database")]
37
+
S3[("S3")]
38
+
end
39
+
40
+
%% External services
41
+
SERVICES["External Services<br/>(UpStash, Algolia, PostHog,<br/>TurboPuffer, AI Inference)"]
42
+
43
+
%% Vercel hosting
44
+
subgraph vercel ["Vercel"]
45
+
direction LR
46
+
STATIC["Static site"]
47
+
EXPLORER["API explorer"]
48
+
EDGE["Vercel Edge<br/>(Middleware)"]
49
+
end
50
+
51
+
%% External connections as hexagons
52
+
CLOUDFLARE{{"Cloudflare (CORS)"}}
53
+
WORKOS{{"WorkOS"}}
54
+
CUSTOMER{{"Customer API"}}
55
+
56
+
USER(("User"))
57
+
58
+
%% Vertical flow connections
59
+
API --> GENERATE
60
+
DOCS --> GENERATE
61
+
MDX --> GENERATE
62
+
MEDIA --> GENERATE
63
+
64
+
GENERATE --> MICROSERVICE
65
+
MICROSERVICE --> SERVICES
66
+
SERVICES <--> STATIC
67
+
68
+
STATIC --> CLOUDFLARE
69
+
EXPLORER <--> CLOUDFLARE
70
+
EDGE <--> WORKOS
71
+
72
+
CLOUDFLARE --> CUSTOMER
73
+
EDGE <--> USER
74
+
75
+
%% Internal connections
76
+
MICROSERVICE -.-> DATABASE
77
+
MICROSERVICE -.-> S3
78
+
```
74
79
</Accordion>
75
80
81
+
76
82
## Content workflows
77
83
78
84
You can update your documentation in two ways:
79
85
80
-
-**Direct editing**: Open a pull request directly in the [GitHub repository that contains your docs](/learn/docs/getting-started/project-structure) (including your `docs.yml` configuration and Markdown files).
81
-
-**Fern Editor**: Use the [Fern Editor](/learn/docs/writing-content/fern-editor) to modify your docs without touching code. The Fern GitHub App fetches the current state from your docs repository and passes it to the Fern Editor. When you submit changes, the Fern GitHub App automatically opens a pull request for review.
86
+
-**Direct editing**: Open a pull request directly in the [GitHub repository that contains your docs](/learn/docs/getting-started/project-structure) (including your `docs.yml` configuration and Markdown files).
87
+
-**Fern Editor**: Use the [Fern Editor](/learn/docs/writing-content/fern-editor) to modify your docs without touching code. The Fern GitHub App fetches the current state from your docs repository and passes it to the Fern Editor. When you submit changes, the Fern GitHub App automatically opens a pull request for review.
82
88
83
89
After the update goes through your review process, an approver can merge it.
84
90
@@ -115,29 +121,29 @@ The deployed documentation site integrates with external systems like Cloudflare
115
121
</Steps>
116
122
117
123
<Accordiontitle="Editing and deployment workflows">
118
-
119
-
This diagram shows how content flows from editing to deployment.
0 commit comments