{"id":1854,"date":"2021-10-13T13:46:10","date_gmt":"2021-10-13T17:46:10","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/?p=1854"},"modified":"2021-10-18T12:10:55","modified_gmt":"2021-10-18T16:10:55","slug":"starter-11ty-site","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/jamstack\/eleventy\/starter-11ty-site\/","title":{"rendered":"Starter 11ty Site"},"content":{"rendered":"\n<p>This post goes through the steps to create a basic Eleventy (11ty) site from Prof Stein&#8217;s <a href=\"https:\/\/github.com\/profstein\/eleventy-basic\" target=\"_blank\" rel=\"noreferrer noopener\">Eleventy Basic<\/a> template.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Node and NVM<\/h2>\n\n\n\n<p>Before you do this, you must have node installed on your computer.&nbsp;<\/p>\n\n\n\n<p><strong>If you know you don&#8217;t have node installed:<\/strong> go to the <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/dev-environment-setup\/\" data-type=\"page\" data-id=\"206\">Dev Environment Setup<\/a> page and click on your OS and make sure you\u2019ve followed through these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Install NVM<\/li><li>Install Node<\/li><\/ul>\n\n\n\n<p>I<strong>f you&#8217;re not sure you have node<\/strong>: o check if you have Node installed on your machine:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Open Visual Studio Code<\/li><li>Open a new Window: File &gt; New Window<\/li><li>Open the terminal by clicking: Terminal &gt; New Terminal<\/li><li>Type the folllwing then press enter\/return: node -v<\/li><li>You should see something this as a reply in the terminal: v15.5.7&nbsp;<ol><li>If you don\u2019t see that then you don\u2019t have node installed. Try following the instructions from the Install NVM step<\/li><\/ol><\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Create a Basic Eleventy Starter Site<\/h2>\n\n\n\n<p>These are the instructions on creating the GitHub repository and running 11ty to generate the site from Stephanie Eckles example.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Sign in to GitHub <a href=\"https:\/\/github.com\">https:\/\/github.com<\/a>&nbsp;<\/li><li>Click on the following link to <strong>Generate a repo from this template<\/strong>: <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/profstein\/eleventy-basic\" target=\"_blank\">https:\/\/github.com\/profstein\/eleventy-basic<\/a><\/li><li>This will take you to GitHub and get you started creating a repository from my template.&nbsp;<ol><li>NOTE: this is similar to forking but you are not linked back to the original in the same way you are from a fork. It should say \u201cGenerated from profstein\/eleventy-basic\u201d under your repo name after you&#8217;re done.<\/li><\/ol><\/li><li>Type a name for your repository (you can also check to include all branches from original).&nbsp;<\/li><li>Click to finish and create the repo<\/li><li>You should now see a repository with the files from the template.<\/li><li>Click the green <strong>Code<\/strong> button and copy the link<\/li><li>Go to Visual Studio Code<\/li><li>If you don\u2019t have a blank window open, Open a new window: <strong>File &gt; New Window<\/strong><\/li><li>Click <strong>Clone Git Repository<\/strong><\/li><li>Paste in the URL you copied from GitHub (step 8) and press enter\/return<\/li><li>Click to <strong>Open the new repository<\/strong><\/li><li>If prompted click <strong>Yes I trust the authors<\/strong><\/li><li>You should see the files in VS Code<\/li><li>Open a new Terminal Window: <strong>Terminal &gt; New Window<\/strong><\/li><li>Type: <span style=\"color: #222222;background-color: #D1DFE4\" class=\"ugb-highlight\">npm install<\/span><ol><li>You should see a bunch of things happening in the terminal<\/li><li>There shoud be a new <strong>node_modules<\/strong> folder and <strong>package-lock.json<\/strong> file.<\/li><li>If you get some messages about updating node or nvm you can address those later.<\/li><\/ol><\/li><li>Type: <span style=\"color: #222222;background-color: #D1DFE4\" class=\"ugb-highlight\">npm start<\/span><ol><li>This should compile\/build your files and start a server where you can see your site.<\/li><li>Your build files will be in a new folder named <strong>public<\/strong>.<\/li><\/ol><\/li><li>Command Click on the first link (to localhost) in the terminal to view your site. You can also copy and paste the link into a browser.<\/li><li>You should see the site in your browser.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Alternative<\/h2>\n\n\n\n<p>We used this example first in class. Then I created the repository above that is closer to how your all organized your Responsive Site projects. Here is the info on Stephanie Eckles starter repo we did in class on 10\/13\/21<\/p>\n\n\n\n<p><meta charset=\"utf-8\"><li>Go to the Starter example page: <a href=\"https:\/\/smol-11ty-starter.netlify.app\/\">https:\/\/smol-11ty-starter.netlify.app\/<\/a><\/li><\/p>\n\n\n\n<p><li>Click on <strong>Generate a repo from this template <\/strong>link in the Quick Start section: <a href=\"https:\/\/github.com\/5t3ph\/smol-11ty-starter\/generate\">https:\/\/github.com\/5t3ph\/smol-11ty-starter\/generate<\/a>\u00a0<\/li><\/p>\n\n\n\n<p>You can then clone this repo to VS Code and work with it like we work with the other repositories.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post goes through the steps to create a basic Eleventy (11ty) site from Prof Stein&#8217;s Eleventy Basic template.<\/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":[55,54,68,149],"coauthors":[87],"class_list":["post-1854","post","type-post","status-publish","format-standard","hentry","category-eleventy","category-eleventy-site","tag-11ty","tag-eleventy","tag-example","tag-starter","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 goes through the steps to create a basic Eleventy (11ty) site from Prof Stein&#8217;s Eleventy Basic template.<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/category\/topics\/jamstack\/eleventy\/\" rel=\"category tag\">Eleventy<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/category\/projects\/eleventy-site\/\" rel=\"category tag\">Eleventy Site<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/author\/cstein\/"},"comments_num_v2":"1 comment","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-fall-21\/author\/cstein\/"},"uagb_comment_info":1,"uagb_excerpt":"This post goes through the steps to create a basic Eleventy (11ty) site from Prof Stein's Eleventy Basic template.","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/1854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/comments?post=1854"}],"version-history":[{"count":4,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/1854\/revisions"}],"predecessor-version":[{"id":1870,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/1854\/revisions\/1870"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/media?parent=1854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/categories?post=1854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/tags?post=1854"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/coauthors?post=1854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}