Building your personal developer website with GitHub.Dev 👌
Start writiKickstart a personal website that showcases your work as a software developer and helps you easily manage your technical articles.
https://github.dev homepage
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).
- 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🔥
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.
i. Click on Settings
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).
Renaming website URL
3. Website Customizations 😍
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, image_url )
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.
Here’s my _config.yaml file in case you need to see it all 😀
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:
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
My contact.html file
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
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!"
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:
- Four “@” type A records that point to the GitHub IP addresses: 185.199.108.153 , 185.199.109.153 , 185.199.110.153 , 185.199.111.153
- One “www” CNAME record that points to your <username>.github.io
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 hereng here...