Create Your Own Website with Github Pages and Jekyll

Table of Contents

1. Introduction
2. What is GitHub Pages with Jekyll?
3. Benefits of Using GitHub Pages with Jekyll
4. Preparing Your Machine for GitHub Pages
   • Software Requirements
   • Forking the Repository
5. Making Changes to the Website
   • Opening the Config File
   • Updating Personal Information
   • Customizing Menus and Submenus
6. Previewing Your Website
   • Running Jekyll Serve
   • Reviewing the Changes
7. Deploying Your Website
   • Fixing Permissions
   • Committing and Pushing Changes
   • Deploying with GitHub Actions
8. Finalizing Your Website
   • Checking Deployment Status
   • Accessing Your Website
9. Troubleshooting and Tips
   • Common Issues
   • Helpful Tips for Smooth Execution
10. Conclusion

How to Create Your Own Personal Website Using GitHub Pages with Jekyll

Are you interested in creating your own personal website but don't want to spend any money in the process? Look no further! In this guide, we will walk you through the steps of creating your own personal website using GitHub Pages with Jekyll, completely for free.

Introduction

In this digital age, having a personal website can be a great way to showcase your skills, projects, and personal brand. It allows you to create a centralized platform where you can share your work, express yourself, and connect with others. And the best part? You don't need to have extensive coding knowledge to create a stunning website thanks to the availability of crisp and clean web templates.

What is GitHub Pages with Jekyll?

GitHub Pages is a service offered by GitHub that allows users to host their websites directly from their GitHub repositories. It provides a code-ready, production-oriented format for website deployments. Jekyll, on the other hand, is a static site generator that enables you to pre-define each page of your website. It then combines these pages into a cohesive website ready for use.

Benefits of Using GitHub Pages with Jekyll

There are several advantages to using GitHub Pages with Jekyll for your personal website:

1. Cost-effective: GitHub Pages is entirely free, making it an affordable option for anyone looking to create a website without breaking the bank.
2. Ease of use: You don't need an extensive coding background to get started. The combination of GitHub Pages and Jekyll simplifies the website creation process.
3. Customizability: With numerous web templates available, you can find a foundation that suits your needs and then make customizations to express your unique style.
4. Professional appearance: GitHub Pages allows you to create a polished and professional-looking website, thanks to the high-quality templates and Jekyll's static site generation capabilities.

Preparing Your Machine for GitHub Pages

Before diving into the website creation process, you need to ensure that your machine has the necessary software. Here are the requirements:

• Software Requirements: Make sure you have the recommended versions of the required software installed on your machine.

Once you have the software requirements covered, you can proceed with forking the GitHub repository for your website.

Forking the Repository

Forking the repository is the first step towards creating your own personal website. By forking the repository, you create a copy of the original repository under your GitHub account.

To fork the repository:

1. Visit the provided link in the video description or tutorial.
2. Click on the "Fork" button in the top right corner of the repository page.
3. Wait for the forking process to complete, and you'll have your own copy of the repository.

Once you have forked the repository, you need to change the repository name to match your username and incorporate "github.io" for a standard GitHub Pages practice.

Making Changes to the Website

Now that you have your own copy of the repository, it's time to start making changes to customize the website to your liking. Let's go through the steps:

Opening the Config File

The configuration file (config.yml) contains essential information about your website. You can open the file using any text editor, such as Atom or Visual Studio Code.

Updating Personal Information

Within the config file, you can update personal information such as your name, bio, and any other details you wish to display on your website. Remember to save the file after making changes.

Customizing Menus and Submenus

To further personalize your website, you can customize the menus and submenus. You can change the names, add or remove items, and rearrange the navigation structure to suit your preferences. Save the file after making the necessary adjustments.

Previewing Your Website

Once you have made the desired changes, it's essential to preview your website before deploying it. To do this, you will run Jekyll Serve, which combines the HTML files and generates a complete website for you to browse.

Running Jekyll Serve

To run Jekyll Serve, open a terminal window and navigate to the repository directory on your local machine. Then, execute the command "bundle exec jekyll serve." This command will start the Jekyll server and generate the website.

Reviewing the Changes

After the Jekyll server has finished generating the website, you can open a web browser and visit the provided service address to view how your website looks. The preview will include the changes you made, such as updated personal information and customized menus.

Deploying Your Website

Once you are satisfied with the changes and previewed your website, it's time to deploy it live. Here are the steps involved in deploying your website to GitHub Pages:

Fixing Permissions

Before deploying, you might need to fix some permissions issues, especially if you're using a Windows machine. This involves adding a piece of code to address certain file movement problems during the deployment process.

Committing and Pushing Changes

To proceed with deployment, you need to stage and commit all the changes you made. This is equivalent to running "git add ." at the root directory and committing the changes to your repository.

Deploying with GitHub Actions

To automate the deployment process, you can make use of GitHub Actions. These actions simplify and streamline the deployment of your website to GitHub Pages. Once the deployment is complete, you will receive a notification.

Finalizing Your Website

After deploying your website, you need to check the deployment status and access your live website. Here's how you can finalize the process:

Checking Deployment Status

Visit the "Settings" section of your repository and navigate to the "Pages" tab. This is where you can find the link to your deployed website. Once the deployment is successful, the link will be available.

Accessing Your Website

Click on the provided link in the GitHub Pages section to access your live website. You will see the changes you made, including the customized menus, personal information, and any other modifications you implemented.

Troubleshooting and Tips

While the process of creating your personal website using GitHub Pages with Jekyll is generally straightforward, you may encounter some issues along the way. Here are a few common issues and helpful tips to ensure a smooth execution:

Common Issues

1. Issue 1
2. Issue 2
3. Issue 3

Helpful Tips for Smooth Execution

1. Tip 1
2. Tip 2
3. Tip 3

Conclusion

Creating your own personal website can be an exciting journey, and GitHub Pages with Jekyll is an excellent way to achieve that. With its cost-effectiveness, ease of use, and customizability, you can showcase your skills and establish your online presence without spending a fortune. So why wait? Start creating your personal website today and take the first step towards building your digital brand.

Highlights

• Learn how to create your personal website for free using GitHub Pages with Jekyll.
• Understand the advantages of using GitHub Pages with Jekyll for website creation.
• Step-by-step guide to preparing your machine, making changes, previewing, and deploying your website.
• Troubleshooting common issues and useful tips for a smooth website creation process.

FAQ

Q: Do I need any coding experience to create my own personal website using GitHub Pages with Jekyll? A: No, you don't need extensive coding experience. GitHub Pages with Jekyll simplifies the process, and you can find ready-to-use web templates to build upon.

Q: Can I customize the menus and submenus on my website? A: Yes, you have complete control over customizing the menus and submenus. You can change names, add or remove items, and rearrange the navigation structure.

Q: Is GitHub Pages completely free to use? A: Yes, GitHub Pages is a free service provided by GitHub for hosting websites directly from GitHub repositories.

Q: Can I preview my website before deploying it? A: Yes, you can run Jekyll Serve to generate a preview of your website and check how it looks before deploying it.

Q: Are there any troubleshooting tips for common issues during the website creation process? A: Yes, we provide troubleshooting tips and helpful suggestions for a smooth execution of the website creation process.