{"id":4217,"date":"2023-11-04T23:14:09","date_gmt":"2023-11-04T23:14:09","guid":{"rendered":"http:\/\/localhost:10003\/how-to-create-a-portfolio-website-with-jekyll-and-github-pages\/"},"modified":"2023-11-05T05:47:55","modified_gmt":"2023-11-05T05:47:55","slug":"how-to-create-a-portfolio-website-with-jekyll-and-github-pages","status":"publish","type":"post","link":"http:\/\/localhost:10003\/how-to-create-a-portfolio-website-with-jekyll-and-github-pages\/","title":{"rendered":"How to Create a Portfolio Website with Jekyll and GitHub Pages"},"content":{"rendered":"
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.<\/p>\n
Before you begin, make sure you have the following prerequisites:<\/p>\n
To get started, you need to install Jekyll on your local machine. Jekyll requires a few dependencies, including Ruby and RubyGems.<\/p>\n
ruby -v<\/code>. If Ruby is not installed, you can download it from the official website (https:\/\/www.ruby-lang.org\/en\/downloads\/).<\/li>\n- Check if RubyGems is installed by running the command
gem -v<\/code>. If RubyGems is not installed, you can install it by following the instructions on the RubyGems website (https:\/\/rubygems.org\/pages\/download).<\/li>\n- Install Jekyll by running the command
gem install jekyll<\/code>.<\/li>\n<\/ol>\nTo verify that Jekyll is installed correctly, run the command jekyll -v<\/code>. It should display the version number of Jekyll.<\/p>\nStep 2: Create a New Jekyll Site<\/h2>\n
In this step, you will create a new Jekyll site using the command line.<\/p>\n
\n- Create a new directory for your Jekyll site by running the command
mkdir my-portfolio<\/code>.<\/li>\n- Navigate into the new directory by running the command
cd my-portfolio<\/code>.<\/li>\n- Create a new Jekyll site by running the command
jekyll new .<\/code>. The dot at the end of the command specifies the current directory as the location for the new Jekyll site.<\/li>\n- This will create a new Jekyll site with the default template and file structure.<\/li>\n<\/ol>\n
Step 3: Customize the Jekyll Site<\/h2>\n
In this step, you will customize the default Jekyll site to create your portfolio website.<\/p>\n
\n- Open the
_config.yml<\/code> file in a text editor. This file contains the configuration settings for your Jekyll site.<\/li>\n- Update the
baseurl<\/code> and url<\/code> settings with your GitHub Pages URL. For example:<\/li>\n<\/ol>\nbaseurl: \"\/my-portfolio\"\nurl: \"https:\/\/your-username.github.io\"\n<\/code><\/pre>\n\n- Replace
your-username<\/code> with your GitHub username.<\/li>\n- Update the
title<\/code> setting with the name of your portfolio website.<\/li>\n- Update the
author<\/code> setting with your name or the name of your company.<\/li>\n- Save and close the file.<\/li>\n<\/ol>\n
Step 4: Create a Portfolio Layout<\/h2>\n
In this step, you will create a layout for your portfolio page.<\/p>\n
\n- Create a new file called
portfolio.html<\/code> in the _layouts<\/code> directory.<\/li>\n- Open the
portfolio.html<\/code> file in a text editor.<\/li>\n- Add the following code to the file:<\/li>\n<\/ol>\n
layout: default\ntitle: Portfolio\n\n<section class=\"portfolio\">\n <div class=\"grid\">\n {% for post in site.posts %}\n <div class=\"item\">\n <a href=\"{{ post.url }}\">\n <img src=\"{{ post.image }}\" alt=\"{{ post.title }}\">\n <h2>{{ post.title }}<\/h2>\n <p>{{ post.description }}<\/p>\n <\/a>\n <\/div>\n {% endfor %}\n <\/div>\n<\/section>\n<\/code><\/pre>\n\n- Save and close the file.<\/li>\n<\/ol>\n
Step 5: Create Your Portfolio Content<\/h2>\n
In this step, you will create the content for your portfolio page.<\/p>\n
\n- Open the
_posts<\/code> directory.<\/li>\n- Create a new file with the following naming convention:
YYYY-MM-DD-title.md<\/code>. Replace YYYY-MM-DD<\/code> with the current date and title<\/code> with a descriptive name for your portfolio item.<\/li>\n- Open the new file in a text editor.<\/li>\n
- Add the following front matter to the file:<\/li>\n<\/ol>\n
title: Project 1\nimage: \/path\/to\/image.jpg\ndescription: This is a description of Project 1.\n\n<\/code><\/pre>\n\n- Replace the
title<\/code> value with the title of your project.<\/li>\n- Replace the
image<\/code> value with the path to an image for your project.<\/li>\n- Replace the
description<\/code> value with a brief description of your project.<\/li>\n- Save and close the file.<\/li>\n
- Repeat steps 2-8 for each portfolio item you want to add.<\/li>\n<\/ol>\n
Step 6: Customize the Styles<\/h2>\n
In this step, you will customize the styles of your portfolio website.<\/p>\n
\n- Open the
assets\/css\/main.scss<\/code> file in a text editor.<\/li>\n- Delete the existing styles and add your own styles.<\/li>\n
- Customize the colors, fonts, and layout to match your desired design.<\/li>\n
- Save and close the file.<\/li>\n<\/ol>\n
Step 7: Test Locally<\/h2>\n
Before deploying your portfolio website to GitHub Pages, it’s a good idea to test it locally.<\/p>\n
\n- Open your terminal or command prompt.<\/li>\n
- Navigate to your Jekyll site directory.<\/li>\n
- Run the command
jekyll serve<\/code>. This will start a local server and make your website accessible at `http:\/\/localhost:4000`.<\/li>\n- Open your web browser and visit `http:\/\/localhost:4000` to view your portfolio website.<\/li>\n
- Verify that everything looks and functions as expected.<\/li>\n<\/ol>\n
Step 8: Deploy to GitHub Pages<\/h2>\n
Now that your portfolio website is ready, it’s time to deploy it to GitHub Pages.<\/p>\n
\n- Create a new repository on GitHub with the name
your-username.github.io<\/code>, replacing your-username<\/code> with your GitHub username.<\/li>\n- Initialize a new Git repository in your Jekyll site directory by running the command
git init<\/code>.<\/li>\n- Add the remote repository by running the command
git remote add origin https:\/\/github.com\/your-username\/your-username.github.io.git`, replacing<\/code>your-username` with your GitHub username.<\/li>\n- Stage and commit your changes by running the following commands:<\/li>\n<\/ol>\n
git add .\ngit commit -m \"Initial commit\"\n<\/code><\/pre>\n\n- Push your changes to the
master<\/code> branch of your remote repository by running the command git push -u origin master<\/code>.<\/li>\n- Wait for a few minutes and then visit `https:\/\/your-username.github.io` in your web browser to view your deployed portfolio website.<\/li>\n<\/ol>\n
Step 9: Update Your Portfolio<\/h2>\n
To update your portfolio, follow these steps:<\/p>\n
\n- Open your Jekyll site directory in your text editor.<\/li>\n
- Make the necessary changes to your content, layouts, or styles.<\/li>\n
- Commit and push your changes to your GitHub repository using the Git commands mentioned in Step 8.<\/li>\n
- Visit `https:\/\/your-username.github.io` to view your updated portfolio website.<\/li>\n<\/ol>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[1542,1741,1740,1739,447,471,49,1458,1738],"yoast_head":"\nHow to Create a Portfolio Website with Jekyll and GitHub Pages - Pantherax Blogs<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n