{"componentChunkName":"component---src-templates-blog-post-js","path":"/free-hosting-with-netlify/","result":{"data":{"site":{"siteMetadata":{"title":"Little and Often"}},"markdownRemark":{"id":"6d7087b3-78ef-5d2d-aacf-4df6c04614ff","excerpt":"When I studied Web Development in college I had no idea how to host a website. When I started an apprenticeship in Web Development I assumed the start-up costs…","html":"<p>When I studied Web Development in college I had no idea how to host a website. When I started an apprenticeship in Web Development I assumed the start-up costs were too high. And maybe at that time there was a relatively high cost to hosting a website. Wordpress was the leading solution for personal blogging and these services seemed pricy, especially for a developer who wondered why they couldn’t just host it themselves!</p>\n<p>Today the development landscape is very different. JS has evolved greatly from the days of JQuery. The emmergence of Markdown has provided an easy to digest writing format. More companies are supporting solo-developers. Is there any hope for us today?</p>\n<p>Fortunately, <a href=\"https://netlify.com\">Netlify</a> are awesome. <a href=\"https://gatsbyjs.org\">Gatsby</a> are too! In this post I’m going to breakdown how to get a free static website up and running (<strong>spoiler</strong>: it’s dead simple!)</p>\n<h2>Requirements</h2>\n<ol>\n<li><a href=\"https://github.com/join\">Github account</a></li>\n<li><a href=\"https://app.netlify.com/signup\">Netlify account</a> linked to your Github account</li>\n</ol>\n<h2>Setting up your first Netlify site</h2>\n<p>Once you’re logged into Netlify, find the “New Site from Git” button pictured below.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/6bdf0636631a9158fd6c7b2c34681ebe/afec4/new-site-from-git.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 13.621262458471762%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAaElEQVQI12NgEpH6D8bCEJpRWBJCC0n+ZxGT+c8gKP6fgVf4PwOfCJDGgkHiAuL/2YD62YB6GabOmf+/d+qM/xNnzsHAk6B4Ik48Gyxf2937P6K6BowZ/lMBXHvx7H/hwV3/iw7v+Q8Ao1eap7S0E9gAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"New Site From Git button\"\n        title=\"New Site From Git button\"\n        src=\"/static/6bdf0636631a9158fd6c7b2c34681ebe/799d3/new-site-from-git.png\"\n        srcset=\"/static/6bdf0636631a9158fd6c7b2c34681ebe/00d96/new-site-from-git.png 148w,\n/static/6bdf0636631a9158fd6c7b2c34681ebe/0b23c/new-site-from-git.png 295w,\n/static/6bdf0636631a9158fd6c7b2c34681ebe/799d3/new-site-from-git.png 590w,\n/static/6bdf0636631a9158fd6c7b2c34681ebe/2a3d6/new-site-from-git.png 885w,\n/static/6bdf0636631a9158fd6c7b2c34681ebe/ae92f/new-site-from-git.png 1180w,\n/static/6bdf0636631a9158fd6c7b2c34681ebe/afec4/new-site-from-git.png 2408w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>A Wizard will appear for configuring continuous deployment. Choose your preferred Git provider and follow the instructions on-screen to connect to it. I’ll join you at step 2: Pick a repository!</p>\n<h3>2. Pick a repository</h3>\n<p>You will now be asked to pick a repository. Choose whichever repository homes source code for your static site.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/21e57571730548281270307047be6091/47d85/choose-repository.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 74.10958904109589%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAABlElEQVQ4y61Ti26DMAzk/z9wUt9QWhIKBAIlhFdvdqBbK7XVts7SyXkQ+3w2XqZyfCyWDuExwmbnY7neIAgPeGQXxuXyFN65OiOiQFEkkJwSSBnTXkAIiZruGKaundeFBsYRr8zT1mKXK+x1AX/2h6rEsdTYpAlWpxhr8kGRu/sj3dm+Rz+jIwzD8M3Qdh1SraGqyvmyMWjHAYbOT3mOKCHWSsHSI0vnduhhGovqTMxN43xH32KWwsM/GQdzJVs7ZTuzTsZAl6Xb17VxKPS0L0nD66NXQb2chF5ttlhvd/D3IZa0XlCX+Yy77gd7bP0Ai9WaklWuvCvadvJOT5LEMeTsPCIxdXg/e4aIY8j4hAMFFXJaK9K0JK25CiZScecpSUng6lzAgcZgvBkFXnO2YUY/d5H9T3T0sijE8RBSiTtXHmv66gHDti0xLJARY5UXlHAixfA6CsBBahoB0zR3M/UIbFyV03DWks/H6xzGpJVS2a/H4+mfIqRAlmV3Jf0FXxoKIZDeBHxnqF1AKSXSNH2b4RWf3daRTFy8P7sAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Pick Repository UI\"\n        title=\"Pick Repository UI\"\n        src=\"/static/21e57571730548281270307047be6091/799d3/choose-repository.png\"\n        srcset=\"/static/21e57571730548281270307047be6091/00d96/choose-repository.png 148w,\n/static/21e57571730548281270307047be6091/0b23c/choose-repository.png 295w,\n/static/21e57571730548281270307047be6091/799d3/choose-repository.png 590w,\n/static/21e57571730548281270307047be6091/2a3d6/choose-repository.png 885w,\n/static/21e57571730548281270307047be6091/ae92f/choose-repository.png 1180w,\n/static/21e57571730548281270307047be6091/47d85/choose-repository.png 1460w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h3>3. Build options, and deploy!</h3>\n<p>You’ll now be presented with a form to complete the deployment configuration.</p>\n<h4>Branch to deploy</h4>\n<p>This is the branch gatsby will watch and use to trigger rebuilds. <code class=\"language-text\">master</code> is fine for most projects, but you may choose to use another branch.</p>\n<h4>Build command</h4>\n<p>The command which will run everytime a build is triggered. For gatsby builds, this is done with <code class=\"language-text\">gatsby build</code>, but your project may use something different! (e.g. <code class=\"language-text\">npm run build</code>)</p>\n<h4>Public directory</h4>\n<p>This tells Netlify which folder your static assets build to. Usually this is <code class=\"language-text\">public/</code>. However your project may use something different!</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/729046188ae161a920014fb3797c988a/b6af8/deploy.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 98.92966360856268%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAACEUlEQVQ4y51UyXLTQBScz+EIX8eZIleOVMGJqnwEx5BLbhTgYAc7srxSXiSNJGuxJWtp3ptIjiQkh/CqukbSjNtv6R4x0sb41vsJTZ9gMByh1x/gfqxjeK/h6/ce+r+GuO3fqXU8mWJEe7eDOximhTzPkaapWjl4FZ4fwHF3sB0H7o5XV71b0oa0HfXO4Hfe33lecZ7PuYo4DMNHwiiK0Ywsy9UmI8uyGsrvTZwIObPpfIGNYWBrmIiiqCCt/zgr1sPhoPaaUZKKOD6qtMsS4uPxlFkbYZIktYz+ypB7Ip2HXpUfm2VW0RxCM4QfBGp6nu8/TO2JPu0rJbedEWiJc1l2/dmJcL78DX02hz6d0TqDRtkmVNb/hnBIaxYNxSQYW0NBkuZ4UKw9HpRpyUKPjnpmfZpSYmuahUalOsuaFgtvB921MXEdaLbEUFrYBL5qfhuS6nNS3+OWCH+/h0cISX8J9SDmzRad/XvJVBL7eEI99EhCaig8gIr2sgoCUgUro2vSIiAflj1hSZQuyRpEJeJjfFaLgpvK1mPDnxN0VTbspqyLMI5j5eM0zR6zewIh9bxaco2QbbciwuV6jeVqjYi93OGCqmM6nRLSHWcSkdxsYZMGT1dYi0+bRK1T/mEZuFot8GW1xDXh82yMOWmzJM2fCfHq8iPEuzd4efkBLz69h7h4jbc314rQJwXw/fcc/AE++A8DhDkZvQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"The Netlify deployment configuration\"\n        title=\"The Netlify deployment configuration\"\n        src=\"/static/729046188ae161a920014fb3797c988a/799d3/deploy.png\"\n        srcset=\"/static/729046188ae161a920014fb3797c988a/00d96/deploy.png 148w,\n/static/729046188ae161a920014fb3797c988a/0b23c/deploy.png 295w,\n/static/729046188ae161a920014fb3797c988a/799d3/deploy.png 590w,\n/static/729046188ae161a920014fb3797c988a/2a3d6/deploy.png 885w,\n/static/729046188ae161a920014fb3797c988a/ae92f/deploy.png 1180w,\n/static/729046188ae161a920014fb3797c988a/b6af8/deploy.png 1308w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h4>Deploy!</h4>\n<p>To finish off, hit deploy!</p>\n<h2>Where now?</h2>\n<p>If all has gone well then you’ll be assigned a custom Netlify domain (something like silly-cactus-a54cf.netlify.com). <a href=\"https://docs.netlify.com/domains-https/custom-domains/\">You might now configure a custom domain</a>. Or <a href=\"https://docs.netlify.com/domains-https/https-ssl/\">maybe you’ll configure https</a>.</p>\n<p>You could also take a look at my <a href=\"https://github.com/ingalless/little-and-often\">blog’s code</a>!</p>\n<p>Whatever you choose to do, your website is online and your ideas are being shared with the world.</p>","frontmatter":{"title":"Hosting a website (for free!) with Netlify","date":"December 15, 2019","description":"Many people hesitate to set up a website, worried that it costs money to host. Netlify, as always, has us covered"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/free-hosting-with-netlify/","previous":null,"next":{"fields":{"slug":"/write-tests-now/"},"frontmatter":{"title":"Write. Tests. Now."}}}}}