Welcome to JPHENRI.COM! I’m excited to share the story of how I created this website using GitHub, GitHub Pages, Jekyll, and the Minima theme, with a little help from ChatGPT. If you’re interested in setting up your own site or want to learn more about these tools, this blog post will walk you through the process step by step.

Getting Started with GitHub Pages

GitHub Pages is a free service provided by GitHub that lets you host websites directly from a GitHub repository. It’s perfect for personal projects, portfolios, or even blogs like this one. Here’s how I got started:

Step 1: Creating the Repository on GitHub

The first step was to create a new repository on GitHub named jphenri.github.io. This naming convention is key because GitHub Pages automatically recognizes it as a personal website. After setting up the repository, I chose the main branch as the default.

Step 2: Enabling GitHub Pages

Next, I went to the repository settings and enabled GitHub Pages. I selected the main branch as the source, and just like that, my website was live on the internet. GitHub also offers a selection of pre-built themes, but I opted for more customization using Jekyll.

Using Jekyll for a Dynamic Website

Jekyll is a static site generator that’s perfect for creating blogs or project showcases. It works by converting Markdown files into a complete website.

Jekyll Folder Structure

When you create a new Jekyll site, it comes with a standard folder structure. Understanding this structure is key to customizing your site.

  • _config.yml: This is the main configuration file where you set up your site’s details, theme, plugins, and other configurations.
  • _posts/: This folder contains all your blog posts. Each post is a Markdown file named with the format YYYY-MM-DD-title.md.
  • _layouts/: Layouts are templates used to wrap your content. For example, a single post might use the post.html layout.
  • _includes/: This folder contains smaller chunks of HTML that can be included in other layouts or pages using the tag.
  • _sass/: This folder contains your Sass (CSS preprocessor) files. You can organize your styles here, and Jekyll will compile them into regular CSS.
  • _site/: This folder is generated by Jekyll and contains the final output of your site. It’s what gets served to visitors.
  • assets/: This folder holds your site’s assets like images, CSS, and JavaScript files.
  • index.md: This is your site’s homepage. You can edit this Markdown file to customize the content of your home page.

Configuring _config.yml

The _config.yml file is where you control most of your site’s settings. Here’s a basic configuration setup I used for JPHENRI.COM using minima theme:

title: "JPHENRI.COM"
description: "Showcasing my IT projects and blog."
baseurl: "" # Leave blank for the root of the domain
url: "https://jphenri.github.io" # Your GitHub Pages URL

theme: minima
plugins:
  - jekyll-feed
  - jekyll-seo-tag

# Exclude these files from the site
exclude:
  - README.md
  - Gemfile
  - Gemfile.lock

# Social media links
social_links:
  email: "mailto:your-email@example.com"
  github: "https://github.com/your-username"
  linkedin: "https://linkedin.com/in/your-profile"

# Markdown settings
markdown: kramdown
kramdown:
  input: GFM

Cheat Sheet: Common _config.yml Settings

Here’s a handy cheat sheet of common _config.yml settings that you can use to customize your Jekyll site:

# Basic Settings
title: "Your Site Title"
description: "A short description of your site"
baseurl: "" # The subpath of your site, e.g. /blog
url: "https://yourdomain.com" # Your website URL

# Build Settings
markdown: kramdown
permalink: pretty # Pretty URLs (no .html)
paginate: 5 # Number of posts per page in pagination

# Plugins
plugins:
  - jekyll-feed # Generates an RSS feed
  - jekyll-seo-tag # Adds SEO meta tags to your site
  - jekyll-sitemap # Generates a sitemap.xml file
  - jekyll-paginate # Adds pagination

# Social Links (for Minima theme)
social_links:
  twitter: "https://twitter.com/yourusername"
  github: "https://github.com/yourusername"
  linkedin: "https://linkedin.com/in/yourprofile"

# Exclude files from the build
exclude:
  - README.md
  - Gemfile
  - Gemfile.lock
  - node_modules/

# Include additional files in the build
include:
  - .htaccess

# Markdown Settings (for Kramdown)
kramdown:
  input: GFM # GitHub Flavored Markdown
  auto_ids: true
  toc_levels: 1..6 # Table of Contents levels
  smart_quotes: lsquo,rsquo,ldquo,rdquo

# Default Settings for Front Matter
defaults:
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
      author: "Your Name"

How GitHub and ChatGPT Played a Role

Throughout the process, GitHub and ChatGPT were invaluable tools. Here’s how I used them:

Version Control with GitHub:

Using GitHub allowed me to keep track of all my changes and revert to previous versions if needed. It also made it easy to collaborate on the project if I ever wanted to work with others.

Content Creation with ChatGPT:

ChatGPT helped me structure and draft the content for my site, including this blog post. It provided suggestions for improving clarity and flow, making the writing process much smoother.

Troubleshooting:

When I ran into technical issues with Jekyll or GitHub Pages, I turned to ChatGPT for quick solutions. It was like having a knowledgeable assistant by my side, ready to help at any moment.

Customization Ideas:

ChatGPT also gave me ideas for customizing the Minima theme and making the site more visually appealing. This included suggestions for CSS tweaks and layout changes.

Building JPHENRI.COM has been a rewarding experience that allowed me to combine my technical skills with creative design. Using GitHub, GitHub Pages, Jekyll, and the Minima theme made the process straightforward, while ChatGPT provided the support I needed to bring my vision to life.

If you’re thinking about creating your own website, I highly recommend giving these tools a try. They’re powerful, flexible, and—best of all—free to use.

Thanks for reading! If you have any questions or want to learn more, feel free to reach out.