Here is a practical step-by-step guide to creating and hosting HTML, CSS, and JavaScript pages on GitHub.
Step 1: Create a GitHub Account
Visit GitHub Sign Up
Create an account.
Verify your email address.
Step 2: Create a New Repository
Log in to GitHub.
Click the + icon at the top-right.
Select New Repository.
Enter a repository name (e.g.,
my-website).Choose Public.
Check Add a README file.
Click Create Repository.
Step 3: Create Your HTML Page
Open your repository.
Click Add File → Create New File.
Name the file:
index.html
Add the following code:
<!DOCTYPE html>
<html>
<head>
<title>My First GitHub Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This website is hosted on GitHub.</p>
<button onclick="showMessage()">Click Me</button>
<script src="script.js"></script>
</body>
</html>
Click Commit Changes.
Step 4: Create Your CSS File
Click Add File → Create New File.
Name it:
style.css
Add:
body{
font-family: Arial, sans-serif;
text-align:center;
background:#f4f4f4;
padding:50px;
}
h1{
color:#0077cc;
}
button{
background:#0077cc;
color:white;
border:none;
padding:10px 20px;
cursor:pointer;
}
Commit the file.
Step 5: Create Your JavaScript File
Click Add File → Create New File.
Name it:
script.js
Add:
function showMessage(){
alert("Welcome to JavaScript on GitHub!");
}
Commit the file.
Step 6: Enable GitHub Pages
Open your repository.
Click Settings.
Select Pages from the left menu.
Under Build and Deployment:
Source = Deploy from Branch
Branch = Main
Folder = /root
Click Save.
GitHub will generate a URL like:
https://yourusername.github.io/my-website/
After a few minutes, your website will be live.
Step 7: Update Your Website
Whenever you want to change your website:
Open the file.
Click the pencil icon.
Make your changes.
Commit Changes.
GitHub Pages automatically republishes your site.
Step 8: Recommended Folder Structure
For larger projects:
my-website/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│ └── style.css
│
├── js/
│ └── script.js
│
└── images/
└── logo.png
Update your links:
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
Step 9: Using Visual Studio Code (Recommended)
Install:
Clone your repository:
git clone https://github.com/yourusername/my-website.git
Open the project in VS Code, edit files, then push changes:
git add .
git commit -m "Updated website"
git push origin main
Step 10: Create a Professional Portfolio Site
For your work with CCYI Global Enterprise, you can create:
Home
About Us
Services
Portfolio
Training Academy
Blog
Contact
Payment Page
Student Portal
and host it free on GitHub Pages before later connecting a custom domain such as:
www.ccyiglobalenterprise.com.ng
This is an excellent way to showcase your website design, LMS development, digital training, and consulting services to potential clients.
No comments:
Post a Comment