After creating your web pages locally, the next step is to publish them so that they are accessible to the public. You have many options for publishing such as hosting services, cloud solutions, set up your own web servers or use Github pages.
In this course, we'll utilize GitHub Pages for publishing your tasks and project work. This exercise guides you through using GitHub Pages to publish your HTML pages.
Note: At this point, you've successfully completed Exercise 1 and set up a directory structure for your exercises. Now, proceed with the following steps:
Activity 1: Add Local Repository to Your GitHub Account
- Open GitHub Desktop and select "Add Local Repository."
- Choose the folder on your computer where Exercise 1 is located and click "Add repository."
- Click "Publish Repository."
Activity 2: Enable GitHub Pages
- Open your GitHub repository on the GitHub website.
- Click on the "Settings" tab.
- Scroll down to the "GitHub Pages" section.
- In the "Source" dropdown, select "main branch" (or another branch if you prefer).
- Click "Save."
Activity 3: Verify Your Website
- Scroll back down to the "GitHub Pages" section.
- After a few moments, you'll see a message saying "Your site is ready to be published at" followed by a URL (e.g: https://yourusername.github.io/repositoryname/).
- Visit this URL to verify that your HTML pages are successfully published.
Your website is now hosted using GitHub Pages and is publicly accessible on the internet. Any changes made to your local repository will automatically be reflected on your website.
Keep in mind that GitHub Pages may take a few minutes to reflect changes after you push updates to your repository.
At this point, we have already created a couple of simple HTML files: index.html and exercise1.html. We'll now transition to using HTML5 for our web pages.
In this task, you will be doing the same steps as in Exercise 1 but by using HTML5 and semantic elements for a more modern and structured approach. Conduct the following steps:
- Create a file named exercise2.html in the root folder.
- Use the HTML boilerplate to get the initial part of the HTML page.
- In the head section
- Update the title as HTML5 & GitHub Pages – Exercise 2
- Add an author and description to the meta elements. (Guidelines: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#adding_an_author_and_description )
- In the body section (always use semantic elements). Copy the content of the body part from exericse1.html and apply semantic elements such as header, footer, nav etc. (Common Semantic Elements)[https://dipaish.github.io/www23/gpages#common-semantic-elements]
- Use an address tag to write the address "Hämeen ammattikorkeakoulu HAMK PL 230 13101 Hämeenlinna" in your html document Guidelines
- Update your index.html that is Exercise 2 in index.html should link to this file (exercise2.html) Guide:Creating hyperlinks
Note: Since you're publishing from the main branch, your website is automatically updated and shared with everyone whenever you push updates to your main branch.