{"id":2680,"date":"2022-03-02T01:13:47","date_gmt":"2022-03-02T06:13:47","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/?p=2680"},"modified":"2022-03-02T01:14:01","modified_gmt":"2022-03-02T06:14:01","slug":"github-pages","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/tools\/github-pages\/","title":{"rendered":"Publish with GitHub Pages"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Actually putting your site on the web where anyone can see it is called publishing your site. This post describes how to publish a site using GitHub Pages.\u00a0Pages are a free feature of public GitHub repositories and a great way to host a basic site. Free web hosting through GitHub!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Step\">1. Click on the Settings link from your repository\u2019s home page.<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li>First make sure you have created your repository on GitHub. If you don\u2019t have a repository or there are no files in it, this won\u2019t work.<\/li><li>You will also need to be signed-in to GitHub to complete this process.<\/li><li>Go to your repository on GitHub.<\/li><li>Click on <strong>Settings<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"993\" height=\"206\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Settings.png\" alt=\"screenshot showing where to click Settings tab in the repository\" class=\"wp-image-2688\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Settings.png 993w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Settings-300x62.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Settings-768x159.png 768w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">2. Click on the Pages tab of Settings <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It is in the left vertical nav.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"977\" height=\"536\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Pages-.png\" alt=\"screenshot showing where to click Pages tab in Settings\" class=\"wp-image-2687\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Pages-.png 977w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Pages--300x165.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Pages--768x421.png 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3. Select a Source Branch for your Pages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Click the <strong>Select Source<\/strong>\u00a0dropdown and choose the\u00a0<strong>main branch.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"816\" height=\"375\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Branch.png\" alt=\"screenshot showing selecting a branch to publish in GitHub pages settings\" class=\"wp-image-2686\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Branch.png 816w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Branch-300x138.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Branch-768x353.png 768w\" sizes=\"auto, (max-width: 816px) 100vw, 816px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">4. Save Your Changes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Click the <strong>Save<\/strong> Button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On a side note,\u00a0<strong>DO NOT\u00a0<\/strong>use the Theme Chooser. This is a special way of using GitHub pages that does not just publish the pages you have in your repository.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"789\" height=\"308\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Branch-Save.png\" alt=\"Screenshot showing where to click the Save button - and not the choose a theme button.\" class=\"wp-image-2685\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Branch-Save.png 789w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Branch-Save-300x117.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Branch-Save-768x300.png 768w\" sizes=\"auto, (max-width: 789px) 100vw, 789px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">5. Changes are Saved<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When you save the changes the page will reload and you will get a message saying your site is ready to be published with a link. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"174\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Building.png\" alt=\"screenshot showing text on GitHub Pages settings that read &quot;Your site is ready to be published at&quot;\" class=\"wp-image-2684\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Building.png 760w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Building-300x69.png 300w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Note that at this time your site won&#8217;t be live yet. If you follow the link now you will get a 404 page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"926\" height=\"432\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-NotReady.png\" alt=\"screenshot of 404 page that shows when GitHub Pages is not done publishing\" class=\"wp-image-2683\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-NotReady.png 926w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-NotReady-300x140.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-NotReady-768x358.png 768w\" sizes=\"auto, (max-width: 926px) 100vw, 926px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">6. When your site is ready<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">When GitHub has published your site and it can be seen, the background color of the message will change from blue to green and the text will change to read that your site is published<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"805\" height=\"186\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Published.png\" alt=\"screenshot showing text on GitHub Pages settings changed to read &quot;your site is published at&quot;\" class=\"wp-image-2682\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Published.png 805w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Published-300x69.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Published-768x177.png 768w\" sizes=\"auto, (max-width: 805px) 100vw, 805px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Your GitHub Pages link will now be the link shown. You can give this link to anyone or put it in your portfolio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click the link to see your site<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"456\" height=\"283\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Live.png\" alt=\"screenshot of site after publishing through GitHub Pages\" class=\"wp-image-2681\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Live.png 456w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2022\/03\/GH-pages-Live-300x186.png 300w\" sizes=\"auto, (max-width: 456px) 100vw, 456px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>NOTE: There are a few reasons you might not see anything when you click the link.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It may take a few minutes for your pages to be published and for the link to be active.<\/li><li>If you don\u2019t have a file named index.html in the root of your repository (and it must be at the top level, not in any sub folders), then you will not see anything. <\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Actually putting your site on the web where anyone can see it is called publishing your site. This post describes how to publish a site using GitHub Pages.\u00a0Pages are a free feature of public GitHub repositories and a great way to host a basic site. Free web hosting through GitHub! 1. Click on the Settings&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/tools\/github-pages\/\">Continue reading <span class=\"screen-reader-text\">Publish with GitHub Pages<\/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":[142,136],"tags":[143,209],"coauthors":[87],"class_list":["post-2680","post","type-post","status-publish","format-standard","hentry","category-responsive-site","category-tools","tag-github","tag-publish","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>Actually putting your site on the web where anyone can see it is called publishing your site. This post describes how to publish a site using GitHub Pages.\u00a0Pages are a free feature of public GitHub repositories and a great way to host a basic site. Free web hosting through GitHub! 1. Click on the Settings link from your repository\u2019s home page. First make sure you have created your repository on GitHub. If you don\u2019t have a repository or there are no files in it, this won\u2019t work.You will also need to be signed-in to GitHub to complete this process.Go to&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/category\/projects\/responsive-site\/\" rel=\"category tag\">Responsive Site<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/category\/tools\/\" rel=\"category tag\">Tools<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/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-spring-22\/author\/cstein\/"},"uagb_comment_info":1,"uagb_excerpt":"Actually putting your site on the web where anyone can see it is called publishing your site. This post describes how to publish a site using GitHub Pages.\u00a0Pages are a free feature of public GitHub repositories and a great way to host a basic site. Free web hosting through GitHub! 1. Click on the Settings&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts\/2680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/comments?post=2680"}],"version-history":[{"count":1,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts\/2680\/revisions"}],"predecessor-version":[{"id":2689,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts\/2680\/revisions\/2689"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/media?parent=2680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/categories?post=2680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/tags?post=2680"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/coauthors?post=2680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}