For a long time, I thought creating a personal website was too intimidating, too cumbersome, or too much trouble. When I read other people’s blogs, the authors never mentioned how they made the blog, which made me think it was effortless for them.
No more! Certainly every blog is different, but here’s how I made this one.
If I can do it, you (yes you!) can make a blog too.
Envy is a great motivator
Thanks to open source communities, we can now shamelessly rip off other people’s blogs. In particular, Jekyll has become a popular static site generator useful for building websites out of Markdown and sharing them with others.
I chose Matt’s template because of a few key factors:
- it’s beautiful
- more specifically, clean, readable format
- the ability to list all blog posts on one page
- clear instructions on how to install the blog
The last one is particularly important since previous attempts to set up a blog derailed based on unclear instructions. We all start somewhere, and if you don’t have a good guide, you’ll end up with a half-built website.
Look around the web for other Jekyll themes you like. All Jekyll sites have similar installation instructions; the best way to motivate yourself through the agony that is front-end development is to have a beautiful website that you’re working towards.
Let’s start stealing! I mean, downloading through open source. Note that we are assuming that you have Github at this point.
- Fork the repo
- Clone it:
git clone https://github.com/YOUR-GITHUB-USERNAME/lagom
- Install the GitHub Pages gem which includes Jekyll:
- Run the Jekyll server:
- Go to your favorite web browser and type in the server address that Jekyll tells you to. For me, it’s usually
If any part of that went wrong, don’t be afraid to Google the problem since thousands of people have probably ahd the same problem.
In the spirit of transparency, here are a list of problems I ran into at this point
- Because I had installed two versions of Jekyll (one a long time ago),
jekyll servedid not work, and the program got confused
- I cloned the repo into the wrong directory, which messed up some of the git references, making version control very tangled
The fun part
At this point, you have a working website on your local computer. I’ll pause here for you to do a little dance.
You now get to make the website more “you.” Love orange? Change the theme color to orange. Most of the customizations you want are in _data/theme.yml like name, accent color, and social media links.
Beyond the basic changes, you can consider more advanced modifications
- Adding Disqus commenting so that viewers can join the conversation
- Adding more static pages like an About page or a Contact page using the
404.htmlpage as a template
- Pagination support
- Add MathJax to be able to type math
Bring it online
There are a couple ways to take this beautiful site that exists on your computer onto the internet. One option here is to deploy it using Github Pages, which is easy and free. Simply rename the repository on Github to be
YOUR-GITHUB-USERNAME.github.io, and you’ll be able to see your site live.
Another slightly more pro-option is to host it on your own domain. That’s what
irenechen.net is doing for me. It is not free ($12/year for me) and a tiny bit harder.
- Buy an available domain from any domain registrar. I personally use Google Domains and will attach screenshots accordingly.
- Change the
CNAMEfile in your repo to have one line. For me, this file only contains
- On your domain registrar, go into the DNS settings.
- Add the following two “custom resource records”
A, IPv4 address:
CNAME, Domain name:
- Wait a loooooong time. For me, this meant several hours. Do not panic.
- Visit your website (aka
irenechen.net) to view the finished product!
And that’s it! In the end, web development and deploying your website is not difficult for the brain, just difficult for the patience. You will have your website crash or deviate from these “simple” instructions. Don’t be afraid to take a deep breath or even start from the beginning.
Now that you’ve made a website, nothing can stop you.