Creating a personal website portfolio can showcase your skills, projects, and experience effectively. Jekyll is a popular static site generator that simplifies this process, especially for developers familiar with Markdown and command-line tools. This article guides you through the steps to use Jekyll for building your own portfolio website.

Getting Started with Jekyll

First, ensure you have the necessary tools installed. You need:

  • Ruby (version 2.5 or higher)
  • RubyGems
  • Bundler
  • Node.js and npm (optional, for managing assets)

Once installed, you can create a new Jekyll site by running:

jekyll new my-portfolio

Navigate into your project directory:

cd my-portfolio

Start the local server to preview your site:

bundle exec jekyll serve

Customizing Your Portfolio

Open your project folder in a code editor. The main files to customize are:

  • _config.yml: Site settings and metadata
  • index.md: Homepage content
  • _posts/: Blog posts (if needed)
  • _layouts/: Page layouts
  • _includes/: Reusable components

Modify _config.yml to set your site title, description, and URL. Replace the default content in index.md with your personal introduction, skills, and project highlights.

Adding Projects and Content

Showcase your work by creating project sections. You can add custom pages or sections within your homepage. Use Markdown to format descriptions, images, and links.

Example project entry:

### My Awesome App
- Built with React and Node.js
- Deployed on Netlify
- Source Code

Deploying Your Website

Once satisfied with your site, you can deploy it using GitHub Pages, Netlify, or other static hosting services. For GitHub Pages:

  • Push your code to GitHub
  • In your repository settings, enable GitHub Pages
  • Select the branch and folder (usually /root)
  • Your site will be live within minutes

For Netlify, connect your repository and follow the deployment instructions. Your portfolio will be accessible online, ready to impress potential employers or clients.

Tips for a Great Portfolio

Keep your content updated regularly. Include a professional photo and clear contact information. Use clean, responsive designs and optimize images for fast loading. Remember, your portfolio is a reflection of your skills and style.