12. Create a Website

You now have the information and skills needed to make a basic website. Let's do it!

1. Create a folder for your website's repository.

   note

   Don't create this folder inside your "webdev1" folder.

   Instead, we are going to create a separate folder and repository for our website.

   Name the folder in this format:

   YOUR_USERNAME_HERE.github.io

   For example, my GitHub username is "40px" so I created a folder named 40px.github.io

   

2. Start up VS Code and go to File -> Open Folder and find your new folder.

3. Create a blank file named .nojekyll inside your folder.

   Notice that it begins with a period.

   And those are 2 lowercase L's at the end of the file name:

   .nojekyll

4. Select the Source Control tab and click the Publish to GitHub button.

   note

   In order for this to work, you must have completed each step in the Technical Setup in the first lesson.

5. When prompted, click the appropriate options to allow GitHub access.

6. Select Publish to GitHub public repository

7. Make sure there is a checkmark next to .nojekyll and click OK

8. Verify that your new repository was created on GitHub.com.

9. In the Settings for the repository, go to Pages and make sure that it says your site is live.

   

   See the GitHub Pages documentation for further information.

10. Create a website!

    You could use this opportunity to create a website about a topic that is very important to you.

    It could be something serious or even something silly and fun!

    In my website example, I created a 3-page website with the following file/folder structure:

    

    index.html is the home page and is accessible at this URL:

    https://40px.github.io

    And the other 2 pages may be accessed using these URLs:

    • https://40px.github.io/about.html
    • https://40px.github.io/faq.html

    As an alternative, I could have created folders for the "about" and "faq" pages with index.html files inside:

    

    If I structured it like that, the pages could be accessed without .html at the end of the URLs:

    • 40px.github.io/about
    • 40px.github.io/faq

    However, that will not work when viewing the files on your local computer. This would only work when viewed on the web.

11. Make sure it passes HTML and CSS validation.

12. Push your changes to your Github repository.

13. Share the URL to your website with others and brag!

    https://github_user_name_here.github.io

    Nice work :) You should be very proud of your accomplishment!