At its core, GitHub serves as an online repository where developers can securely host and fine-tune their code without the fear of losing any progress.
But GitHub isn’t just about hosting code. It also provides a lesser-known yet immensely useful feature – GitHub Pages. With GitHub Pages, you can set up and host a website entirely for free.
Additionally, we’ll explain how to use Jekyll, a simple, blog-aware, static site generator, with GitHub Pages to create your portfolio website. It might require a dash of technical know-how, but don’t worry, this guide and recommended resources will help you navigate through it.
Quick Menu
Setting Up Your GitHub Pages Site with Jekyll
You can follow these steps to set up your site:
- Create a Repository for Your Site on GitHub.
If you want to create a user or organization site, name it
<username>.github.ioor<organizationname>.github.io, where<username>or<organizationname>is your GitHub username or organization name. If you want to create a project site, name it anything you like. For more information, see Creating a repository for your site in the GitHub documentation. - Clone the Repository to Your Local Machine.
Once the repository is created, clone it to your local machine using Git. If you need guidance on how to clone a repository, refer to the GitHub help document, Cloning a repository.
- Create a Jekyll Site Locally.
Before you can create a new Jekyll site, you need to make sure you have the necessary components installed on your machine – Ruby, Bundler, and Jekyll itself. The installation process varies depending on your operating system, but you can find detailed instructions in the official Jekyll installation guide.
Once you have Jekyll and its prerequisites installed, navigate to your local repository directory through the terminal. Here, you can create a new Jekyll site using the commandjekyll new . --force. This command will generate a new Jekyll site in your current directory. The--forceflag is used to overwrite any existing files in the directory. Please ensure the directory is empty or the existing files are not needed before running this command. - Add Content to Your Site.
Now that your site is set up, it’s time to add content. You can use Markdown and HTML files to do this. Additionally, consider using Liquid, a templating language that enables you to load dynamic content on your site. For more details, see Adding content to your GitHub Pages site using Jekyll.
- Choose or Create a Theme.
Lastly, select a theme for your site or design your own custom layout using CSS and HTML. You can find many, both free and paid, in the Jekyll Themes directory, as well as searching for them directly on GitHub.
Try to find a theme that matches your brand identity and that looks appropriate for housing your content (text and images). Make sure the theme you choose is compatible with your version of Jekyll and that you have any required plugins. Also, check if the theme is actively maintained.
Many themes also offer lives previews so you can see how the theme looks and behaves with actual content.
Going Live: Deploying Your GitHub Pages Site
Once you’re happy with your portfolio, it’s time to share it with the world. The beauty of GitHub Pages is that the deployment process is remarkably straightforward.
Follow these steps to go live with your GitHub Pages site:
- Commit Your Changes. After making changes to your site locally, you need to commit those changes. This can be done by using the
git add .command to stage all changes, followed bygit commit -m "Your commit message"to commit the changes. Replace “Your commit message” with a brief description of the changes you made. - Push Your Changes. Now, it’s time to push your committed changes to the repository on GitHub with
git push origin maincommand. Heremainrefers to the main branch of your repository. If you have named your branch differently, replacemainwith your branch name.
GitHub Pages automatically builds and deploys your site when you push your changes. This means your new site should be live a few moments after you push your changes.
- Access Your Site. You can access your new website by navigating to
<username>.github.ioor<organizationname>.github.ioin your web browser, replacing<username>or<organizationname>with your actual GitHub username or organization name.
If your site doesn’t appear immediately, don’t panic! It can take a few minutes for GitHub Pages to build and deploy your site. If it’s still not appearing after a while, double-check your repository settings and the changes you pushed to ensure everything is correct.
Making the Most of Jekyll Themes
Jekyll themes are a powerful tool for shaping the look and feel of your portfolio site. They come in a variety of designs, suitable for different professional profiles and preferences. You can access several free and paid Jekyll themes from different online repositories such as Jekyll Themes or even GitHub itself.
Once you’ve picked a theme, it’s time to customize it. While each theme may have unique customization options, here are a few basic elements you might want to personalize:
- Color Scheme: Colors can have a strong impact on the perception of your portfolio. Choose a color scheme that reflects your personal brand and is consistent across your portfolio.
- Fonts: The typeface you choose can set the tone for your portfolio. Serif fonts tend to look more traditional, while sans-serif fonts are often seen as modern and clean.
- Layout: The layout is how content is structured on your page. Some themes provide different layouts for different types of content (like posts, pages, and projects). Choose and customize a layout that best showcases your work.
- Navigation: Ensure your portfolio is easy to navigate. Most themes will include a navigation menu that you can customize to include important pages like your projects, about page, and contact information.
Remember, the goal of using and customizing a theme is to create a cohesive, engaging, and user-friendly portfolio that stands out to potential clients. You can find some of the best ways in our tips on how to build a portfolio site.
FAQ – Free Portfolio Site with GitHub Pages
Yes, GitHub Pages is a free service offered by GitHub. It allows you to host one site per GitHub account. Each GitHub account comes with a generous bandwidth limit, and there is no cost associated with deploying and hosting a public website.
Yes, you can use your own domain with GitHub Pages. You will need to modify your domain’s DNS settings to point to GitHub’s servers. For more details, see GitHub’s guide on using a custom domain with GitHub Pages.
Yes, GitHub Pages sites are subject to certain usage limits, including a limit of 10 builds per hour. However, this is generally more than enough for most users.
While GitHub Pages is integrated with Jekyll, you can technically use other static site generators. However, you would have to generate your site locally and then push the generated static files to your GitHub Pages repository.
No, GitHub Pages sites are public and cannot be made private. However, if you need a private page or site for project management or internal use, GitHub provides other options. You can set up a private repository to manage and share your code only with people you choose. Yet, it’s essential to remember that this isn’t quite the same as a private website.
For more specific or recent changes to GitHub’s policies and features, please check the latest documentation on GitHub’s official website.
To update your site, make changes to your site’s files locally, commit those changes, and then push the commit to the repository on GitHub. GitHub Pages will automatically rebuild and deploy your site.
