Y’all know by now that I am a Flatiron graduate. As one of their many program requirements, students are expected to keep a technical blog (which you’re reading). They make it super simple by setting one up for you using GitHub Pages (which hosts your blog for FREE).
Unfortunately, your blog looks identical to those of all your Flatiron classmates.
Where’s the magic in that? Let me walk you through a few dead simple ways to take your blog to the next level.
Get That Domain
You guys, I did a thing. I finally purchased a custom domain for my blog. Welcome to codewitch.dev! After realizing how quick and easy this was, I’m now kicking myself for not handling it earlier. Here’s how I did it:
- Purchase a domain name on a site like Namecheap (that’s who I used). Come up with a name that’s relevant and memorable. I like the
.devextension because it tells visitors exactly what they are getting with my site.
We need to add 5 DNS records to your new domain. On Namecheap, you can do this under the Advanced DNS tab. Copy these records, substituting your GitHub username for the
Now, navigate to the
Settingstab on your blog’s GitHub repository, and scroll down to the
GitHub Pagessection. Enter your new domain in the provided text box and click
Save. When available (it took about 5 minutes for me), refresh the page and check the
- Visit your new domain! Keep in mind, you may have to wait up to 24 hours for all your changes to take effect. Don’t do this right before your next blog post is due.
Update Your Background Images
Right now, your blog is built using the Jekyll version of Start Bootstrap’s Clean Blog theme. Flatiron took care of a lot of the configuration for you, but their choice in background images is a little too… blue for me. Let’s fix that!
- Find some images that fit your personality. I recommend Pixabay for free and ready-to-go pictures, but you can always create your own, as well. I used an image editor to resize my galaxy picture so it fits just right (1299 x 448 pixels).
- In your blog’s repo, add your new pictures to the
/imgfolder and commit the changes.
- In your blog’s
_config.ymlfile, change the
header-imgpath to the new location.
about.htmlfile has a different image path, so you’ll want to change that one as well. In my case, I just deleted that line altogether so I would have the same background image throughout my entire site.
Spruce Up Your About Me
Flatiron’s Blog Settings page has a small text box for your about me, but you can add as much as you want by editing the
about.html file in your repo directly. So you don’t mess up the Jekyll styling, leave the first few lines like this:
--- layout: page title: About header-img: "img/your-new-about-bg.png" ---
After that, edit the page just as you would with any
.html file. Don’t forget to commit your changes!
These few changes can have a big impact on your blog, but it’s all yours. Go wild, and customize it to your heart’s content. Explore other themes, play with the styling, and see what you can come up with! GitHub’s version control makes it easy to roll back to a previous version if you make a mistake. However, for some extra security, you can always create a development branch to try out your changes before making them go live.
Whatever you do, be proud of your patch of the Internet, and let it be a reflection of your unique, magical self. You’ve got this.