Setup Guide for Your GitHub Pages Website

Setup Guide for Your GitHub Pages Website

🎉 Congratulations!

Your GitHub Pages website has been successfully set up with the following structure:

📁 Project Structure

osiajod.github.io/
├── _config.yml              # Jekyll configuration
├── _layouts/                # HTML templates
│   ├── default.html         # Main layout template
│   ├── page.html           # Page layout
│   └── post.html           # Blog post layout
├── _posts/                 # Blog posts (YYYY-MM-DD-title.md)
├── _pages/                 # Static pages
├── assets/                 # Static assets
│   ├── css/main.css        # Stylesheets
│   ├── js/main.js          # JavaScript files
│   └── images/             # Images (add your images here)
├── about.md                # Main about page (homepage)
├── index.html              # Redirect to about page
├── Gemfile                 # Ruby dependencies
├── .github/workflows/      # GitHub Actions for deployment
└── README.md               # Project documentation

🚀 Deployment

  1. Push to GitHub: Simply push your changes to the main branch
  2. GitHub Actions: The site will automatically build and deploy
  3. Access: Your site will be available at https://osiajod.github.io

Manual Deployment

If you prefer manual deployment:

  1. Go to your repository settings on GitHub
  2. Navigate to “Pages” in the sidebar
  3. Select “GitHub Actions” as the source
  4. The workflow will handle the rest

✏️ Customization

1. Update Personal Information

Edit _config.yml:

title: "Your Name's Personal Website"
description: "Your description here"
author: "Your Name"
email: "your-email@example.com"

social:
  github: your-github-username
  linkedin: your-linkedin-profile
  twitter: your-twitter-handle
  email: your-email@example.com

2. Update About Page

Edit about.md to include your:

  • Publications: Academic papers, articles, etc.
  • Educational Background: Degrees, institutions, achievements
  • Projects: Your technical projects with links
  • Work Experience: Professional experience and achievements
  • Contact: Your contact information

3. Add Blog Posts

Create new files in _posts/ with the format YYYY-MM-DD-title.md:

---
layout: post
title: "Your Post Title"
date: 2024-01-15
author: Your Name
categories: [Category1, Category2]
tags: [tag1, tag2]
---

Your post content here...

4. Add Static Pages

Create new files in _pages/ or root directory:

---
layout: page
title: "Page Title"
permalink: /page-url/
---

Your page content here...

5. Customize Styling

Edit assets/css/main.css to modify:

  • Colors and fonts
  • Layout and spacing
  • Responsive design
  • Custom components

📝 Content Sections

Main About Page (about.md)

The homepage includes all the sections you requested:

  • ✅ Publications: Academic papers and technical articles
  • ✅ Educational Background: Degrees, institutions, achievements
  • ✅ Projects: Showcase of technical projects with links
  • ✅ Work Experience: Professional experience and achievements
  • ✅ Contact: Social media links and contact information

Blog Posts (_posts/)

  • Support for categories and tags
  • Automatic date-based URLs
  • RSS feed generation
  • Code syntax highlighting

Static Pages (_pages/)

  • Resume/CV page (example included)
  • Additional content pages
  • Custom layouts and styling

🔧 Features Included

  • Responsive Design: Works on all devices
  • SEO Optimized: Built-in SEO features and sitemap
  • RSS Feed: Automatic feed generation for blog posts
  • Clean Navigation: Sticky header with easy navigation
  • Code Highlighting: Syntax highlighting for code blocks
  • Social Media Integration: Links to GitHub, LinkedIn, Twitter
  • GitHub Actions: Automatic deployment pipeline
  • Modern CSS: Clean, professional styling

🛠️ Local Development

If you want to test locally:

  1. Install Ruby (version 2.6 or higher)
  2. Install Jekyll: 
    gem install jekyll bundler
  3. Install dependencies: 
    bundle install
  4. Run development server: 
    bundle exec jekyll serve
  5. View site: Open http://localhost:4000

📚 Next Steps

  1. Update personal information in _config.yml and about.md
  2. Add your content to the about page sections
  3. Create blog posts in the _posts/ directory
  4. Add images to assets/images/
  5. Customize styling in assets/css/main.css
  6. Push changes to GitHub for automatic deployment

🆘 Troubleshooting

Common Issues:

  • Build fails: Check the GitHub Actions logs
  • Styling issues: Verify CSS syntax in assets/css/main.css
  • Posts not showing: Ensure proper front matter in markdown files
  • Images not loading: Check file paths in assets/images/

Getting Help:

  • Check the Jekyll documentation
  • Review GitHub Actions logs for build errors
  • Verify markdown syntax and front matter

🎯 Your Site is Ready!

Your GitHub Pages website is now set up with:

  • ✅ Professional, responsive design
  • ✅ Blog post support
  • ✅ Static page support
  • ✅ All requested sections (Publications, Education, Projects, Work Experience, Contact)
  • ✅ Automatic deployment via GitHub Actions
  • ✅ SEO optimization
  • ✅ RSS feed generation

Just update the content with your personal information and start blogging!

Happy coding! 🚀