{"id":373,"date":"2019-02-04T23:31:23","date_gmt":"2019-02-04T23:31:23","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/dh201w21\/?page_id=373"},"modified":"2021-02-01T14:36:34","modified_gmt":"2021-02-01T22:36:34","slug":"publish-your-website-with-github-pages","status":"publish","type":"page","link":"http:\/\/miriamposner.com\/classes\/dh201w21\/tutorials-guides\/web-development\/publish-your-website-with-github-pages\/","title":{"rendered":"Publish your website with GitHub pages"},"content":{"rendered":"\n<p>Now that you&#8217;re an HTML\/CSS wizard, let&#8217;s actually put your page online, so that everyone else can admire it! We&#8217;ll do this with a tool called GitHub Pages. In order to use it, you will have to sign up for an account with GitHub. (If you don&#8217;t want to do that, please talk to me about alternatives.)<\/p>\n\n\n\n<p><a href=\"http:\/\/miriamposner.com\/classes\/dh201w21\/final-project\/building-your-project-site\/\">Here<\/a>, I explain more about what GitHub is and why I&#8217;ve chosen GitHub Pages for you to learn.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/publish-your-own-website-with-github-pages.md#1-sign-up-for-a-github-account\"><\/a>1. Sign up for a GitHub account<\/h2>\n\n\n\n<p>Go to <a href=\"https:\/\/github.com\/\">GitHub<\/a> and sign up for an account. You may have to verify that you&#8217;re a human, and on the next page, please&nbsp;<strong>select the free account<\/strong>&nbsp;and press&nbsp;<strong>Continue<\/strong>. You can enter your interests on the next page or just skip that step.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/images\/publish-your-own-website-with-github-pages\/sign-up-for-a-github-account.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/github.com\/miriamposner\/publish-website\/raw\/master\/images\/publish-your-own-website-with-github-pages\/sign-up-for-a-github-account.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/publish-your-own-website-with-github-pages.md#2-create-a-repository\"><\/a>2. Create a repository<\/h2>\n\n\n\n<p>On GitHub, repositories (&#8220;repos&#8221;) are something like folders. People create them to hold projects or chunks of code. We&#8217;ll create a repo for our website.<\/p>\n\n\n\n<p>Click on\u00a0<strong>Create a repository<\/strong>. You may need to verify your email address before you proceed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"http:\/\/miriamposner.com\/classes\/dh201w21\/wp-content\/uploads\/sites\/18\/2021\/02\/Screen-Shot-2021-02-01-at-8.52.10-AM-1024x589.png\" alt=\"\" class=\"wp-image-885\" srcset=\"http:\/\/miriamposner.com\/classes\/dh201w21\/wp-content\/uploads\/sites\/18\/2021\/02\/Screen-Shot-2021-02-01-at-8.52.10-AM-1024x589.png 1024w, http:\/\/miriamposner.com\/classes\/dh201w21\/wp-content\/uploads\/sites\/18\/2021\/02\/Screen-Shot-2021-02-01-at-8.52.10-AM-300x172.png 300w, http:\/\/miriamposner.com\/classes\/dh201w21\/wp-content\/uploads\/sites\/18\/2021\/02\/Screen-Shot-2021-02-01-at-8.52.10-AM-768x441.png 768w, http:\/\/miriamposner.com\/classes\/dh201w21\/wp-content\/uploads\/sites\/18\/2021\/02\/Screen-Shot-2021-02-01-at-8.52.10-AM-1536x883.png 1536w, http:\/\/miriamposner.com\/classes\/dh201w21\/wp-content\/uploads\/sites\/18\/2021\/02\/Screen-Shot-2021-02-01-at-8.52.10-AM-1568x901.png 1568w, http:\/\/miriamposner.com\/classes\/dh201w21\/wp-content\/uploads\/sites\/18\/2021\/02\/Screen-Shot-2021-02-01-at-8.52.10-AM-202x116.png 202w, http:\/\/miriamposner.com\/classes\/dh201w21\/wp-content\/uploads\/sites\/18\/2021\/02\/Screen-Shot-2021-02-01-at-8.52.10-AM.png 1900w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/publish-your-own-website-with-github-pages.md#3-give-your-repo-a-very-specific-name\"><\/a>3. Give your repo a (very specific!) name<\/h2>\n\n\n\n<p>GitHub is set up so that if you put HTML files in a repo with a very specific name, GitHub will understand that you want to create a website.<\/p>\n\n\n\n<p>In the field labeled <strong>Repository name<\/strong>, name your repo according to this pattern:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> yourusername.github.io\n<\/code><\/pre>\n\n\n\n<p>In the name above, replace&nbsp;<strong>yourusername<\/strong>&nbsp;with your actual username. So, for example, I would name my repo<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> miriam-test.github.io\n<\/code><\/pre>\n\n\n\n<p>The .github.io part is important, as is using your exact username before .github. My username is miriam-test, which is why I named the repository as I did.<\/p>\n\n\n\n<p>Be sure this is exactly right, or your page won&#8217;t work.<\/p>\n\n\n\n<p>You can leave the other fields as they are and press&nbsp;<strong>Create<\/strong>&nbsp;<strong>repository<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/images\/publish-your-own-website-with-github-pages\/give-your-repo-a--very-specific---name.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/github.com\/miriamposner\/publish-website\/raw\/master\/images\/publish-your-own-website-with-github-pages\/give-your-repo-a--very-specific---name.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/publish-your-own-website-with-github-pages.md#4-add-your-html-and-css-to-your-repo-1\"><\/a>4. Add your HTML and CSS to your repo (1)<\/h2>\n\n\n\n<p>Now you have a place where you can put the HTML and CSS files you created earlier. Let&#8217;s upload those files.<\/p>\n\n\n\n<p>Click on&nbsp;<strong>uploading an existing file<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/images\/publish-your-own-website-with-github-pages\/add-your-html-and-css-to-your-repo--1-.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/github.com\/miriamposner\/publish-website\/raw\/master\/images\/publish-your-own-website-with-github-pages\/add-your-html-and-css-to-your-repo--1-.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/publish-your-own-website-with-github-pages.md#5-add-your-html-and-css-to-your-repo-2\"><\/a>5. Add your HTML and CSS to your repo (2)<\/h2>\n\n\n\n<p>Drag both your&nbsp;<strong>index.html<\/strong>&nbsp;and your&nbsp;<strong>style.css<\/strong>&nbsp;files to the box labeled&nbsp;<strong>Drag files here to add them to your repository<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/images\/publish-your-own-website-with-github-pages\/add-your-html-and-css-to-your-repo--2-.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/github.com\/miriamposner\/publish-website\/raw\/master\/images\/publish-your-own-website-with-github-pages\/add-your-html-and-css-to-your-repo--2-.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/publish-your-own-website-with-github-pages.md#6-commit-your-changes\"><\/a>6. Commit your changes<\/h2>\n\n\n\n<p>Once you&#8217;ve dropped your files in the box, you need to&nbsp;<strong>Commit changes<\/strong>. This is a Github thing. Every time you save changes to a repo, you write a &#8220;commit message&#8221; that summarizes what you&#8217;re changing. Here are some examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Fix typos<\/li><li>Add documentation<\/li><li>Add CSS styling<\/li><\/ul>\n\n\n\n<p>They should be fewer than 50 characters. When you first upload something to a repo, you can use the commit message&nbsp;<strong>Initial commit<\/strong>. You can expand on your message in the body text box. When you&#8217;re done, press the&nbsp;<strong>Commit changes<\/strong>button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/images\/publish-your-own-website-with-github-pages\/commit-your-changes.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/github.com\/miriamposner\/publish-website\/raw\/master\/images\/publish-your-own-website-with-github-pages\/commit-your-changes.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/publish-your-own-website-with-github-pages.md#7-look-at-your-website\"><\/a>7. Look at your website<\/h2>\n\n\n\n<p>Now your website is live! The URL of your site will be&nbsp;<strong>yourusername.github.io<\/strong>, where&nbsp;<strong>yourusername<\/strong>&nbsp;is actually your username. For example, my website is now miriam-test.github.io.<\/p>\n\n\n\n<p>You may need to give your website a few minutes to go live. If you&#8217;ve waited more than five minutes or so and it still isn&#8217;t working, it&#8217;s probably related to a <a href=\"https:\/\/github.community\/t5\/GitHub-Pages\/my-github-page-doesn-t-redirect-to-index-html\/m-p\/7377\">specific problem<\/a> GitHub Pages sometimes has in finding your index page. Try entering <strong>yourusername.github.io\/index.html<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/images\/publish-your-own-website-with-github-pages\/look-at-your-website.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/github.com\/miriamposner\/publish-website\/raw\/master\/images\/publish-your-own-website-with-github-pages\/look-at-your-website.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/publish-your-own-website-with-github-pages.md#8-make-changes-1\"><\/a>8. Make changes (1)<\/h2>\n\n\n\n<p>If you&#8217;d like to make changes to your website, there are a couple ways to do it. The first is to edit the file directly from GitHub. You can do that by clicking on the file and then pressing the edit button. (It looks like a little pencil.) When you&#8217;re done making changes, you&#8217;ll need to write a commit message again.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/images\/publish-your-own-website-with-github-pages\/make-changes--1-.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/github.com\/miriamposner\/publish-website\/raw\/master\/images\/publish-your-own-website-with-github-pages\/make-changes--1-.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/publish-your-own-website-with-github-pages.md#9-make-changes-2\"><\/a>9. Make changes (2)<\/h2>\n\n\n\n<p>The second way to make changes is to edit the files on your computer, in your text editor. When you&#8217;re done making those changes, upload the file to GitHub (in the same way you did in Step 5), making sure that the files have the same names as they did when you uploaded them the first time. This will overwrite and replace the previous versions of your file, much like saving a Word document to a folder that already contains a Word document with the same name. Again, you&#8217;ll write a commit message.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/github.com\/miriamposner\/publish-website\/blob\/master\/images\/publish-your-own-website-with-github-pages\/make-changes--2-.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/github.com\/miriamposner\/publish-website\/raw\/master\/images\/publish-your-own-website-with-github-pages\/make-changes--2-.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Now you&#8217;re an HTML\/CSS\/GitHub Pages expert! (Almost!) This is a lot of manual fiddling, though. There&#8217;s actually an easier way to build and publish a website, and <a href=\"http:\/\/miriamposner.com\/classes\/dh201w21\/tutorials-guides\/web-development\/make-a-fancy-site-with-mobirise\/\">we&#8217;ll investigate that now<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Now that you&#8217;re an HTML\/CSS wizard, let&#8217;s actually put your page online, so that everyone else can admire it! We&#8217;ll do this with a tool called GitHub Pages. In order&hellip; <a class=\"more-link\" href=\"http:\/\/miriamposner.com\/classes\/dh201w21\/tutorials-guides\/web-development\/publish-your-website-with-github-pages\/\">Continue reading <span class=\"screen-reader-text\">Publish your website with GitHub pages<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":371,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-373","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/miriamposner.com\/classes\/dh201w21\/wp-json\/wp\/v2\/pages\/373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/miriamposner.com\/classes\/dh201w21\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/miriamposner.com\/classes\/dh201w21\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh201w21\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh201w21\/wp-json\/wp\/v2\/comments?post=373"}],"version-history":[{"count":0,"href":"http:\/\/miriamposner.com\/classes\/dh201w21\/wp-json\/wp\/v2\/pages\/373\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh201w21\/wp-json\/wp\/v2\/pages\/371"}],"wp:attachment":[{"href":"http:\/\/miriamposner.com\/classes\/dh201w21\/wp-json\/wp\/v2\/media?parent=373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}