Build a personal website with Jekyll and GitHub pages

Build a personal website with Jekyll and GitHub pages

- 6 mins

Introduction

It is the year 2019 and having a personal website is, if not compulsory, one of the best things to have as an individual more specifically, as a Software Developer. Be it Medium, Hashnode, Dev.to or any other online publishing platform, having a personal website helps you create an online presence for yourself.

A personal website is an important tool if you belong to a profession that requires a showcase of your portfolio. You could showcase things you’ve built, projects you’ve worked on, manage a blog, add information about yourself and a whole lot more on your personal website.

If only we could wield our wands and build a stunning website with just a simple wave :sweat_smile: I mean, not all of us write HTML, JavaScript and CSS. Thankfully, we’ve got something close to the wand in the form of Jekyll and GitHub Pages :muscle:


What is Jekyll and GitHub Pages ?

Jekyll is a simple, blog-aware, static site generator for personal, project, or organization sites.

GitHub Pages on the other hand is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.


Getting Started

You’ll need to have a GitHub account to get started with GitHub Pages as we will be hosting our website’s files in a GitHub repository.


Step 1: Setting up your environment

Some operating systems come pre-installed with these tools, but if this isn’t true for you or to be sure, do the following:

For detailed install instructions have a look at the guide for your operating system. macOS, Ubuntu Linux, Other Linux distros, Windows.


Step 2: Install Jekyll and Bundler Gems

Install Jekyll and Bundler using gem install jekyll bundler in your terminal or command prompt. This command installs both Jekyll and Bundler.

After installation, check if Jekyll and Bundler were successfully installed using jekyll -v and bundler -v


Step 3: Setup your personal website locally


Step 4: Editing the website

Most of the time, the developer that built the theme you’ve chosen instructs you on how to add your information, add new blog posts, images, projects e.t.c These instructions are mostly found in the README.md file of the theme’s repository on GitHub.

I recommend using Visual Studio Code for this but feel free to use any tool you find convenient. Open the project in your code editor, edit the theme by adding your information. You can always check http://127.0.0.1:4000 to see any new changed you made after saving.

Note: Markdown is supported here so feel free! You could also learn how to use Markdown here


Step 5: Hosting on GitHub


Step 6: Verify your website is live

After following the above steps, open a new tab in your browser and type in “YOUR_GITHUB_USERNAME” + “.github.io” as described above. i.e “mayokunthefirst.github.io”, your website should be visible now :star:!


Step 7: (Optional) Add a custom domain for website

If you own a custom domain, you can redirect it to your GitHub Pages website so it has a much more personal feel.

Should incase you run into any errors while trying to get this done, do send me a DM on Twitter. Thank you for your time :thumbsup:

Mayokun Adeniyi

Mayokun Adeniyi

Android Developer

comments powered by Disqus
rss facebook twitter github gitlab youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora