APIs Frameworks Web Application Web Development
WebGuruAI  

Creating a Simple Blog with Jekyll and GitHub Pages

# How to Create a Simple Blog with Jekyll and GitHub Pages

Blogging has become an integral part of content marketing in today’s digital age. It helps businesses and individuals establish their online presence, showcase their expertise, and engage with their audience. One of the most popular platforms for hosting a blog is GitHub Pages. In this tutorial, we will guide you through the process of creating a simple blog using Jekyll, a static site generator, and GitHub Pages.

## What is Jekyll?

Jekyll is a static site generator that allows you to create websites and blogs from plain text files. It uses a simple template-based syntax, making it easy to create and customize your blog’s design and layout. Jekyll is written in Ruby, and it runs on any computer that has Ruby and the Jekyll gem installed.

## What is GitHub Pages?

GitHub Pages is a service that allows you to host your static website directly from your GitHub repository. It supports Jekyll, making it an ideal platform for hosting your blog. To use GitHub Pages with Jekyll, you need to create a new repository and enable GitHub Pages in its settings.

## Step-by-Step Guide to Creating a Simple Blog with Jekyll and GitHub Pages

### Step 1: Create a New Repository on GitHub

– Log in to your GitHub account and click on the ‘+’ icon in the top-right corner, then select ‘New repository’.
– Enter a name for your repository, choose whether it should be public or private, and select the option to initialize the repository with a README file.
– Leave the ‘Add a license’ option unchecked for now, as we will not be using one for this tutorial.
– Click on ‘Create repository’.

### Step 2: Install Jekyll and Create a New Site

– Open your terminal or command prompt and run the following command to install Jekyll:

“`bash
gem install jekyll
“`

– Once Jekyll is installed, navigate to your user directory or any other directory of your choice and run the following command to create a new Jekyll site:

“`bash
jekyll new my-blog
“`

Replace ‘my-blog’ with the name you want to give your blog.

– Change into the newly created blog directory:

“`bash
cd my-blog
“`

### Step 3: Customize Your Blog’s Theme

– Jekyll comes with a default theme, but you can also use a custom theme or modify the default theme to suit your preferences.
– To use a custom theme, download the theme’s files and place them in the `/themes` directory of your blog.
– To modify the default theme, open the `_config.yml` file in your blog’s root directory and customize the settings according to the Jekyll documentation.

### Step 4: Add Your Content

– Jekyll uses Markdown or HTML files to create your blog’s content.
– Create a new directory named `blog` in your blog’s root directory.
– Inside the `blog` directory, create a new file for each blog post. Use the `.md` file extension for Markdown files or `.html` for HTML files.
– Add your blog post content, title, and date to the respective files.

### Step 5: Preview Your Blog Locally

– Before deploying your blog to GitHub Pages, it’s a good idea to preview it locally to ensure everything looks as expected.
– Run the following command in your blog’s root directory:

“`bash
jekyll serve
“`

– Open your browser and navigate to `http://localhost:4000` to view your blog.

### Step 6: Deploy Your Blog to GitHub Pages

– Commit and push your blog’s files to the GitHub repository you created earlier.
– In the repository’s settings, scroll down to the ‘GitHub Pages’ section and select the ‘Source’ dropdown menu. Choose ‘main’ or ‘gh-pages’ depending on your repository’s branch settings.
– Your blog should now be accessible at `https://.github.io//`.

Congratulations! You have successfully created a simple blog using Jekyll and GitHub Pages. Remember to keep your blog up-to-date with the latest technologies and trends in web development. This will not only keep your blog relevant but also demonstrate your commitment to continuous learning and improvement. Happy blogging!