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
-
Open your command line interface.
-
Install Jekyll by running the following command:
//shell{1}
gem install bundler jekyll
- Verify the installation by running:
//shell{1}
jekyll -v
You should see the installed Jekyll version.
Step 2: Create a Jekyll Site
- Create a new Jekyll site by running:
//shell{1}
jekyll new my-site
Replace “my-site” with your desired site name.
- Change to the site directory:
//shell{1}
cd my-site
Step 3: Preview Your Site Locally
- Start a local development server:
//shell{1}
bundle exec jekyll serve
-
Open a web browser and navigate to http://localhost:4000 to preview your site. Step 4: Customize Your Site
-
Customize your site by editing the files in the _layouts, _includes, and _posts directories.
-
Explore the _config.yml file to configure site settings.
Step 5: Create a GitHub Repository
-
Go to GitHub and log in to your account.
-
Click the “+” button in the top right corner and select “New repository.”
-
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.
-
Choose the repository’s visibility (public or private) and initialize it with a README file.
-
Click “Create repository.”
Step 6: Publish Your Site
- 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.
- 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)
- If you have a custom domain, follow GitHub’s guide to configure it for your GitHub Pages site. Step 8: Update Your Site
-
Edit your Jekyll site locally.
- 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.
Related Post

Create Faceb...
May 30, 2024 21:33:00

GA4 Enhanced...
Apr 25, 2024 20:33:00

Google Ads C...
Nov 20, 2023 23:35:09

Integrating ...
Nov 19, 2023 23:35:09

BDIX CONNECT...
Nov 18, 2023 11:35:09