How to Create a Portfolio Website with Jekyll and GitHub Pages

Posted on by Panther

In this tutorial, you will learn how to create a portfolio website using Jekyll and GitHub Pages. Jekyll is a static site generator that allows you to build websites using Markdown, HTML, and CSS. GitHub Pages is a hosting service provided by GitHub that allows you to host static websites directly from a GitHub repository. By combining Jekyll and GitHub Pages, you can easily create and deploy a professional portfolio website.

Prerequisites

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

  • Basic knowledge of HTML and CSS
  • Git installed on your machine
  • A GitHub account

Step 1: Install Jekyll

To get started, you need to install Jekyll on your local machine. Jekyll requires a few dependencies, including Ruby and RubyGems.

  1. Open your terminal or command prompt.
  2. Check if Ruby is installed by running the command ruby -v. If Ruby is not installed, you can download it from the official website (https://www.ruby-lang.org/en/downloads/).
  3. Check if RubyGems is installed by running the command gem -v. If RubyGems is not installed, you can install it by following the instructions on the RubyGems website (https://rubygems.org/pages/download).
  4. Install Jekyll by running the command gem install jekyll.

To verify that Jekyll is installed correctly, run the command jekyll -v. It should display the version number of Jekyll.

Step 2: Create a New Jekyll Site

In this step, you will create a new Jekyll site using the command line.

  1. Create a new directory for your Jekyll site by running the command mkdir my-portfolio.
  2. Navigate into the new directory by running the command cd my-portfolio.
  3. Create a new Jekyll site by running the command jekyll new .. The dot at the end of the command specifies the current directory as the location for the new Jekyll site.
  4. This will create a new Jekyll site with the default template and file structure.

Step 3: Customize the Jekyll Site

In this step, you will customize the default Jekyll site to create your portfolio website.

  1. Open the _config.yml file in a text editor. This file contains the configuration settings for your Jekyll site.
  2. Update the baseurl and url settings with your GitHub Pages URL. For example:
baseurl: "/my-portfolio"
url: "https://your-username.github.io"
  1. Replace your-username with your GitHub username.
  2. Update the title setting with the name of your portfolio website.
  3. Update the author setting with your name or the name of your company.
  4. Save and close the file.

Step 4: Create a Portfolio Layout

In this step, you will create a layout for your portfolio page.

  1. Create a new file called portfolio.html in the _layouts directory.
  2. Open the portfolio.html file in a text editor.
  3. Add the following code to the file:
layout: default
title: Portfolio

<section class="portfolio">
  <div class="grid">
    {% for post in site.posts %}
      <div class="item">
        <a href="{{ post.url }}">
          <img src="{{ post.image }}" alt="{{ post.title }}">
          <h2>{{ post.title }}</h2>
          <p>{{ post.description }}</p>
        </a>
      </div>
    {% endfor %}
  </div>
</section>
  1. Save and close the file.

Step 5: Create Your Portfolio Content

In this step, you will create the content for your portfolio page.

  1. Open the _posts directory.
  2. Create a new file with the following naming convention: YYYY-MM-DD-title.md. Replace YYYY-MM-DD with the current date and title with a descriptive name for your portfolio item.
  3. Open the new file in a text editor.
  4. Add the following front matter to the file:
title: Project 1
image: /path/to/image.jpg
description: This is a description of Project 1.
  1. Replace the title value with the title of your project.
  2. Replace the image value with the path to an image for your project.
  3. Replace the description value with a brief description of your project.
  4. Save and close the file.
  5. Repeat steps 2-8 for each portfolio item you want to add.

Step 6: Customize the Styles

In this step, you will customize the styles of your portfolio website.

  1. Open the assets/css/main.scss file in a text editor.
  2. Delete the existing styles and add your own styles.
  3. Customize the colors, fonts, and layout to match your desired design.
  4. Save and close the file.

Step 7: Test Locally

Before deploying your portfolio website to GitHub Pages, it’s a good idea to test it locally.

  1. Open your terminal or command prompt.
  2. Navigate to your Jekyll site directory.
  3. Run the command jekyll serve. This will start a local server and make your website accessible at `http://localhost:4000`.
  4. Open your web browser and visit `http://localhost:4000` to view your portfolio website.
  5. Verify that everything looks and functions as expected.

Step 8: Deploy to GitHub Pages

Now that your portfolio website is ready, it’s time to deploy it to GitHub Pages.

  1. Create a new repository on GitHub with the name your-username.github.io, replacing your-username with your GitHub username.
  2. Initialize a new Git repository in your Jekyll site directory by running the command git init.
  3. Add the remote repository by running the command git remote add origin https://github.com/your-username/your-username.github.io.git`, replacingyour-username` with your GitHub username.
  4. Stage and commit your changes by running the following commands:
git add .
git commit -m "Initial commit"
  1. Push your changes to the master branch of your remote repository by running the command git push -u origin master.
  2. Wait for a few minutes and then visit `https://your-username.github.io` in your web browser to view your deployed portfolio website.

Step 9: Update Your Portfolio

To update your portfolio, follow these steps:

  1. Open your Jekyll site directory in your text editor.
  2. Make the necessary changes to your content, layouts, or styles.
  3. Commit and push your changes to your GitHub repository using the Git commands mentioned in Step 8.
  4. Visit `https://your-username.github.io` to view your updated portfolio website.

Congratulations! You have successfully created a portfolio website using Jekyll and deployed it to GitHub Pages. You can now showcase your projects and attract potential clients or employers with your professional portfolio.

Related Post