Github Pages Jekyll Example

GitHub Pages, a static site hosting service, is a powerful tool for showcasing your projects, portfolios, and even personal websites. Jekyll, a popular static site generator, is often used in conjunction with GitHub Pages to create dynamic, content-rich sites. Here, we'll explore a GitHub Pages Jekyll example, guiding you through the process of creating and deploying a Jekyll site.

Before we dive in, ensure you have Git installed on your local machine. If not, you can download it from the official Git website. Once installed, you're ready to create your Jekyll site and deploy it to GitHub Pages.

Setting Up Your Jekyll Site

To start, you'll need to install Jekyll on your local machine. Open your terminal or command prompt and run the following command to install Jekyll and Bundler (a dependency manager for Ruby):

gem install jekyll bundler

Creating a New Jekyll Site

Now, let's create a new Jekyll site. Navigate to the directory where you want to create your site and run:

jekyll new my-site

Replace 'my-site' with the name you want for your site. Jekyll will create a new folder with your site's name and set up the basic structure.

Understanding the Site Structure

Your new site will have the following structure:

• my-site - The root directory of your site.
• _config.yml - The configuration file for your site. Here, you can set global variables like the site's title, baseurl, and markdown settings.
• _layouts - Contains layout files that define the overall structure of your pages.
• _includes - Contains reusable snippets of code, like headers and footers.
• _posts - Contains your blog posts. Jekyll uses the date in the filename to display posts in chronological order.
• index.md - The homepage of your site. You can create additional pages by adding new markdown files in the root directory.

Customizing Your Jekyll Site

Now that you have a basic understanding of your site's structure, let's customize it. Open the _config.yml file and update the site's title and baseurl:

title: My Site

baseurl: "/my-site"

Creating a New Post

To create a new post, navigate to the _posts directory and create a new markdown file. Name it using the following format: YYYY-MM-DD-title.md. For example, 2022-01-01-welcome-to-my-site.md.

Open the file and add the following front matter at the top:

--- layout: post title: "Welcome to My Site" date: 2022-01-01 00:00:00 +0000 categories: jekyll update ---

Then, add your post content below the front matter. Jekyll will use the front matter to display the post's title, date, and categories.

Building and Serving Your Site Locally

To build and serve your site locally, navigate to the root directory of your site and run:

bundle exec jekyll serve

Jekyll will build your site and start a local server. Open your web browser and visit http://localhost:4000 to view your site.

Deploying Your Site to GitHub Pages

Now that your site is set up and running locally, let's deploy it to GitHub Pages.

Pushing Your Site to GitHub

First, initialize a new Git repository in your site's root directory:

git init

Then, add, commit, and push your changes to a new repository on GitHub:

git add .

git commit -m "Initial commit"

git remote add origin https://github.com/yourusername/your-repo-name.git

git push -u origin main

Configuring GitHub Pages

Once your site is pushed to GitHub, navigate to your repository's settings page. Scroll down to the "Pages" section and select the branch you want to use for GitHub Pages (usually 'main' or 'master'). Click "Save".

GitHub will now build and deploy your site. You can view it by visiting https://yourusername.github.io/your-repo-name/.

Congratulations! You've successfully created and deployed a Jekyll site to GitHub Pages. Now you can start adding more content, customizing your site's design, and exploring the many features Jekyll has to offer. Happy coding!