{"id":2759,"date":"2023-03-28T17:14:06","date_gmt":"2023-03-28T21:14:06","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/?p=2759"},"modified":"2023-05-11T17:07:57","modified_gmt":"2023-05-11T21:07:57","slug":"deploy-to-netlify","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/jamstack\/eleventy\/deploy-to-netlify\/","title":{"rendered":"Deploy to Netlify"},"content":{"rendered":"\n<p>This post covers how to get your site in the web using Netlify&#8217;s servers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Terminology<\/h2>\n\n\n\n<p>Some words you might not know<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.netlify.com\/\" target=\"_blank\">Netlify<\/a>: Netlify is a hosting platform specializing in hosting projects build with workflows like ours (static site generator and GitHub).\n<ul class=\"wp-block-list\">\n<li>They have a generous <a rel=\"noreferrer noopener\" href=\"https:\/\/www.netlify.com\/pricing\/\" target=\"_blank\">free pricing tier<\/a> that is great for the kind of personal projects we&#8217;re doing in class.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Deploy<\/strong>: This is the process of moving your files from your local dev environment (your computer and GitHub Repository) to a web site everyone in the world can see.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Video Walkthrough<\/h2>\n\n\n\n<p>This is a screencast of me going through the steps below: <a rel=\"noreferrer noopener\" href=\"https:\/\/bmcc-cuny.zoom.us\/rec\/share\/lVWYE01zCEBAKIwB-_-IRQR6DnH5wbGsqqWuM7egUW5ev6uJcOEyW1iJwm1O-TAy.0p6IDEKGWmkYdTRn\" target=\"_blank\">Screencast of Deploy to Netlify<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Deploy to Netlify<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Before you start<\/strong> make sure: \n<ul class=\"wp-block-list\">\n<li>Setup your <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/projects\/eleventy-site\/eleventy-personal-project-setup\/\" data-type=\"post\" data-id=\"2757\">GitHub repository through Classroom<\/a><\/li>\n\n\n\n<li>AND <strong>Accepted Membership in our Organization <\/strong>(more info on above link).<\/li>\n\n\n\n<li>Have pushed your latest changes to GitHub (no changes showing as uncommitted in Codespace or local dev environment).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/app.netlify.com\/signup\" target=\"_blank\">Sign up for Netlify<\/a> using your GitHub account\n<ul class=\"wp-block-list\">\n<li>See the Signup Post for more details<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>After you complete your info it should ask you to <strong>Deploy your first project<\/strong>. Click on <strong>Import from Git<\/strong>\n<ul class=\"wp-block-list\">\n<li><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"317\" class=\"wp-image-2777\" style=\"width: 400px;\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/httpsapp.netlify.comsignupstart.png\" alt=\"\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/httpsapp.netlify.comsignupstart.png 1934w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/httpsapp.netlify.comsignupstart-300x238.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/httpsapp.netlify.comsignupstart-1024x811.png 1024w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/httpsapp.netlify.comsignupstart-768x608.png 768w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/httpsapp.netlify.comsignupstart-1536x1217.png 1536w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/httpsapp.netlify.comsignupstart-1568x1242.png 1568w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/li>\n\n\n\n<li>If you don&#8217;t see that and are on the Netlify start Page Click the &#8220;<strong>New site from Git<\/strong>&#8221; button<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Select &#8220;<strong>Github<\/strong>&#8221; as your Git provider<\/li>\n\n\n\n<li>Authorize Netlify on Github (you should be taken there automatically)<\/li>\n\n\n\n<li>Select your Eleventy repository\n\n\n\n\n<ul class=\"wp-block-list\">\n<li>Change to the Stein-BMCC organization. If you didn&#8217;t accept membership before on GitHub then this won&#8217;t be visible<\/li>\n\n\n\n<li><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"242\" class=\"wp-image-2797\" style=\"width: 400px;\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Choose-Stein-BMCC.png\" alt=\"netlify import: choose stein-bmcc option\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Choose-Stein-BMCC.png 1666w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Choose-Stein-BMCC-300x182.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Choose-Stein-BMCC-1024x621.png 1024w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Choose-Stein-BMCC-768x466.png 768w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Choose-Stein-BMCC-1536x931.png 1536w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Choose-Stein-BMCC-1568x951.png 1568w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/li>\n\n\n\n<li>Type in your GitHub username in the <strong>Search Repos <\/strong>box and <strong>press return\/enter key<\/strong><\/li>\n\n\n\n<li>Select your <strong>eleventy-personal-site<\/strong> (note you won&#8217;t see this if you didn&#8217;t start the site in GitHub Classroom.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"231\" class=\"wp-image-2796\" style=\"width: 400px;\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Find-11ty-site.png\" alt=\"type github username in repo search box and select your eleventy personal site.\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Find-11ty-site.png 1464w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Find-11ty-site-300x173.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Find-11ty-site-1024x590.png 1024w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/2916\/2023\/03\/Netlify-Find-11ty-site-768x443.png 768w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Change the Publish Directory to Dist. Settings should look as follows:\n<ol class=\"wp-block-list\">\n<li>Branch to deploy: main<\/li>\n\n\n\n<li>Base Directory: <em>leave this blank<\/em><\/li>\n\n\n\n<li>Build Command: npm run build<\/li>\n\n\n\n<li>Publish directory: <strong>dist<\/strong><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>Click the &#8220;<strong>Deploy site<\/strong>&#8221; button<\/li>\n<\/ol>\n\n\n\n<p>It will go to a new screen and show that your site deploy is in process. When it&#8217;s done you will see a check mark next to step 1 on that screen.<\/p>\n\n\n\n<p>If you get an error on your deploy, let me know and we&#8217;ll work through it.<\/p>\n\n\n\n<p><strong>You may have to refresh your screen if nothing changes in a couple of minutes.<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Optional &#8211; Change your site name<\/h4>\n\n\n\n<p>by default your url will be something like https:\/\/wierd-words-12dsfdds.netlify.app You can change the front part so it is more like my-project.netlify.app.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\">\n<li>Click the &#8220;<strong>Site settings<\/strong>&#8221; button<\/li>\n\n\n\n<li>Click the &#8220;<strong>Change site name<\/strong>&#8221; button<\/li>\n\n\n\n<li>Enter the name you want (it will be the part before .netlify.app). <em>Remember that it can not have spaces in the name.<\/em><\/li>\n\n\n\n<li>Click the &#8220;<strong>Save<\/strong>&#8221; button<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Other Tutorials<\/h2>\n\n\n\n<p>Here are links to some other people going over Deploying to Netlify. They don&#8217;t take into account that your site is in an organization like in our class, but the general idea is the same.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Netlify Tutorial \u2013 Deploying from Git\" width=\"750\" height=\"422\" src=\"https:\/\/www.youtube.com\/embed\/mN9oI98As_4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">very quick video walkthrough by Netlify<\/figcaption><\/figure>\n\n\n\n<p>D<a href=\"https:\/\/11ty.recipes\/recipes\/deploy-an-eleventy-site-to-netlify\/\" target=\"_blank\" rel=\"noreferrer noopener\">eploy a Site to Netlify<\/a> by <a href=\"https:\/\/mikeaparicio.com\/\">Mike Aparicio<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post covers how to get your site in the web using Netlify&#8217;s servers. Terminology Some words you might not know Video Walkthrough This is a screencast of me going through the steps below: Screencast of Deploy to Netlify Steps to Deploy to Netlify It will go to a new screen and show that your&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/jamstack\/eleventy\/deploy-to-netlify\/\">Continue reading <span class=\"screen-reader-text\">Deploy to Netlify<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[146,150],"tags":[154,156,157,155,33],"coauthors":[87],"class_list":["post-2759","post","type-post","status-publish","format-standard","hentry","category-eleventy","category-eleventy-site","tag-deploy","tag-hosting","tag-server","tag-site","tag-tutorial","entry"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"<p>This post covers how to get your site in the web using Netlify&#8217;s servers. Terminology Some words you might not know Netlify: Netlify is a hosting platform specializing in hosting projects build with workflows like ours (static site generator and GitHub). They have a generous free pricing tier that is great for the kind of personal projects we&#8217;re doing in class. Deploy: This is the process of moving your files from your local dev environment (your computer and GitHub Repository) to a web site everyone in the world can see. Video Walkthrough This is a screencast of me going through&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/category\/topics\/jamstack\/eleventy\/\" rel=\"category tag\">Eleventy<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/category\/projects\/eleventy-site\/\" rel=\"category tag\">Eleventy Site<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/author\/cstein\/"},"comments_num_v2":"2 comments","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/author\/cstein\/"},"uagb_comment_info":2,"uagb_excerpt":"This post covers how to get your site in the web using Netlify&#8217;s servers. Terminology Some words you might not know Video Walkthrough This is a screencast of me going through the steps below: Screencast of Deploy to Netlify Steps to Deploy to Netlify It will go to a new screen and show that your&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/2759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/comments?post=2759"}],"version-history":[{"count":2,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/2759\/revisions"}],"predecessor-version":[{"id":2811,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/2759\/revisions\/2811"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/media?parent=2759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/categories?post=2759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/tags?post=2759"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/coauthors?post=2759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}