Adding Favicon

Adding Logo & Sitename

Changing Color Scheme

Changing Typography

Creating A Page

Adding a image

Adding Assets

Markdown Primer

Understanding Sitemap

Creating A Page

In this section, we will learn about creating pages in misty-gray.

The page component empowers you to create one-off standalone pages. You can use other fastn components, or markdown.

💡 How to create a new page?

Create a new .ftd file into your fastn project. Add a page component inside .ftd file as shown below.

Click on the download icon of the below code-block. sample.ftd file will be downloaded. Add this file inside your fastn project and deploy or run fastn serve on your localhost. Access your localhost in the browser e.g.http://127.0.0.1:8000/sample/ you will see below page output.

-- ds.page: This is page title

This is body area. It contains multiple paragraphs.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
excepturi sint occaecati cupiditate non provident.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.

-- ds.h1: This is heading level 1

This is heading level 1 optional body content.

-- ds.h2: This is heading level 2

This is heading level 2 optional body content.

-- ds.h3: This is heading level 3

This is heading level 3 optional body content.

-- ds.page: This is page title

This is body area. It contains multiple paragraphs.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
excepturi sint occaecati cupiditate non provident.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.

-- ds.h1: This is heading level 1

This is heading level 1 optional body content.

-- ds.h2: This is heading level 2

This is heading level 2 optional body content.

-- ds.h3: This is heading level 3

This is heading level 3 optional body content.

sample.ftd

Lang:

ftd

On this page

How to create a new page?

Home

Blog

Landing

Fastn

Creating A Page

In this section, we will learn about creating pages in misty-gray.

The page component empowers you to create one-off standalone pages. You can use other fastn components, or markdown.

💡 How to create a new page?

Create a new .ftd file into your fastn project. Add a page component inside .ftd file as shown below.

Click on the download icon of the below code-block. sample.ftd file will be downloaded. Add this file inside your fastn project and deploy or run fastn serve on your localhost. Access your localhost in the browser e.g.http://127.0.0.1:8000/sample/ you will see below page output.

-- ds.page: This is page title

This is body area. It contains multiple paragraphs.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
excepturi sint occaecati cupiditate non provident.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.

-- ds.h1: This is heading level 1

This is heading level 1 optional body content.

-- ds.h2: This is heading level 2

This is heading level 2 optional body content.

-- ds.h3: This is heading level 3

This is heading level 3 optional body content.

-- ds.page: This is page title

This is body area. It contains multiple paragraphs.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
excepturi sint occaecati cupiditate non provident.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.

-- ds.h1: This is heading level 1

This is heading level 1 optional body content.

-- ds.h2: This is heading level 2

This is heading level 2 optional body content.

-- ds.h3: This is heading level 3

This is heading level 3 optional body content.

sample.ftd

Lang:

ftd