Lesson 30 How-to Project Part 4

We’re going to get our project online today. You already have a repository on Github.com and a git directory in your project folder. You’ll need to navigate into your project directory by using your Git Bask program. Use cd for change directory to move from folder to folder (from directory to directory). At any time use ls (LS) to list what files are in any given directory to help you navigate.

Once in your howTo project directory, type git add .  The period tells it to add every file that’s been changed. Then you commit your changes. Type git commit -m “Add HTML and CSS.” Finally, push your changes, send them to your online repository, the online holding place for your files. Type git push origin master.

Then go to your GitHub repository and click on Settings. Scroll down to Github Pages. Under Source change None to Master Branch. The page will reload. When you scroll back down to Github Pages it will show you the link to your page. This will not work right away! Give it a few minutes.

While you wait, go to https://www.favicon-generator.org/.

  • Change the setting to Generate only 16 x 16 favicon.ico and add an image. This will be the little tiny picture in the browser tab to identify your brand.
  • Click Create Favicon. It will give you an image to download.
  • Download it into your project directory, maybe you have an images folder to put it in.
  • Then copy the link HTML tag it gives you. Copy it into the Head of your index.html document. Make sure the file path finds the image where you saved it! The link it gives you will look for the image file in the same part of your project directory where the index.html file is found. You may need to change it to something like, “./resources/images/favicon.ico”

Then go through the steps to add, commit, and push again. Now go check your site! It should be there, though any change may take a couple of minutes to show up.

You can watch this lesson online.