Sign in
Log inSign up
Building your personal developer website with GitHub.Dev 👌

Building your personal developer website with GitHub.Dev 👌

Timothy Olaleke's photo
Timothy Olaleke
·Aug 5, 2019

Kickstart a personal website that showcases your work as a software developer and helps you easily manage your technical articles.

1*lPYvlihzeio9qrAu7k-TkA.png

Developers are oftentimes too busy writing codes that we barely spend the time to set up a personal website for ourselves. This repository gives you the code you’ll need to kickstart a personal website that showcases your work as a software developer.

It’s all possible using the combination of Jekyll (for building your website), GitHub Pages (for hosting your website), and GitHub’s API (for automatically populating your website with content).

1. Getting Started 🚀

You do not need to do any installation before starting, a fork of GitHub’s open-source personal website generator will do. Click here to do so🔥

1*lPYvlihzeio9qrAu7k-TkA.png

  • Ensure that you’re forking the repository into your personal Github account. *

2. Publish your Website ✨

We have just completed a major step, but it’ll be good to have a preview of our awesome website. Follow the steps in the images below.

1*X6k6qSfq13KJ8ROryay18Q.png

i. Click on Settings

1*KW8roUTfIO48QWkrjwWdIg.png

ii. Scroll down to GitHub Pages and Select Source to be Master Branch

🕺 Your website should be published now at https://<username>.github.io/personal-website

You can also customize your website’s URL to https://<username>.github.io by renaming your Repository name to <username>.github.io (where <username> is your GitHub username).

1*rayJG05UwMmHJ9Gq6IXpWw.png

Renaming website URL

3. Website Customizations 😍 (Optional)

We all love customizing things, no matter how little, every developer has a preference, so let’s go through some quick customizations you can make to your website. Open the _config.yaml file and make some changes.

i. Layout

To change your site from the default two-column layout, you can switch to a single column by changing layout from layout: sidebar to layout: stacked

ii. Style

Developers love black theme, if you would like to change from the white and grey background, change style from style: light to style: dark

iii. Projects

There are a lot of options to choose from for customizing your website’s project section, feel free to change the options for sort_by (how repositories are sorted either pushed orstars), limit (maximum number of repositories to be displayed), exclude (whether to hide forks or some repository projects)

iv. Topics

You’ll definitely like anyone checking out your websites to see what you’re interested, there is a topic sections for that. GitHub also has an awesome list of topics here ( which of course can be used for your _topic name, web_url, imageurl )

v. Social Media

Final customization we’ll be doing is adding up our social media handles to our page, this is quite easy to do since all you need is to replace the your_username value with your actual username for each social media.

layout: stacked
style: dark

plugins:
  - jekyll-octicons
  - jekyll-github-metadata
  - jemoji

permalink: /:year/:month/:day/:title/

defaults:
  -
    scope:
      path: "" # an empty string here means all files in the project
      type: "posts"
    values:
      layout: "post"

projects:
  sort_by: pushed
  # sort_by options:
  #   - pushed
  #   - stars
  limit: 9
  exclude:
    forks: false
    projects:
    # - repo-name

social_media:
  # behance: your_username
  # dribbble: your_username
  facebook: timex4u
  linkedin: timtech4u
  medium: timtech4u
  stackoverflow: 4620227
  twitter: timtech4u
  # youtube: your_username

topics:
  - name: EcmaScript
    web_url: https:github.com/topics/es6
    image_url: https:raw.githubusercontent.com/github/explore/6…

  - name: Python
    web_url: https:github.com/topics/python
    image_url: https:raw.githubusercontent.com/github/explore/6…

  - name: Go
    web_url: https:github.com/topics/go
    image_url: https:raw.githubusercontent.com/github/explore/4…

1*4HPEEuZNMCTR86v1sA7kYg.png

  • My Personal Website (after customization) *

4. Adding New Pages and Blog Posts 🆕

You are not limited to just the homepage, of course, you can add other pages and also blog posts. The need for developers to write articles cannot be overemphasized in this article, I hope this tweet from Farida inspires you to write more as developers:

https://twitter.com/reedahkh/status/1104433279518887937

i. Add New Page

On the root of your repository, create a file with .html or .md extension and filename of choice ( this would eventually be your page’s route e.g. contact.html would yield to <website.url>/contact). Also, add the following to the start of your file:

---
layout: default
---

---
layout: default
---
<div class="typeform-widget" data-url="timothyolaleke.typeform.com/to/SG6ad8" style="width: 100%; height: 500px;"></div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="embed.typeform.com"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>
  • My contact.html file *

1*dpbNfPe9CtZQn1T7CnuZ1w.png

  • Website Contact Page *

ii. Add New Blog Post

Create a new .md file extension in your repository's **/_posts/** directory with a filename using the following format: (e.g. 2019–03–10-hello-world.md )

YEAR-MONTH-DAY-title.MARKUP</span>

Also, you’ll need to add the following to the start of your file ( there’s already a post file in the **/_posts/** so that could serve as a reference for your future posts. ) NB: This is necessary as your website is pre-configured to assign the post layout to all of the posts in your /_posts/ directory.

---
title: "Welcome to Github Website Generator!"
---</span>

If you would like to learn more about Contents and Templates, feel free to jump to that section on the GitHub Personal Website Repository.

5. Custom Domain 🔗

To add a custom domain, we’ll have to head back to Settings (just like in Step 2). Scroll down to Custom Domain and enter your domain name. NB: You’ll have to follow a few steps to configure your domain name DNS.

In summary, you need to add the following DNS Records:

happy.gif

It’ll be nice to see more awesome personal websites owned by developers, do share your own personal website in the comments, and let me know if I missed any step, if something didn’t work out quite right for you or if this guide was helpful. Checkout my personal website here

Happy Coding! 🤓 💻 ☕

2