CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Get started with Netlify | Netlify Docs</title> <meta name="generator" content="VuePress 1.9.9"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Roboto+Mono:400"> <link rel="icon" href="/netlify-icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32"> <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16"> <script>(function (w) { if (!w) return; const darkQuery = w.matchMedia('(prefers-color-scheme: dark)'); const root = document.documentElement; function setTheme(newTheme) { if (newTheme === 'dark' || (newTheme === 'system' && darkQuery.matches)) { root.classList.add('dark-mode'); } else { root.classList.remove('dark-mode'); } w.__theme = newTheme; } w.__setPreferredTheme = function (newTheme) { setTheme(newTheme); try { localStorage.setItem('nf-docs-theme', w.__theme); } catch (err) {} }; // If using system theme, change colors in real time // in response to user settings darkQuery.addEventListener('change', function (event) { if (w.__theme === 'system') { if (event.matches) { root.classList.add('dark-mode'); } else { root.classList.remove('dark-mode'); } } }); let preferredTheme; // Try to get saved theme try { preferredTheme = localStorage.getItem('nf-docs-theme') || 'system'; } catch (err) {} // Initialize preferredTheme setTheme(preferredTheme); })(window);</script> <script src="/rum.js" data-application-id="ededf59a-7705-4933-b2a0-5efa8b35b293" data-client-token="pub1b84fc7c7429f37e025e8160c02da8bb" data-service="docs" data-env="production" defer="true"></script> <meta name="description" content="Get started with Netlify by deploying a demo project and trying out some key features that help manage sites, stores, or apps."> <meta property="og:title" content="Get started with Netlify"> <meta property="og:url" content="https://docs.netlify.com/get-started/"> <meta property="og:description" content="Get started with Netlify by deploying a demo project and trying out some key features that help manage sites, stores, or apps."> <meta property="og:image" content="https://docs.netlify.com/og-image.png"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta prefix="og: http://ogp.me/ns#" property="og:type" content="article"> <meta prefix="og: http://ogp.me/ns#" property="og:article:author" content="Netlify"> <meta name="google-site-verification" content="G4JqDTXMHpDyWoqIRwgw8PBqg-AncXqtdkHehcOR7kc"> <meta name="slack-app-id" content="A05P27DR8C8"> <link href="https://docs.netlify.com/get-started/" rel="canonical" /> <link rel="preload" href="/assets/css/0.styles.d221ae53.css" as="style"><link rel="preload" href="/assets/js/app.1a68918d.js" as="script"><link rel="preload" href="/assets/js/10.a8fb7bb3.js" as="script"><link rel="preload" href="/assets/js/2.f24e0879.js" as="script"><link rel="preload" href="/assets/js/144.1766af18.js" as="script"><link rel="preload" href="/assets/js/13.7b226c47.js" as="script"><link rel="preload" href="/assets/js/9.01fad13a.js" as="script"><link rel="preload" href="/assets/js/3.be674a14.js" as="script"> <link rel="stylesheet" href="/assets/css/0.styles.d221ae53.css"> </head> <body> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NMKKF2M" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar-header"><div class="navbar"><div class="navbar__logo-link"><a href="/" class="router-link-active"><span class="visuallyhidden">Netlify Docs</span> <svg width="146" height="40" viewBox="0 0 146 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="netlify-lockup" data-v-4ee6c329><path d="M22.794 39.79V29.687l.21-.21h2.526l.21.21V39.79l-.21.209h-2.527l-.209-.21ZM22.794 10.314V.21l.21-.209h2.526l.21.21v10.104l-.21.21h-2.527l-.209-.21ZM14.1 32.687h-.347l-1.738-1.738v-.347l3.256-3.26 1.84.004.245.242v1.84L14.1 32.686ZM12.015 9.49v-.35l1.738-1.735h.347l3.256 3.256v1.836l-.246.248h-1.839L12.015 9.49ZM.582 18.524h14.316l.21.21v2.53l-.21.209H.582l-.21-.21v-2.53l.21-.209Z" fill="var(--lockup-lines-fill)" data-v-4ee6c329></path> <path d="M29.005 25.265h-2.526l-.21-.21v-5.912c0-1.054-.412-1.869-1.682-1.895-.654-.016-1.4 0-2.199.033l-.12.12v7.651l-.21.21h-2.526l-.21-.21V14.948l.21-.21h5.684a3.998 3.998 0 0 1 3.998 3.999v6.315l-.21.21v.003ZM41.24 20.841l-.21.21H34.5l-.21.209c0 .422.423 1.685 2.108 1.685.631 0 1.263-.21 1.476-.631l.21-.21h2.525l.21.21c-.21 1.263-1.263 3.16-4.424 3.16-3.58 0-5.265-2.526-5.265-5.477 0-2.952 1.685-5.478 5.055-5.478 3.37 0 5.056 2.526 5.056 5.478v.844Zm-3.161-2.107c0-.21-.21-1.686-1.895-1.686s-1.895 1.476-1.895 1.686l.21.21h3.37l.21-.21ZM47.136 22.104c0 .422.21.632.632.632h1.895l.209.209v2.107l-.21.21h-1.894c-1.895 0-3.58-.845-3.58-3.161v-4.634l-.21-.21h-1.475l-.21-.209v-2.107l.21-.21h1.476l.21-.209v-1.894l.209-.21h2.526l.21.21v1.894l.209.21h2.316l.21.21v2.106l-.21.21h-2.316l-.21.21V22.1l.003.003ZM54.93 25.265h-2.525l-.21-.21V10.73l.21-.21h2.526l.21.21v14.322l-.21.21v.003ZM60.618 13.046h-2.526l-.21-.209V10.73l.21-.21h2.526l.21.21v2.107l-.21.21Zm0 12.22h-2.526l-.21-.21V14.944l.21-.21h2.526l.21.21v10.112l-.21.21ZM70.52 10.73v2.107l-.21.21h-1.894c-.422 0-.632.209-.632.631v.844l.21.21H70.1l.21.21v2.106l-.21.21h-2.107l-.21.21v7.581l-.21.21H65.05l-.21-.21v-7.582l-.21-.21h-1.475l-.21-.209v-2.107l.21-.21h1.476l.21-.209v-.844c0-2.317 1.684-3.161 3.58-3.161h1.894l.21.21-.004.003ZM78.311 25.474c-.844 2.108-1.685 3.37-4.633 3.37h-1.054l-.21-.209v-2.107l.21-.21h1.054c1.053 0 1.263-.209 1.475-.84v-.21l-3.37-8.216v-2.108l.21-.21h1.894l.21.21 2.526 7.163h.21l2.525-7.163.21-.21h1.894l.21.21v2.108l-3.37 8.426.01-.004Z" fill="var(--lockup-wordmark-fill)" data-v-4ee6c329></path> <path d="M94.699 25.205V10.707l-.213-.214H92.78l-.213.214v5.117h-.213c-.661-.853-1.706-1.28-2.772-1.28-2.985 0-4.69 2.346-4.69 5.544 0 3.198 1.705 5.543 4.69 5.543 1.13 0 2.132-.469 2.772-1.28h.213l.213.854.213.213h1.493l.213-.213Zm-2.132-5.117c0 2.558-1.066 3.624-2.772 3.624-1.705 0-2.771-1.258-2.771-3.624 0-2.367 1.066-3.625 2.771-3.625 1.706 0 2.772 1.066 2.772 3.625ZM96.614 20.088c0 3.411 1.918 5.543 5.117 5.543 3.198 0 5.117-2.132 5.117-5.543 0-3.412-1.919-5.544-5.117-5.544s-5.117 2.133-5.117 5.544Zm2.132 0c0-2.346 1.066-3.625 2.985-3.625 1.918 0 2.985 1.28 2.985 3.625 0 2.345-1.067 3.624-2.985 3.624-1.92 0-2.985-1.279-2.985-3.624ZM110.26 20.088c0-2.346 1.066-3.625 2.985-3.625 1.705 0 2.345.853 2.558 1.706l.213.213h1.706l.213-.213c-.213-1.919-1.706-3.625-4.69-3.625-3.199 0-5.117 2.133-5.117 5.544 0 3.411 1.918 5.543 5.117 5.543 2.984 0 4.477-1.706 4.69-3.624l-.213-.213h-1.706l-.213.213c-.213.852-.853 1.705-2.558 1.705-1.919 0-2.985-1.279-2.985-3.624ZM127.733 22.433c0-1.919-1.066-2.772-3.199-3.198-2.132-.426-2.984-.64-2.984-1.706 0-.852.852-1.066 1.918-1.066 1.493 0 1.919.64 1.919 1.28l.214.213h1.705l.213-.213c0-2.132-1.705-3.198-4.051-3.198-2.984 0-4.05 1.492-4.05 2.984 0 1.92 1.279 2.772 3.411 3.198 2.132.427 2.772.64 2.772 1.706 0 .853-.64 1.28-2.133 1.28-1.492 0-2.132-.64-2.132-1.706l-.213-.213h-1.705l-.214.213c0 2.345 1.493 3.624 4.264 3.624 2.985 0 4.265-1.492 4.265-3.198Z" fill="var(--lockup-secondary-text-fill)" data-v-4ee6c329></path> <path d="M131.138 18.524h14.316l.209.21v2.53l-.209.209h-14.316l-.21-.21v-2.53l.21-.209Z" fill="var(--lockup-lines-fill)" data-v-4ee6c329></path></svg></a></div> <div class="navbar__actions-wrapper"><form id="search-form" role="search" class="algolia-search-wrapper search-form"><label class="search-form__label"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32" class="search-form__label-icon-search"><path d="M20.571 15.143c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8 8-3.589 8-8zM29.714 30c0 1.25-1.036 2.286-2.286 2.286-0.607 0-1.196-0.25-1.607-0.679l-6.125-6.107c-2.089 1.446-4.589 2.214-7.125 2.214-6.946 0-12.571-5.625-12.571-12.571s5.625-12.571 12.571-12.571 12.571 5.625 12.571 12.571c0 2.536-0.768 5.036-2.214 7.125l6.125 6.125c0.411 0.411 0.661 1 0.661 1.607z" fill="rgba(175, 180, 182, 0.87)"></path></svg> <input id="algolia-search-input" placeholder="Search our docs by topic..." class="search-form__input"></label> <button tabindex="-1" type="reset" class="search-form__label-icon-close"><span class="visuallyhidden">Close search</span> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 18 18"><g fill="#A3A9AC" transform="scale(-1 1) rotate(45 .571 -12.959)"><rect width="2.333" height="18.667" x="8.164" y=".003"></rect> <polygon points="8.164 .003 10.497 .003 10.497 18.67 8.164 18.67" transform="rotate(-90 9.33 9.336)"></polygon></g></svg></button> <div class="search-form__content-overlay"></div></form> <div class="navbar__right-actions"><a href="/ask-netlify/" aria-label="ask netlify" class="navbar__ask-netlify-link"><span class="navbar__ask-netlify-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44" class="wrapper__icon-ask-netlify"><path fill="currentColor" d="M18.77 23.56a1.8 1.8 0 1 1-3.6 0 1.8 1.8 0 0 1 3.6 0Zm8.26 1.8a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Zm-3.86-1.54.03.07v.38l-.03.07-.87 1.77-.12.09h-.32l-.13-.1-.9-1.76-.03-.07v-.38l.03-.07 1-.66h.31l1.03.66Z"></path> <path fill="currentColor" fill-rule="evenodd" d="M22.32 13C28.77 13 34 17.22 34 23.67a6.97 6.97 0 0 1-6.97 6.97H10v-6.97C10 17.22 15.23 13 21.68 13h.64ZM11.55 23.16a5.24 5.24 0 0 1 10.07-2.05h.76l.01-.03a5.24 5.24 0 0 1 10.06 2.08c0 2.65-2.13 5.17-4.53 5.23H16.5a5.24 5.24 0 0 1-4.95-5.23Z" clip-rule="evenodd"></path> <path fill="currentColor" d="m24.47 8.12.07-.16 1.16-.4.15.08.63 1.95-.4.82-.16.06-.82-.4-.63-1.95Zm9.88 3.27.16.06.48 1.13-.07.16-1.9.76-.85-.34-.07-.16.35-.85 1.9-.76ZM30.04 8l.16-.06 1.1.54.05.16-1.14 2.43-.87.3-.15-.08-.3-.86L30.04 8Z" class="ask-netlify-flair"></path></svg></span> <span class="navbar__ask-netlify-label">Ask Netlify</span></a> <div class="user-menu"> <button href="#menu" aria-label="menu" class="menu-trigger is-not-visible-mamabear"><svg viewBox="0 0 31 25" xmlns="http://www.w3.org/2000/svg" class="wrapper__icon-menu"><rect x="0.581177" y="0.71875" width="30" height="4" fill="currentcolor"></rect> <rect x="0.581177" y="10.7188" width="30" height="4" fill="currentcolor"></rect> <rect x="0.581177" y="20.7188" width="30" height="4" fill="currentcolor"></rect></svg></button> <nav aria-label="Netlify navigation" class="navbar__nav is-visible-mamabear navbar__authlinks" data-v-1733a580><div class="navbar__nav-list" data-v-1733a580><a href="https://app.netlify.com/login" rel="noopener noreferrer" class="navbar__nav-link" data-v-1733a580> Log in </a> <a href="https://app.netlify.com/signup" target="self" rel="noopener noreferrer" class="navbar__nav-link signup-button" data-v-1733a580> Sign up </a></div></nav></div></div></div></div></header> <main class="wrapper wrapper--main"><div class="wrapper__sidebar wrapper__navigation"><a class="button button--icon button--close is-not-visible-mamabear"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 16 16" class="icon"><path d="M8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 Z M10.44352,10.7233105 L10.4528296,10.7326201 L10.7326201,10.4528296 C11.0310632,10.1543865 11.0314986,9.66985171 10.7335912,9.37194437 L9.36507937,8.0034325 L10.7360526,6.63245928 C11.0344957,6.33401613 11.0349311,5.84948135 10.7370237,5.55157401 L10.448426,5.26297627 C10.1505186,4.96506892 9.66598387,4.96550426 9.36754072,5.26394741 L8.00589385,6.62559428 L6.63738198,5.25708241 C6.33947464,4.95917507 5.85493986,4.95961041 5.55649671,5.25805356 L5.26737991,5.54717036 C4.96893676,5.84561351 4.96850142,6.33014829 5.26640876,6.62805563 L6.62561103,7.9872579 L5.25463781,9.35823112 C4.95619466,9.65667427 4.95575932,10.141209 5.25366666,10.4391164 L5.5422644,10.7277141 C5.84017175,11.0256215 6.32470652,11.0251861 6.62314967,10.726743 L7.99412289,9.35576976 L9.36263476,10.7242816 C9.66054211,11.022189 10.1450769,11.0217536 10.44352,10.7233105 Z"></path></svg></a> <div aria-label="Docs" class="sidebar wrapper__sidebar-interior"><nav aria-label="Docs"><div><div class="sidebar__section"><span class="sidebar__section-label">Welcome</span> <ul class="sidebar__links"><li class="sidebar__link-item"><div><a href="/" aria-current="page" class="sidebar__link">Home</a></div></li><li class="sidebar__link-item"><div><a href="/get-started/" aria-current="page" class="active sidebar__link">Get started</a></div></li><li class="sidebar__link-item"><div><a href="/welcome/add-new-site/" class="sidebar__link">Add new site</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Get help </button>  </section></li></ul></div><div class="sidebar__section"><span class="sidebar__section-label">Platform</span> <ul class="sidebar__links"><li class="sidebar__link-item"><div><a href="/platform/what-is-netlify/" class="sidebar__link">What is Netlify?</a></div></li><li class="sidebar__link-item"><div><a href="/platform/who-is-netlify-for/" class="sidebar__link">Who is Netlify for?</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Checklists </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> How we release </button>  </section></li></ul></div><div class="sidebar__section"><span class="sidebar__section-label">Platform primitives</span> <ul class="sidebar__links"><li class="sidebar__link-item"><div><a href="/platform/primitives/" class="sidebar__link">Overview</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Functions </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Edge Functions </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Image CDN </button>  </section></li><li class="sidebar__link-item"><div><a href="/blobs/overview/" class="sidebar__link">Blobs</a></div></li><li class="sidebar__link-item"><div><a href="/platform/caching/" class="sidebar__link">Caching</a></div></li><li class="sidebar__link-item"><div><a href="/platform/dev-server/" class="sidebar__link">Dev Server</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Platform extensions </button>  </section></li></ul></div><div class="sidebar__section"><span class="sidebar__section-label">Frameworks</span> <ul class="sidebar__links"><li class="sidebar__link-item"><div><a href="/frameworks/" class="sidebar__link">Overview</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Framework support </button>  </section></li><li class="sidebar__link-item"><div><a href="/frameworks/environment-variables/" class="sidebar__link">Use environment variables with frameworks</a></div></li><li class="sidebar__link-item"><div><a href="/frameworks-api/" class="sidebar__link">Frameworks API</a></div></li></ul></div><div class="sidebar__section"><span class="sidebar__section-label">Developer tools</span> <ul class="sidebar__links"><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> CLI </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> API </button>  </section></li><li class="sidebar__link-item"><div><a href="/terraform-provider/" class="sidebar__link">Terraform Provider</a></div></li><li class="sidebar__link-item"><div><a href="https://developers.netlify.app/sdk/get-started/introduction/" target="_blank" rel="noopener noreferrer" class="sidebar__link">Netlify SDK</a></div></li><li class="sidebar__link-item"><div><a href="/welcome/command-palette/" class="sidebar__link">Command Palette</a></div></li></ul></div><div class="sidebar__section"><span class="sidebar__section-label">Integrate & extend</span> <ul class="sidebar__links"><li class="sidebar__link-item"><div><a href="/integrations/overview/" class="sidebar__link">Overview</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Integrations </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Build Plugins </button>  </section></li><li class="sidebar__link-item"><div><a href="/slack-app/" class="sidebar__link">Netlify App for Slack</a></div></li><li class="sidebar__link-item"><div><a href="/integrations/extend-netlify/" class="sidebar__link">Extend Netlify</a></div></li></ul></div><div class="sidebar__section"><span class="sidebar__section-label">Configure & deploy site</span> <ul class="sidebar__links"><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Git </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Environment variables </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Configure builds </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Site deploys </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Domains & HTTPS </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Static routing </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Forms </button>  </section></li></ul></div><div class="sidebar__section"><span class="sidebar__section-label">Visual editing</span> <ul class="sidebar__links"><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Visual Editor </button>  </section></li><li class="sidebar__link-item"><div><a href="/ai-assisted-publishing/" class="sidebar__link">AI-Assisted Publishing</a></div></li><li class="sidebar__link-item"><div><a href="https://visual-editor-reference.netlify.com/" target="_blank" rel="noopener noreferrer" class="sidebar__link">Visual editor reference</a></div></li></ul></div><div class="sidebar__section"><span class="sidebar__section-label">Manage data</span> <ul class="sidebar__links"><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Connect </button>  </section></li></ul></div><div class="sidebar__section"><span class="sidebar__section-label">Site & team management</span> <ul class="sidebar__links"><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Accounts & billing </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Security </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Monitor sites </button>  </section></li></ul></div></div></nav> <div aria-labelledby="#external-link__header" class="external-links" data-v-bad94b42><p id="external-link__header" class="external-links__header" data-v-bad94b42> Contact </p> <ul class="external-links__list" data-v-bad94b42><li class="external-links__item" data-v-bad94b42><a href="https://answers.netlify.com" target="_blank" rel="noopener noreferrer" class="external-links__link" data-v-bad94b42> Forums </a></li> <li class="external-links__item" data-v-bad94b42><a href="https://www.netlify.com/support/" target="_blank" rel="noopener noreferrer" class="external-links__link" data-v-bad94b42> Contact support </a></li></ul></div> <nav aria-label="Netlify navigation" class="navbar__nav is-visible-mamabear navbar__authlinks is-not-visible-mamabear" data-v-1733a580><div class="navbar__nav-list" data-v-1733a580><a href="https://app.netlify.com/login" rel="noopener noreferrer" class="navbar__nav-link" data-v-1733a580> Log in </a> <a href="https://app.netlify.com/signup" target="self" rel="noopener noreferrer" class="navbar__nav-link signup-button" data-v-1733a580> Sign up </a></div></nav></div></div> <div class="wrapper__sidebar wrapper__toc"><nav aria-label="On this page" data-toc="" class="contents wrapper__sidebar-interior"> <details><summary class="contents__header">On this page</summary> <ol><li><a href="/get-started/#introduction" data-slug="introduction">Introduction</a> <ul><li><a href="/get-started/#development-environment-prerequisites" data-slug="development-environment-prerequisites">Development environment prerequisites</a> </li></ul></li><li><a href="/get-started/#deploy-a-project-to-netlify" data-slug="deploy-a-project-to-netlify">Deploy a project to Netlify</a> <ul><li><a href="/get-started/#generate-deploy-previews" data-slug="generate-deploy-previews">Generate Deploy Previews</a> </li><li><a href="/get-started/#collaborate-with-deploy-previews" data-slug="collaborate-with-deploy-previews">Collaborate with Deploy Previews</a> </li><li><a href="/get-started/#publish-changes" data-slug="publish-changes">Publish changes</a> </li><li><a href="/get-started/#roll-back-instantly" data-slug="roll-back-instantly">Roll back instantly</a> </li></ul></li><li><a href="/get-started/#test-out-netlify-functions" data-slug="test-out-netlify-functions">Test out Netlify Functions</a> <ul><li><a href="/get-started/#use-environment-variables" data-slug="use-environment-variables">Use environment variables</a> </li><li><a href="/get-started/#redirect-a-path" data-slug="redirect-a-path">Redirect a path</a> </li></ul></li><li><a href="/get-started/#set-up-netlify-forms" data-slug="set-up-netlify-forms">Set up Netlify Forms</a> </li><li><a href="/get-started/#try-visual-editing" data-slug="try-visual-editing">Try visual editing</a> </li><li><a href="/get-started/#conclusion" data-slug="conclusion">Conclusion</a> </li></ol></details></nav></div> <section class="wrapper__content"><header class="content__default"><div class="wrapper__breadcrumbs"><span class="breadcrumb__item"><span>Welcome</span> <span class="breadcrumb__break">/</span></span></div> <h1>Get started with Netlify</h1></header> <div class="content__default"><p>This tutorial will help you learn how to deploy a demo project on Netlify to make it available on the web. It will also introduce some of Netlify’s key features to manage sites, stores, or apps, and set up visual editing.</p> <article class="promoted-content" data-v-b9bca5e6><div class="details" data-v-b9bca5e6><section class="content-info" data-v-b9bca5e6><div class="content-title" data-v-b9bca5e6><div class="content-title-label" data-v-b9bca5e6> <p data-v-b9bca5e6>Start exploring a demo site</p></div> <div data-v-b9bca5e6><a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-feature-tour" class="dtn-btn" data-v-b9bca5e6> Deploy to Netlify </a></div></div> <p data-v-b9bca5e6>Want to explore a demo site first? You can return to this guide to help you get to know some key features including Deploy Previews, rollbacks, Netlify Functions, visual editing, environment variables, redirects, and Netlify Forms.</p></section></div> <ul class="btn-group" data-v-b9bca5e6><li data-v-b9bca5e6><a href="https://github.com/netlify/netlify-feature-tour" target="_blank" rel="noopener noreferrer" data-v-b9bca5e6> Demo repo </a></li><li data-v-b9bca5e6><a href="https://feature-tour.netlify.app/" target="_blank" rel="noopener noreferrer" data-v-b9bca5e6> Demo site </a></li><li data-v-b9bca5e6><a href="https://feature-tour.netlify.app/" target="_blank" rel="noopener noreferrer" data-v-b9bca5e6> Feature tour </a></li></ul> </article> <h2 id="introduction"><a href="#introduction" class="header-anchor">#</a> Introduction</h2> <p>To get started with your first project on Netlify, we’ll deploy a demo website. Here’s a <a href="https://feature-tour.netlify.app/" target="_blank" rel="noopener noreferrer">live example</a>. By the end of this tutorial, you will have completed these steps to help familiarize yourself with Netlify workflows:</p> <ul><li>clone project code from an example repository in GitHub and create a new site in the Netlify UI</li> <li>leverage continuous deployment in Netlify to kick off an automated build process that generates site assets</li> <li>visit your demo project’s URL after Netlify uploads site assets to a content delivery network (CDN) and makes your demo site available</li> <li>make changes to the example code and explore some key Netlify features</li></ul> <p>This tutorial’s example project uses the <a href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> frontend framework. If you’re not familiar with it, that’s totally fine. Understanding the framework isn’t necessary to complete this tutorial.</p> <h3 id="development-environment-prerequisites"><a href="#development-environment-prerequisites" class="header-anchor">#</a> Development environment prerequisites</h3> <p>Here’s what you’ll need to have set up to follow along with the steps in each section:</p> <ul><li>A code editor like <a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">Visual Studio Code</a>.</li> <li><a href="https://git-scm.com/" target="_blank" rel="noopener noreferrer">Git</a> installed on your system.</li> <li>An account with a Git provider: <a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub</a>, <a href="https://about.gitlab.com/" target="_blank" rel="noopener noreferrer">GitLab</a>, or <a href="https://azure.microsoft.com/en-us/products/devops/?nav=min#Overview-2" target="_blank" rel="noopener noreferrer">Azure DevOps</a>. This tutorial includes instructions for GitHub only, but you can use one of the other supported Git providers instead.</li> <li><a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js</a> 14.15.0 or later installed on your system. Installing Node.js will also install <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm</a>.</li> <li><a href="/cli/get-started/">Netlify CLI</a> installed on your system, for testing out Netlify Functions in a local development environment.</li></ul> <h2 id="deploy-a-project-to-netlify"><a href="#deploy-a-project-to-netlify" class="header-anchor">#</a> Deploy a project to Netlify</h2> <p>One way to get started deploying on Netlify is to use a Deploy to Netlify button to add a site.</p> <ol><li><p>Select the Deploy to Netlify button.</p> <a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-feature-tour"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a> <p>You will get directed to the Netlify app to create a new site. You should find the following page, asking you to connect to GitHub.</p> <p><img src="/images/get-started-connect-github.png" alt="Welcome to Netlify."></p></li> <li><p>Select <strong>Connect to GitHub</strong> to authenticate. If you don’t already have a Netlify user account, you will get one as part of this process.</p></li> <li><p>Select <strong>Save & Deploy</strong>. As well as creating a new site on Netlify, this process clones the <a href="https://github.com/netlify/netlify-feature-tour" target="_blank" rel="noopener noreferrer">demo project repository</a> to your GitHub account so you can make your own changes later on.</p> <p>You will be redirected to the <strong>Deploy details</strong> page in the Netlify UI.</p> <p>You can check that the repository was successfully created by selecting <strong>HEAD</strong> to navigate to your new repository on GitHub. Once the deploy is complete, the cloned project will be available in this new repository.</p> <p><img src="/images/get-started-deploys-from-github.png" alt="Deploy details page with GitHub link."></p></li> <li><p>When the site deploy succeeds, you should get a production URL where you can access the website. Select <strong>Open production deploy</strong> to check it out.</p> <p><img src="/images/get-started-prod-url.png" alt="Open production deploy from Deploy details page."></p> <p>Here’s what you can expect for the example site homepage:</p> <p><img src="/images/get-started-demo-site-homepage.png" alt="Netlify Feature Tour."></p></li></ol> <ol start="5"><li>You can choose to customize the URL by changing the site’s name in the Netlify UI at <div aria-label="Navigation path" class="nav-path-container"><strong>Site configuration <span aria-hidden="true">></span> Site details <span aria-hidden="true">></span> Site information</strong></div>.</li></ol> <p>Now that we’ve deployed a site on Netlify and generated a public URL, let’s make some changes to the code to customize the site and learn about some helpful features.</p> <h3 id="generate-deploy-previews"><a href="#generate-deploy-previews" class="header-anchor">#</a> Generate Deploy Previews</h3> <p>One of the most useful aspects of Netlify is the ability to generate unique <a href="/site-deploys/deploy-previews/">Deploy Previews</a> for each pull/merge request. Every push to the pull/merge request updates the Deploy Preview and generates a unique <a href="https://www.netlify.com/blog/2021/02/23/terminology-explained-atomic-and-immutable-deploys/" target="_blank" rel="noopener noreferrer">atomic deploy</a> with a permalink that you can share and refer back to.</p> <p>To understand how this works in practice, we’ll make some changes to the code.</p> <ol><li><p>Start by cloning the repository that was created on your GitHub account to create a copy on your local machine. Check out the GitHub docs for instructions on how to <a href="https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository" target="_blank" rel="noopener noreferrer">clone a repo</a>.</p></li> <li><p>In your terminal, use the <code>cd</code> command to change your working directory to the location that contains your local copy of the repository.</p></li> <li><p>Run the following command to install dependencies:</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> </code></pre></div></li> <li><p>Create and check out a new branch off of <code>main</code> by running the following command:</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">git</span> checkout <span class="token parameter variable">-b</span> myChanges </code></pre></div></li> <li><p>Open the local project directory in your favorite code editor, and open the <code>deploy-previews.astro</code> file in <code>/src/pages</code>. Let’s make a very small copy change to update the <code><h2></code> to say <code>This is a Deploy Preview</code>.</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>This is a Deploy Preview.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> </code></pre></div></li> <li><p>Save the <code>deploy-previews.astro</code> file. Then from your terminal, commit and push this change to GitHub:</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">git</span> commit <span class="token parameter variable">-am</span> <span class="token string">"update the h2"</span> </code></pre></div><div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">git</span> push <span class="token parameter variable">-u</span> origin myChanges </code></pre></div></li> <li><p>Create a pull request as if you were going to merge this change into your <code>main</code> branch. Check out the <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request#creating-the-pull-request" target="_blank" rel="noopener noreferrer">GitHub docs</a> for details on how to do this.</p> <p>A few things are kicked off on GitHub automatically once you’ve created the pull request. A <a href="/site-deploys/notifications/#github-pull-request-comments">comment is added</a> with information about your Deploy Preview, including a link to the Netlify <a href="/site-deploys/overview/#deploy-log">deploy log</a>.</p> <p><img src="/images/get-started-github-netlify-bot-comment.png" alt="Comment from netlify bot."></p> <p>Some <a href="/site-deploys/notifications/#github-commit-checks">checks are triggered</a> that provide insights on the deploy.</p> <p><img src="/images/get-started-github-successful-commit-checks.png" alt="Commit checks for header rules, pages changed, redirect rules, deploy preview."></p></li> <li><p>When Netlify is done building and deploying the site, check the GitHub pull request comment. Find <strong>Deploy Preview</strong> and select the generated Deploy Preview URL.</p></li> <li><p>Navigate to the Deploy Previews page on the demo site (<code>YOUR_DEPLOY_PREVIEW_URL/deploy-previews</code>), and note that the <code><h2></code> has changed.</p> <p>Examine the URL and note that your site’s name is prepended with <code>deploy-preview-</code> and a number that represents the pull/merge request number. For each pull or merge request, you get a unique URL that serves a version of your site containing the changes specific to that pull/merge request.</p></li> <li><p>In the GitHub pull request comment, find <strong>Latest deploy log</strong> and select the associated link. You should be directed to the Netlify UI. If you hover over <strong>Permalink</strong> in the header section, you might notice that, instead of <code>deploy-preview</code>, the site name is prepended with a deploy ID such as <code>61c36a332214be000842be44</code>. A unique permalink is generated for each atomic deploy.</p> <p><img src="/images/get-started-deploy-with-permalink.png" alt=""></p></li></ol> <div class="custom-block netlify-tip"><p class="custom-block-title">Set up automatic deploy subdomains to ensure deploys are accessible</p> <p>If you use Netlify DNS to manage a custom domain for your site, we recommend that you consider <a href="/domains-https/custom-domains/automatic-deploy-subdomains/">setting an automatic deploy subdomain</a> for your Deploy Previews. This ensures that the deploys are not blocked by any third-party scripts or services that require this, such as local internet service providers.</p></div> <h3 id="collaborate-with-deploy-previews"><a href="#collaborate-with-deploy-previews" class="header-anchor">#</a> Collaborate with Deploy Previews</h3> <p>Deploy Previews streamline your workflows by giving you the ability to collect reviewer feedback through the preview and have everything synced with the related pull/merge request.</p> <ol><li><p>If you’re using GitHub, install the <a href="https://github.com/apps/netlify" target="_blank" rel="noopener noreferrer">Netlify GitHub App</a> to enable the Deploy Preview collaboration tools. As we’ve already created a Netlify site, you will need to <a href="/git/repo-permissions-linking/#install-on-an-existing-site">update the existing site to use the app</a>.</p></li> <li><p>Open the Deploy Preview URL, and locate the <a href="/site-deploys/deploy-previews/#collaborative-deploy-previews">Netlify Drawer</a> at the bottom of the window.</p> <p><img src="/images/site-deploys-netlify-drawer-on-deploy-preview-logged-in.png" alt="Netlify Drawer, closed"></p></li> <li><p>Select the left side of the Netlify Drawer to open it. From there, you can add comments including screenshots and videos captured right from the Deploy Preview, add team members to solicit their thoughts, and integrate with other tools you may use to manage feedback such as Jira and Trello. You can also access deploy logs right from the Deploy Preview to troubleshoot issues you find while reviewing.</p></li></ol> <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/j2LqhI6oC_U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe></div><p>Any comment added using the Netlify Drawer on a Deploy Preview is automatically posted in the corresponding pull/merge request and vice versa so everyone can work in context.</p> <h3 id="publish-changes"><a href="#publish-changes" class="header-anchor">#</a> Publish changes</h3> <p>After making some changes locally, pushing commits to GitHub, and checking that everything is fine on a Deploy Preview, the next step is to publish the changes to production by merging your branch to <code>main</code>.</p> <ol><li><p>In GitHub, merge your pull request. Check out the <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/incorporating-changes-from-a-pull-request/merging-a-pull-request#merging-a-pull-request" target="_blank" rel="noopener noreferrer">GitHub docs</a> for details.</p></li> <li><p>In the Netlify UI, locate the new production build in the <strong>Deploys</strong> list.</p> <p><img src="/images/get-started-new-prod-deploy.png" alt=""></p></li> <li><p>When the production build’s status badge changes to <code>Published</code>, visit the production URL. The <code><h2></code> change on the <code>YOUR_URL/deploy-previews/</code> page should be live.</p></li></ol> <h3 id="roll-back-instantly"><a href="#roll-back-instantly" class="header-anchor">#</a> Roll back instantly</h3> <p>Oh no, we’ve made a mistake! The page now says <code>This is a Deploy Preview</code> but it’s in production. Don’t worry; we can use Netlify’s <a href="https://www.netlify.com/blog/2021/07/12/how-to-rollback-a-deploy-in-2-seconds-on-netlify/" target="_blank" rel="noopener noreferrer">one-click rollback</a>.</p> <ol><li><p>On the <strong>Deploys</strong> page, select the very first deploy for the site.</p></li> <li><p>Select <strong>Publish deploy</strong>.</p> <p><img src="/images/get-started-publish-deploy-for-rollback.png" alt=""></p> <p>Netlify replaces whatever is in production with the version of the code attached to the selected deploy.</p></li> <li><p>Visit the production URL again, where the text on the <code>YOUR_URL/deploy-previews/</code> page should be back to <code>Try out Deploy Previews</code>.</p></li></ol> <h2 id="test-out-netlify-functions"><a href="#test-out-netlify-functions" class="header-anchor">#</a> Test out Netlify Functions</h2> <p>You could use Netlify only for the ease of continuous deployment, but that would be missing out on a lot of other features that can simplify your workflows such as <a href="/functions/overview/">Netlify Functions</a>.</p> <p>Netlify Functions are serverless functions that are version-controlled, built, and deployed along with the rest of your Netlify site. This allows you to add backend functionality to your projects without having to set up and configure a server or coordinate deployments between your app and your functions. We’ll walk through the steps to set up a function.</p> <ol><li><p>Go back to the example site repository in your code editor, and note the <code>netlify</code> folder with a <code>functions</code> folder inside. If you add function files or subfolders with function files here, Netlify will automatically detect that your project uses functions.</p></li> <li><p>Before creating a new file, make sure you switch back to the <code>main</code> branch of the project and pull the latest changes. Here are the commands to run in your terminal:</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">git</span> checkout main </code></pre></div><div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">git</span> pull origin main </code></pre></div></li> <li><p>Create a new <code>hello-world.js</code> file in the <code>netlify/functions</code> folder. Normally, we recommend doing this in a separate branch instead of <code>main</code> to uphold branching best practices, but we’ve shortened the versioning workflow for this tutorial.</p></li> <li><p>Copy and paste the following code with the minimum structure required for Netlify Functions, then save the file.</p> <div class="language-js extra-class"><pre class="language-js"><code>exports<span class="token punctuation">.</span><span class="token function-variable function">handler</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">statusCode</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token string">"hello world!"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></li> <li><p>To run our function while developing locally, we’ll use the <a href="/cli/local-development/">Netlify Dev</a> functionality of the <a href="/cli/get-started/">Netlify CLI</a>. Run the following command in your terminal (or the shortcut <code>ntl dev</code>):</p> <div class="language-bash extra-class"><pre class="language-bash"><code>netlify dev </code></pre></div></li> <li><p>Visit <code>http://localhost:8888/.netlify/functions/hello-world</code>, and you should find <code>hello world!</code> on the page.</p> <div class="custom-block netlify-tip"><p class="custom-block-title">Having trouble with your function?</p> <p>Make sure the <code>hello-world.js</code> file is nested inside the <code>functions</code> folder, not directly under <code>netlify</code>.</p></div></li></ol> <h3 id="use-environment-variables"><a href="#use-environment-variables" class="header-anchor">#</a> Use environment variables</h3> <p>One of the advantages of using Netlify Functions relates to writing code that uses <a href="/environment-variables/overview/">environment variables</a>. Instead of having to add an <code>.env</code> file in your project, you can create environment variables on Netlify and refer to them in your function with <code>process.env</code> syntax. This allows you to use external APIs that require secret tokens, such as Stripe, Slack, and Airbase, while keeping everything secret. What happens in a serverless function is not visible in the frontend when making requests.</p> <p>Let’s try this out by adding an environment variable in the Netlify UI.</p> <ol><li><p>Navigate to <div aria-label="Navigation path" class="nav-path-container"><strong>Site configuration <span aria-hidden="true">></span> Environment variables</strong></div>. Then select <strong>Add a variable</strong>.</p></li> <li><p>Add an environment variable with a <strong>Key</strong> of <code>MY_SECRET</code>. Select <strong>Same value for all deploy contexts</strong> and enter a value to use here. Leave the <a href="/environment-variables/overview/#scopes">scope</a> as the default value to include all <strong>All scopes</strong>. Then, select <strong>Create variable</strong>.</p> <p><img src="/images/get-started-environment-variable.png" alt="The environment variable creation form showing an example variable with a scope set to functions"></p></li> <li><p>Return to your code editor and the <code>hello-world.js</code> file, add a reference to the new environment variable using <code>process.env.MY_SECRET</code>, and save the file.</p> <div class="language-js extra-class"><pre class="language-js"><code>exports<span class="token punctuation">.</span><span class="token function-variable function">handler</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> mySecret <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">MY_SECRET</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">statusCode</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">hello world! I have a </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>mySecret<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></li> <li><p>To verify that this works correctly, we’ll need to take a couple of steps to allow Netlify CLI to get access to the environment variables for the site we want to serve.</p> <p>First, exit out of the Netlify Dev environment. (On macOS, that’s <kbd>control</kbd> + <kbd>C</kbd>). Then run this command in your terminal (or the shortcut <code>ntl link</code>):</p> <div class="language-bash extra-class"><pre class="language-bash"><code>netlify <span class="token function">link</span> </code></pre></div><p>When prompted by Netlify CLI, follow the instructions to link the Netlify site. This gives the local environment access to data stored in Netlify servers.</p></li> <li><p>Restart the local development environment by running this command in your terminal (or the shortcut <code>ntl dev</code>):</p> <div class="language-bash extra-class"><pre class="language-bash"><code>netlify dev </code></pre></div></li> <li><p>Visit <code>http://localhost:8888/.netlify/functions/hello-world</code>, and you should find your environment variable’s value referenced on the page.</p></li></ol> <h3 id="redirect-a-path"><a href="#redirect-a-path" class="header-anchor">#</a> Redirect a path</h3> <p>If you think that entering <code>/.netlify/functions/hello-world</code> is a bit cumbersome, you might want to set up a <a href="/routing/redirects/">redirect</a> to invoke the function.</p> <ol><li><p>In your code editor, find a file called <code>_redirects</code> in the <code>public</code> folder.</p></li> <li><p>Copy and paste this redirect rule:</p> <div class="language- extra-class"><pre class="language-text"><code>/api/* /.netlify/functions/:splat </code></pre></div><p>Adding this rule means that, when there’s a request to <code>YOUR_URL/api/hello-world</code>, Netlify redirects it to <code>YOUR_URL/.netlify/functions/hello-world</code>.</p></li> <li><p>To try it out, commit and push the changes to GitHub. Make sure to commit and push the <code>hello-world.js</code> functions file as well.</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> </code></pre></div><div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">git</span> commit <span class="token parameter variable">-am</span> <span class="token string">"add a redirect and function"</span> </code></pre></div><div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">git</span> push <span class="token parameter variable">-u</span> origin main </code></pre></div></li> <li><p>Wait for your production build to finish, then visit your site at <code>YOUR_URL/api/hello-world</code>. You should find the <code>hello world!</code> body returned by your function.</p></li></ol> <h2 id="set-up-netlify-forms"><a href="#set-up-netlify-forms" class="header-anchor">#</a> Set up Netlify Forms</h2> <p>One last feature we’ll introduce in this tutorial is <a href="/forms/setup/">Netlify Forms</a>. If you’re building a project that collects users’ input through a form, Netlify can handle submissions, data, and basic spam filtering with a single line of code.</p> <ol><li><p>In the Netlify UI, <a href="/forms/setup/#enable-form-detection">enable automatic form detection</a>. Navigate to <div aria-label="Navigation path" class="nav-path-container"><strong>Forms</strong></div>, and select <strong>Enable form detection</strong>.</p></li> <li><p>In your code editor, open the <code>netlify-forms.astro</code> file in <code>/src/pages</code> and locate the <code><form></code> HTML element. So far, this is a standard form.</p></li> <li><p>Add the attribute <code>data-netlify="true"</code> to the form element, like this:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>POST<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/success<span class="token punctuation">"</span></span> <span class="token attr-name">data-netlify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> </code></pre></div></li> <li><p>Commit and push these changes to GitHub.</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">git</span> commit <span class="token parameter variable">-am</span> <span class="token string">"add a form"</span> </code></pre></div><div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">git</span> push <span class="token parameter variable">-u</span> origin main </code></pre></div></li> <li><p>Once the production build finishes, visit your site and navigate to the page about Netlify Forms, <code>YOUR_URL/netlify-forms/</code>.</p></li> <li><p>Fill in some details and select <strong>Send</strong>. You should find the following success message.</p> <p><img src="/images/get-started-form-success.png" alt="submission received!"></p> <p>This means our form entry submitted successfully, but where can we find it?</p></li> <li><p>In the Netlify UI, select the <strong>Forms</strong> tab for your site.</p></li> <li><p>Select the active <strong>contact</strong> form from the <strong>Active forms</strong> list, and you should find the submission listed.</p> <p><img src="/images/get-started-forms-submission.png" alt="Verified submissions with user name and message."></p></li></ol> <h2 id="try-visual-editing"><a href="#try-visual-editing" class="header-anchor">#</a> Try visual editing</h2> <p>To try out visual editing quickly, we recommend you create a new site using a site template that is already configured for visual editing.</p> <p>Starter site templates with visual editing include:</p> <ul><li><strong><a href="https://github.com/netlify-templates/ts-mui-nextjs-starter" target="_blank" rel="noopener noreferrer">TypeScript + MUI Starter</a></strong>: good for a tutorial-like experience and learning about visual editor capabilities, doesn’t require content source setup</li> <li><strong><a href="https://github.com/netlify-templates/content-ops-starter" target="_blank" rel="noopener noreferrer">ContentOps Starter</a></strong>: Contains over 35 content types, good to try more complex scenarios, doesn’t require content source setup</li> <li><strong><a href="https://github.com/netlify-templates/auto-annotated-portfolio" target="_blank" rel="noopener noreferrer">Auto-annotated portfolio</a></strong>: contains auto annotated components, good to learn about auto annotating your own site, doesn’t require content source setup</li> <li><strong><a href="https://github.com/netlify-templates/nextjs-contentful-starter" target="_blank" rel="noopener noreferrer">Next.js & Contentful Starter</a></strong>: good for getting started with Contentful</li> <li><strong><a href="https://github.com/netlify-templates/astro-sanity-starter" target="_blank" rel="noopener noreferrer">Astro & Sanity Starter</a></strong>: good for getting started with Sanity</li></ul> <p>Learn more about creating a new site with visual editing <a href="/visual-editor/get-started/#create-new-site-with-visual-editing">using a template</a>.</p> <p>Learn more about <a href="/visual-editor/get-started/#add-visual-editing-to-an-existing-site">adding visual editing to an existing site</a> and the <a href="/visual-editor/get-started/#requirements">setup requirements</a>.</p> <h2 id="conclusion"><a href="#conclusion" class="header-anchor">#</a> Conclusion</h2> <p>In this tutorial, we’ve deployed an example site and introduced a few key features to get you started building sites, stores, and apps with Netlify.</p> <p>To explore more, consider setting up a <a href="/domains-https/custom-domains/">custom domain</a> for your site, check out our get started docs for <a href="/visual-editor/get-started/">Visual Editor</a> and <a href="/connect/get-started/">Netlify Connect</a>, work through our <a href="/platform/launch-checklist/">production launch checklist</a>, or explore <a href="https://answers.netlify.com/" target="_blank" rel="noopener noreferrer">our Support Forums</a>.</p></div>  <div class="content__default wrapper__last_updated has_page_nav"><time datetime="2024-11-06"> Last updated: November 6, 2024 </time></div> <div class="footer-page-nav"><p class="inner"> <span class="next"><a href="/welcome/add-new-site/"> Add new site </a> → </span></p></div> <div class="feedback"><div class="media"><div class="media__body"><h4 class="media__title"> Did you find this doc useful? </h4>  <p class="media__copy"> Your feedback helps us improve our docs. </p>  </div> <div class="media__figure"><button aria-label="upvote" class="feedback__vote feedback__vote--upvote"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true"><g fill="none" fill-rule="evenodd"><circle cx="32" cy="32" r="32" fill="none" fill-rule="nonzero"></circle> <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M40 29h-7.645l1.473-3.889c.377-.996.042-2.135-.803-2.73-.963-.679-2.263-.427-2.936.569L26 29v9a4 4 0 0 0 4 4h6.517c1.51 0 2.893-.852 3.573-2.203L42 36v-5a2 2 0 0 0-2-2zM22 29v12"></path></g></g></svg></button><button aria-label="downvote" class="feedback__vote feedback__vote--downvote"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true"><g fill="none" fill-rule="evenodd"><circle cx="32" cy="32" r="32" fill="none" fill-rule="nonzero"></circle> <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M23 35h7.645l-1.473 3.889c-.377.996-.042 2.135.803 2.73.963.679 2.263.427 2.936-.569l4.09-6.05v-9a4 4 0 0 0-4-4h-6.518c-1.51 0-2.893.852-3.573 2.202L21 28v5a2 2 0 0 0 2 2zM41 35V23"></path></g></g></svg></button></div></div> <div><form class='form form--floating-labels feedback__form--appear' method='post' name='feedback'><input type="hidden" name="form-name" value="feedback"> <input type="hidden" name="path" value="/get-started/"> <input type="hidden" name="vote" value=""> <label class="visuallyhidden"> Do not fill in this field <input name="verification" value=""></label> <div class="form__field"><label><div class="form__label"> What else would you like to tell us about this doc? </div> <textarea name="feedback" class="form__textarea"></textarea></label></div> <div class="btn-group"><button disabled="disabled" class="btn"> Send </button></div></form></div></div> <footer class="footer"><div class="footer-wrapper"><nav aria-label="Footer navigation" class="footer-nav"><ul class="footer__nav"><li class="footer__nav-item"><a href="https://netlify.com/" class="footer__nav-link"> Netlify </a></li> <li class="footer__nav-item"><a href="https://netlify.com/careers/" class="footer__nav-link"> Careers </a></li> <li class="footer__nav-item"><a href="https://netlify.com/blog/" class="footer__nav-link"> Blog </a></li> <li class="footer__nav-item"><a href="https://www.netlify.com/legal/terms-of-use/" class="footer__nav-link"> Terms </a></li> <li class="footer__nav-item"><a href="https://www.netlify.com/privacy/" class="footer__nav-link"> Privacy </a></li></ul></nav> <div class="dark-mode-widget footer__theme-toggle" data-v-0d17f8d5><label for="theme-select" class="visuallyhidden" data-v-0d17f8d5>Select a theme</label> <div class="forms-select-c" data-v-0d17f8d5><div class="theme-toggle-icon" data-v-0d17f8d5><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-0d17f8d5><path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM7 12.2C6.99999 12.2 7.00001 12.2 7 12.2C4.12812 12.2 1.8 9.87188 1.8 7C1.8 4.12812 4.12812 1.8 7 1.8C7.00001 1.8 6.99999 1.8 7 1.8V12.2Z" fill="currentColor"></path></svg>  </div> <select value="system" name="theme-select" id="theme-select" class="forms-input"> <option value="system" data-v-0d17f8d5>System</option><option value="light" data-v-0d17f8d5>Light</option><option value="dark" data-v-0d17f8d5>Dark</option></select> <svg width="21" height="13" viewBox="0 0 21 13" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-arrow-down forms-select-c-arrow"><path d="M20.7656 1.82812C21.0156 2.10938 21.0156 2.375 20.7656 2.625L10.9219 12.4688C10.6719 12.7188 10.4219 12.7188 10.1719 12.4688L0.328125 2.625C0.078125 2.375 0.078125 2.10938 0.328125 1.82812L1.26562 0.9375C1.51562 0.65625 1.78125 0.65625 2.0625 0.9375L10.5469 9.375L19.0312 0.9375C19.3125 0.65625 19.5781 0.65625 19.8281 0.9375L20.7656 1.82812Z"></path></svg></div></div></div> <p class="footer__copyright">© 2024 Netlify</p></footer></section></main></div><div class="global-ui"></div></div> <script src="/assets/js/app.1a68918d.js" defer></script><script src="/assets/js/10.a8fb7bb3.js" defer></script><script src="/assets/js/2.f24e0879.js" defer></script><script src="/assets/js/144.1766af18.js" defer></script><script src="/assets/js/13.7b226c47.js" defer></script><script src="/assets/js/9.01fad13a.js" defer></script><script src="/assets/js/3.be674a14.js" defer></script> <script src="/netlify-cnm/cnm.js" async defer></script> <script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="90a54386-9477-4113-bd6a-b9227b573d00" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiOTBhNTQzODYtOTQ3Ny00MTEzLWJkNmEtYjkyMjdiNTczZDAwIiwiYWNjb3VudF9pZCI6IjU4ZGE4ODkzZDY4NjVkMzVjOTJhNzJiOCIsImRlcGxveV9pZCI6IjY3NDBmMzNkOTdmMTdiMDAwODkyNzMyMCIsImlzc3VlciI6Im5mc2VydmVyIn0.w3RbnVlZywFu8_P7X1si0AcznAHq7JlUzsxOj5i3olQ"></script><script type="text/javascript"> if (window.location.host === "docs.netlify.com") { !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.13.1"; analytics.load("kjz0qkJslzzHMcNGI3GkDb9HDZ6vspYZ"); }}(); } </script></body> </html>