Quick Start
Create a ProjectEdit a PageLink to a PageSet a TemplatePrepare for SEOPublish to the WebSet up a Custom DomainBasics
Project StructureMarkdownJSXMDXMarkdocES ModulesCSS StylingTailwind CSSMetadataLayout and Design
LayoutsTemplatesResponsive DesignsUsing ColorsTypographyMathematicsPublishing
SEO and SharingCustom DomainsAnalyticsSitemapsFaviconsGuides
WebflowNotionFramerConfiguration
motif.jsontailwind.config.jsmain.cssApp
Keyboard ShortcutsSlash CommandsInstant SearchOffline AccessDistraction-Free WritingReal-Time CollaborationDesktop AppAdvanced
Motif APILet's create a new page, and link to it from our Index page. First, let's create a folder named Posts. Hit the + button at the bottom of the project sidebar, and select New folder. Alternatively, hit ⌘⇧N.
Once created, make sure that the folder is selected in the sidebar, and hit the + button again, this time selecting New file (or hit ⌘N). Let's name our file My first post.
Your project should have the following structure:
If you didn't create the new page in the Posts folder, you can simply drag it into the folder.
Motif uses file-based routing. This means that the route of a page is determined by its file name, and the folder it's in. Routes are lowercased, and spaces are replaced with dashes. For instance:
/
route./posts/my-first-post
route.Now, back to our Index page, let's add a link to our new page. Links in Markdown are created using the [Label](url)
syntax.
To make it easier to input, links can be created using the slash command
/link
, or using the ⌘K shortcut.
For pages belonging to the same project, we don't need to add the full page URL – we can simply add the route of the page. So the link to our new page can be of the form [My first post](/posts/my-first-post)
.
# Welcome to Motif!
[My first post](/posts/my-first-post)
In our new page, let's add the following content, with a link back to the home page:
# My first post
[Back home](/)
Next, let's change the layout of our posts page using a different template →
© 2022 Motif Land Inc. All rights reserved. This site is built with Motif.