{"id":41,"date":"2026-01-10T17:16:04","date_gmt":"2026-01-10T22:16:04","guid":{"rendered":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/chapter\/using-github-as-a-web-server\/"},"modified":"2026-01-18T17:07:04","modified_gmt":"2026-01-18T22:07:04","slug":"using-github-as-a-web-server","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/chapter\/using-github-as-a-web-server\/","title":{"raw":"Chapter 2 \u2022 GitHub as a Web Server","rendered":"Chapter 2 \u2022 GitHub as a Web Server"},"content":{"raw":"

What is GitHub?<\/h2>\r\n
\r\n\r\n \r\n\r\n[caption id=\"attachment_73\" align=\"alignleft\" width=\"150\" class=\"align left \"]\"\"<\/a> Github logo[\/caption]\r\n\r\nGitHub<\/a>, owned by Microsoft, is a free platform that allows software developers (including web designers) to create, manage, distribute, and share code. GitHub is a great way to publish web pages. The intricacies of adding, displaying, and deleting files do take getting used to, which is the reason for this chapter. The site allows a maximum file size of 25MB so be careful of large image and especially large video files.\r\n\r\n<\/div>\r\n
\r\n\r\nGithub is not confidential. Anyone who knows your username can see your files because the point of the platform is to share information.\r\n
\r\n

Reminder: Your Login and Your URL Are Different<\/h2>\r\nLogin for you to upload files (do not submit):\r\nhttps:\/\/github.com\/youruserid<\/b>\r\n\r\nURL to see your files on the web (submit this):\r\nhttp:\/\/youruserid.github.io\/repositoryname\/<\/b>\r\nThe first file should be named \u201cindex.html\u201d (lowecase \u201ci\u201d) to load automatically. You must \"deploy\" your repository for it to be visible on the web.\r\n\r\n<\/div>\r\n

Making a Github Repository<\/h2>\r\n
    \r\n \t
  1. Go to github.com<\/a>, create an account, and log in.<\/li>\r\n \t
  2. In your Dashboard, click \u201cCreate repository\u201c (Figure 2-1 below). This will be the folder for your HTML files.<\/li>\r\n \t
  3. The URL for a file named \u201cindex.html\u201d will be: username.github.io\/repository\/index.html.<\/li>\r\n \t
  4. In the respository, click Add file > Upload Files, then drag-and-drop the files you want to upload into the window.<\/li>\r\n \t
  5. At the bottom of the window, click \u201cCommit changes.\u201d<\/li>\r\n \t
  6. To replace a file, re-upload the new file; it will replace the old file of the same name.<\/li>\r\n \t
  7. To delete a file, click on the file, then the three dots at the top right of the window, and select \u201cDelete.\u201d<\/li>\r\n<\/ol>\r\n[caption id=\"\" align=\"aligncenter\" width=\"256\"]\"image\"<\/a> Figure 2-1. Making a new folder (\"repository\") on Github.[\/caption]\r\n

    Preparing Files for Upload<\/h2>\r\n<\/div>\r\n
    \r\n
      \r\n \t
    1. Make a \u201cgold master\u201d folder on your desktop called \u201csite\u201d or some other name.<\/li>\r\n \t
    2. Place your .html files and any linked css, image, video, font, or other files into this folder.<\/li>\r\n \t
    3. I recommend using all lowercase letters and avoiding spaces in file names. Use \u201cindex.html\u201d for the home page, which will load automatically.<\/li>\r\n \t
    4. Preflight the web pages by opening in a browser, checking for proper display, missing images, and broken or incorrect links.<\/li>\r\n \t
    5. Select all the files and upload to your Github repository.<\/li>\r\n<\/ol>\r\n[caption id=\"\" align=\"aligncenter\" width=\"768\"]\"image\"<\/a> Figure 2-3. Click \"Upload an existing file\" to add files to your repository by drag-and-drop.[\/caption]\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"768\"]\"image\"<\/a> Figure 2-4. Upload files by drag-and-drop.[\/caption]\r\n

      Setting File Visibility and Deleting<\/h2>\r\n
        \r\n \t
      1. After uploading your files to a Repository, click the Settings button at the top, Pages at left, and scroll down to Select \"main\" as the deployment (Figure 2-5 below).<\/li>\r\n \t
      2. To delete a file, click on the file. From the three dots at right, select Delete File (Figure 2-6 below).<\/li>\r\n \t
      3. To delete a repository, go to the repository, select Settings, and scroll down to \"Danger Zone\" > Delete this repository.<\/li>\r\n<\/ol>\r\n[caption id=\"\" align=\"aligncenter\" width=\"768\"]\"image\"<\/a> Figure 2-5. To be visible on the web, your repository must be \"deployed\" through Settings > Pages. Set deployment from the \"main\" branch and click \"Save\" to save settings.[\/caption]\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"256\"]\"image\"<\/a> Figure 2-6. To delete a file, click on the file. From the three dots at right, select Delete File.[\/caption]\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
        Quick-Reference Guide to Github<\/strong><\/td>\r\n<\/tr>\r\n
        Task<\/em><\/td>\r\nPath<\/em><\/td>\r\n<\/tr>\r\n
        Create Repository (Folder)<\/td>\r\nHome > Repositories > New<\/td>\r\n<\/tr>\r\n
        Delete Repository<\/td>\r\nClick on repository > Settings > Delete this repository<\/td>\r\n<\/tr>\r\n
        Rename Repository<\/td>\r\nRepository > Settings > Rename<\/td>\r\n<\/tr>\r\n
        Make Repository Viewable<\/td>\r\nRepository > Pages > Source > Deploy from a branch > Main<\/td>\r\n<\/tr>\r\n
        Add Files to Repository<\/td>\r\nRepository > Add File<\/td>\r\n<\/tr>\r\n
        URL for your files<\/td>\r\ngithub.com\/[userid]\/[repository-name]<\/td>\r\n<\/tr>\r\n
        URL for your page<\/td>\r\n[userid].github.io\/[repository-name]<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>","rendered":"

        What is GitHub?<\/h2>\n
        \n

         <\/p>\n

        \"\"<\/a>
        Github logo<\/figcaption><\/figure>\n

        GitHub<\/a>, owned by Microsoft, is a free platform that allows software developers (including web designers) to create, manage, distribute, and share code. GitHub is a great way to publish web pages. The intricacies of adding, displaying, and deleting files do take getting used to, which is the reason for this chapter. The site allows a maximum file size of 25MB so be careful of large image and especially large video files.<\/p>\n<\/div>\n

        \n

        Github is not confidential. Anyone who knows your username can see your files because the point of the platform is to share information.<\/p>\n

        \n

        Reminder: Your Login and Your URL Are Different<\/h2>\n

        Login for you to upload files (do not submit):
        \nhttps:\/\/github.com\/youruserid<\/b><\/p>\n

        URL to see your files on the web (submit this):
        \nhttp:\/\/youruserid.github.io\/repositoryname\/<\/b>
        \nThe first file should be named \u201cindex.html\u201d (lowecase \u201ci\u201d) to load automatically. You must “deploy” your repository for it to be visible on the web.<\/p>\n<\/div>\n

        Making a Github Repository<\/h2>\n
          \n
        1. Go to github.com<\/a>, create an account, and log in.<\/li>\n
        2. In your Dashboard, click \u201cCreate repository\u201c (Figure 2-1 below). This will be the folder for your HTML files.<\/li>\n
        3. The URL for a file named \u201cindex.html\u201d will be: username.github.io\/repository\/index.html.<\/li>\n
        4. In the respository, click Add file > Upload Files, then drag-and-drop the files you want to upload into the window.<\/li>\n
        5. At the bottom of the window, click \u201cCommit changes.\u201d<\/li>\n
        6. To replace a file, re-upload the new file; it will replace the old file of the same name.<\/li>\n
        7. To delete a file, click on the file, then the three dots at the top right of the window, and select \u201cDelete.\u201d<\/li>\n<\/ol>\n
          \"image\"<\/a>
          Figure 2-1. Making a new folder (“repository”) on Github.<\/figcaption><\/figure>\n

          Preparing Files for Upload<\/h2>\n<\/div>\n
          \n
            \n
          1. Make a \u201cgold master\u201d folder on your desktop called \u201csite\u201d or some other name.<\/li>\n
          2. Place your .html files and any linked css, image, video, font, or other files into this folder.<\/li>\n
          3. I recommend using all lowercase letters and avoiding spaces in file names. Use \u201cindex.html\u201d for the home page, which will load automatically.<\/li>\n
          4. Preflight the web pages by opening in a browser, checking for proper display, missing images, and broken or incorrect links.<\/li>\n
          5. Select all the files and upload to your Github repository.<\/li>\n<\/ol>\n
            \"image\"<\/a>
            Figure 2-3. Click “Upload an existing file” to add files to your repository by drag-and-drop.<\/figcaption><\/figure>\n
            \"image\"<\/a>
            Figure 2-4. Upload files by drag-and-drop.<\/figcaption><\/figure>\n

            Setting File Visibility and Deleting<\/h2>\n
              \n
            1. After uploading your files to a Repository, click the Settings button at the top, Pages at left, and scroll down to Select “main” as the deployment (Figure 2-5 below).<\/li>\n
            2. To delete a file, click on the file. From the three dots at right, select Delete File (Figure 2-6 below).<\/li>\n
            3. To delete a repository, go to the repository, select Settings, and scroll down to “Danger Zone” > Delete this repository.<\/li>\n<\/ol>\n
              \"image\"<\/a>
              Figure 2-5. To be visible on the web, your repository must be “deployed” through Settings > Pages. Set deployment from the “main” branch and click “Save” to save settings.<\/figcaption><\/figure>\n
              \"image\"<\/a>
              Figure 2-6. To delete a file, click on the file. From the three dots at right, select Delete File.<\/figcaption><\/figure>\n\n\n\n\n\n\n\n\n\n\n\n
              Quick-Reference Guide to Github<\/strong><\/td>\n<\/tr>\n
              Task<\/em><\/td>\nPath<\/em><\/td>\n<\/tr>\n
              Create Repository (Folder)<\/td>\nHome > Repositories > New<\/td>\n<\/tr>\n
              Delete Repository<\/td>\nClick on repository > Settings > Delete this repository<\/td>\n<\/tr>\n
              Rename Repository<\/td>\nRepository > Settings > Rename<\/td>\n<\/tr>\n
              Make Repository Viewable<\/td>\nRepository > Pages > Source > Deploy from a branch > Main<\/td>\n<\/tr>\n
              Add Files to Repository<\/td>\nRepository > Add File<\/td>\n<\/tr>\n
              URL for your files<\/td>\ngithub.com\/[userid]\/[repository-name]<\/td>\n<\/tr>\n
              URL for your page<\/td>\n[userid].github.io\/[repository-name]<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"author":6,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-41","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":19,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/41\/revisions"}],"predecessor-version":[{"id":72,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/41\/revisions\/72"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/41\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapter-type?post=41"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/contributor?post=41"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/license?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}