docs: update templates
This commit is contained in:
Daniel Lautzenheiser
parent
b1ec3aaa11
commit
dfb5eaf0ed
@ -6,224 +6,38 @@ weight: 2
|
||||
|
||||
You can add Static CMS [to an existing site](/docs/add-to-your-site/), but the quickest way to get started is with a template. Found below, our featured templates deploy a bare-bones site and Static CMS to Netlify, giving you a fully working CMS-enabled site with just a few clicks.
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '24px' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<img style={{ display: 'flex', height: '100%' }} src="/img/hugo.svg" />
|
||||
</div>
|
||||
<h5 style={{ margin: 0 }}>Hugo Site Starter</h5>
|
||||
<p style={{ margin: 0 }}>
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-hugo-netlify-template&stack=cms">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<img style={{ display: 'flex', height: '100%' }} src="/img/gatsby.svg" />
|
||||
</div>
|
||||
<h5 style={{ margin: 0 }}>Gatsby Site Starter</h5>
|
||||
<p style={{ margin: 0 }}>
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-gatsby-netlify-template&stack=cms">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<img style={{ display: 'flex', height: '100%' }} src="/img/middleman.svg" />
|
||||
</div>
|
||||
<h5 style={{ margin: 0 }}>Middleman Site Starter</h5>
|
||||
<p style={{ margin: 0 }}>
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-middleman-netlify-template&stack=cms">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<img style={{ display: 'flex', height: '100%' }} src="/img/preact.svg" />
|
||||
</div>
|
||||
<h5 style={{ margin: 0 }}>Preact CLI</h5>
|
||||
<p style={{ margin: 0 }}>
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-preact-netlify-template&stack=cms">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<img style={{ display: 'flex', height: '100%' }} src="/img/nextjs.svg" />
|
||||
</div>
|
||||
<h5 style={{ margin: 0 }}>Next.js Blog Template</h5>
|
||||
<p style={{ margin: 0 }}>
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-nextjs-netlify-blog-template&stack=cms">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<img style={{ display: 'flex', height: '100%' }} src="/img/11ty-logo.svg" />
|
||||
</div>
|
||||
<h5 style={{ margin: 0 }}>Eleventy Starter</h5>
|
||||
<p style={{ margin: 0 }}>
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-eleventy-netlify-template&stack=cms">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<img style={{ display: 'flex', height: '100%' }} src="/img/nuxt.svg" />
|
||||
</div>
|
||||
<h5 style={{ margin: 0 }}>Nuxt.js Boilerplate</h5>
|
||||
<p style={{ margin: 0 }}>
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-nuxt-netlify-template&stack=cms">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<img style={{ display: 'flex', height: '100%' }} src="/img/metalsmith.svg" />
|
||||
</div>
|
||||
<h5 style={{ margin: 0 }}>Metalsmith Starter</h5>
|
||||
<p style={{ margin: 0 }}>
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-metalsmith-netlify-template&stack=cms">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Templates>
|
||||
<Template
|
||||
title="Hugo Site Starter"
|
||||
image="/img/hugo.svg"
|
||||
url="https://github.com/StaticJsCMS/static-cms-hugo-netlify-template"
|
||||
/>
|
||||
<Template
|
||||
title="Gatsby Site Starter"
|
||||
image="/img/gatsby.svg"
|
||||
url="https://github.com/StaticJsCMS/static-cms-gatsby-netlify-template"
|
||||
/>
|
||||
<Template
|
||||
title="Preact CLI"
|
||||
image="/img/preact.svg"
|
||||
url="https://github.com/StaticJsCMS/static-cms-preact-netlify-template"
|
||||
/>
|
||||
<Template
|
||||
title="Next.js Blog Template"
|
||||
image="/img/nextjs.svg"
|
||||
url="https://github.com/StaticJsCMS/static-cms-next-netlify-template"
|
||||
/>
|
||||
<Template
|
||||
title="Eleventy Starter"
|
||||
image="/img/11ty-logo.svg"
|
||||
url="https://github.com/StaticJsCMS/static-cms-eleventy-netlify-template"
|
||||
/>
|
||||
<Template
|
||||
title="Nuxt.js Boilerplate"
|
||||
image="/img/nuxt.svg"
|
||||
url="https://github.com/StaticJsCMS/static-cms-nuxt-netlify-template"
|
||||
/>
|
||||
</Templates>
|
||||
|
||||
After clicking one of those buttons, authenticate with GitHub and choose a repository name. Netlify then automatically creates a clone of the repository in your GitHub account. Next, it builds and deploys the new site on Netlify, bringing you to the site dashboard after completing the build.
|
||||
|
||||
|
||||
66
packages/docs/src/components/docs/components/Template.tsx
Normal file
66
packages/docs/src/components/docs/components/Template.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import Box from '@mui/material/Box';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface TemplateProps {
|
||||
image: string;
|
||||
title: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
const Template = ({ image, title, url }: TemplateProps) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component={Link}
|
||||
href={url}
|
||||
target="_blank"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Image width={120} height={120} src={image} alt={title} />
|
||||
</Box>
|
||||
<Box component="h5" style={{ marginTop: 0, marginBottom: 0 }}>
|
||||
{title}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Link
|
||||
href={`https://app.netlify.com/start/deploy?repository=${url}&stack=cms`}
|
||||
target="_blank"
|
||||
>
|
||||
<Image
|
||||
width={146}
|
||||
height={32}
|
||||
src="https://www.netlify.com/img/deploy/button.svg"
|
||||
alt="Deploy to Netlify"
|
||||
/>
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Template;
|
||||
24
packages/docs/src/components/docs/components/Templates.tsx
Normal file
24
packages/docs/src/components/docs/components/Templates.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
interface TemplatesProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const Templates = ({ children }: TemplatesProps) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
|
||||
gap: '24px',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Templates;
|
||||
@ -19,6 +19,8 @@ import TableBody from '../../components/docs/components/table/TableBody';
|
||||
import TableBodyCell from '../../components/docs/components/table/TableBodyCell';
|
||||
import TableHead from '../../components/docs/components/table/TableHead';
|
||||
import TableHeaderCell from '../../components/docs/components/table/TableHeaderCell';
|
||||
import Template from '../../components/docs/components/Template';
|
||||
import Templates from '../../components/docs/components/Templates';
|
||||
import DocsContent from '../../components/docs/DocsContent';
|
||||
import DocsLeftNav from '../../components/docs/DocsLeftNav';
|
||||
import DocsRightNav from '../../components/docs/DocsRightNav';
|
||||
@ -128,6 +130,8 @@ const Docs = ({
|
||||
a: Anchor,
|
||||
CodeTabs,
|
||||
Alert,
|
||||
Template,
|
||||
Templates,
|
||||
}}
|
||||
/>
|
||||
</DocsContent>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user