Read The Article

Step-by-Step Guide: Installing Jekyll and Hosting Your Site on GitHub Pages

Step-by-Step Guide: Installing Jekyll and Hosting Your Site on GitHub Pages

Step-by-Step Guide: Installing Jekyll and Hosting Your Site on GitHub Pages

In this guide, we’ll walk you through the process of installing Jekyll, a static site generator, and hosting your site on GitHub Pages.

Prerequisites

Before you begin, make sure you have the following prerequisites:

  • A GitHub account (if you don’t have one, sign up at GitHub)
  • Basic knowledge of Markdown and HTML
  • Ruby installed on your computer (if not, install it from Ruby’s official website)
  • Basic knowledge of the command line (Terminal or Command Prompt)

Step 1: Install Jekyll

  1. Open your command line interface.

  2. Install Jekyll by running the following command:

//shell{1}
gem install bundler jekyll
  1. Verify the installation by running:
//shell{1}
jekyll -v

You should see the installed Jekyll version.

Step 2: Create a Jekyll Site

  1. Create a new Jekyll site by running:
//shell{1}
jekyll new my-site

Replace “my-site” with your desired site name.

  1. Change to the site directory:
//shell{1}
cd my-site

Step 3: Preview Your Site Locally

  1. Start a local development server:
//shell{1}
bundle exec jekyll serve
  1. Open a web browser and navigate to http://localhost:4000 to preview your site. Step 4: Customize Your Site

  2. Customize your site by editing the files in the _layouts, _includes, and _posts directories.

  3. Explore the _config.yml file to configure site settings.

Step 5: Create a GitHub Repository

  1. Go to GitHub and log in to your account.

  2. Click the “+” button in the top right corner and select “New repository.”

  3. Name your repository. For a GitHub Pages site, the repository name should be in the format username.github.io, where “username” is your GitHub username.

  4. Choose the repository’s visibility (public or private) and initialize it with a README file.

  5. Click “Create repository.”

Step 6: Publish Your Site

  1. Push your Jekyll site to the GitHub repository:
    //shell{1}
    git init
    git add .
    git commit -m "Initial commit"
    git branch -M main
    git remote add origin https://github.com/username/username.github.io.git
    git push -u origin main
    

Replace “username” with your GitHub username.

  1. Wait a few moments for GitHub to build your site. Your site will be available at https://username.github.io. Step 7: Customize Your Domain (Optional)
  2. If you have a custom domain, follow GitHub’s guide to configure it for your GitHub Pages site. Step 8: Update Your Site
  3. Edit your Jekyll site locally.

  4. Push your changes to GitHub to update your live site.

Congratulations! You’ve successfully installed Jekyll and hosted your site on GitHub Pages. Your site is now accessible to the world.

//csharp
You can copy and paste this entire Markdown code, including the formatted code blocks with line numbers, into your Markdown file.

Categories: Code, Jekyll, github pages

Previous Post Don’t waste precious hours on self-praise Next Post Launches a web server and auto-regenerates your site when a file is updated

Related Post

Pinterest Ads Complete Guide: Visual Advertising That Drives Purchase Intent
Pinterest Ad...

Jun 20, 2024 04:00:00

TikTok Ads Complete Guide: How to Advertise on the World's Fastest-Growing Platform
TikTok Ads C...

Jun 15, 2024 04:00:00

LinkedIn Ads Complete Guide: B2B Advertising That Drives Real Results
LinkedIn Ads...

Jun 10, 2024 04:00:00

Meta Ads Complete Guide: Facebook & Instagram Advertising for Business Growth
Meta Ads Com...

Jun 5, 2024 04:00:00

Google Ads Complete Guide: How to Run Profitable Campaigns
Google Ads C...

Jun 1, 2024 04:00:00