How Can Beginners Create a One Page Personal Website in Jekyll

Why Build a One-Page Site with Jekyll?

A one-page personal site helps you present yourself professionally. It can be your digital resume, portfolio, or bio—hosted for free on GitHub Pages. It's fast, secure, and doesn’t need any complex tools or frameworks.

This is perfect for beginners who want an online presence without dealing with WordPress, databases, or paid hosting.

What Should a One-Page Site Include?

Your name, photo, and short bio
Skills or services you offer
Project highlights or portfolio samples
Contact info or form
Links to social media or GitHub

Step-by-Step: Creating a One-Page Jekyll Site

Step 1: Create a Page File

Let’s call it index.html and place it in the root of your Jekyll site (it will become your homepage).


/index.html

Step 2: Add Front Matter


---
layout: none
title: "My Portfolio"
description: "One-page portfolio for Alex Smith"
---

Step 3: Write the Content in HTML


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alex Smith – Portfolio</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
  <style>
    body { font-family: Inter, sans-serif; margin:0; padding:0; line-height:1.6; }
    .container { max-width: 700px; margin: auto; padding: 2em; }
    h1, h2, h3 { color: #222; }
    .section { margin-bottom: 2em; }
    .btn { background: black; color: white; padding: 0.6em 1.2em; text-decoration: none; display: inline-block; margin-top: 1em; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="container">

    <h1>Alex Smith</h1>
    <p>Web developer and writer. I help businesses build fast, modern websites.</p>

    <div class="section">
      <h2>Skills</h2>
      <ul>
        <li>HTML, CSS, Jekyll, Liquid</li>
        <li>Git & GitHub Pages</li>
        <li>Technical writing & SEO</li>
      </ul>
    </div>

    <div class="section">
      <h2>Projects</h2>
      <p><strong>SimpleDocs:</strong> A minimal documentation theme for Jekyll. <a href="https://github.com/alexsmith/simpledocs">View on GitHub</a></p>
      <p><strong>LinkHub:</strong> Personal “link in bio” landing page. <a href="https://alexsmith.github.io/linkhub/">Live Demo</a></p>
    </div>

    <div class="section">
      <h2>Contact</h2>
      <p>Email: alexsmith@example.com</p>
      <a href="/contact/" class="btn">Send a Message</a>
    </div>

    <div class="section">
      <p><a href="https://github.com/alexsmith">GitHub</a> |
         <a href="https://linkedin.com/in/alexsmith">LinkedIn</a> |
         <a href="https://twitter.com/alxsmith">Twitter</a></p>
    </div>

  </div>
</body>
</html>

How to Host It on GitHub Pages

Once added to your Jekyll site and pushed to GitHub, your one-page website will be available at:


https://yourusername.github.io/

No need for separate domain or server.

Can You Customize the Style?

Yes! You can add more CSS, fonts, or images. For example:

- Use a background image or color - Add a circular profile picture - Include icons (e.g., Font Awesome)

Tips to Make It Effective

Keep the page focused—one screen or scroll
Use bold headings and short text
Link to your projects and social profiles
Make sure it works well on mobile

Bonus: Use It as Your Resume

If you’re applying for jobs or gigs, share this page as your online CV. It’s cleaner and easier to update than a PDF.

Conclusion: Own Your Online Identity

You don’t need complex CMS or expensive tools to build a strong web presence. With just one file and Jekyll, you can have a clean, professional one-page website ready to share anywhere.

FlipLeakedMoves🕒📗