How I Coded This Website📄📄
Fun Fact: I coded this website myself. The source code for everything you see lives on my computerYou can also browse it on Github.
There are many reasons I enjoy coding — problem solving, creativity, learning new technologies and new systems. I also love coding because its a bit like magic. Lines of code are the incantation, symbols have to be arranged just so or else the magic fizzles.
Luckily, I don’t have to reinvent the wheel (or the spell book). Other mages have travelled this way before and left their notes and tools behind which I have used as I’ve coded my site. The largest tool has been Gatsby.
What is Gatsby?
Gatsby is a static site generator which means that static files are generated when I build my site and then these light-weight pages are served to your browser whenever you visit my website.
For me this means that its super easy to write something on my website. I just create a markdown file, write my piece, and then push that file to my repository on Github. I can also easily add on to an article I previously wrote like this one.
Resources for Building Your Own Website
I have always enjoyed computers and had a high level understanding of programming before I built my website. But if you don’t have much of a technical background, these are some of the resources I’d recommend to get started learning how to code your website:
- MDN web docs — Introduction to HTML: HTML is the backbone of any website and I consult the Mozilla web docs whenever I have a question about HTML or CSS
- MDN web docs — Learn to style HTML using CSS: CSS is how you make HTML look pretty. The Mozilla Web docs are great.
- Build a Blog with React and Markdown — Egghead.io: Egghead.io is a great source for video learning content on web technologies. They are aimed at tech professionals so there’s some assumed knowledge, but I found this video series easy to follow and by the end you will have a blog of your own built on Gatsby.
- Gatsby.js Tutorials : Once you’ve followed the egghead video (or maybe simultaneously) you can also check out the Gatsby documentation.
- Gatsby.js Plugin Library: Once your site is up and running, try adding plugins to add more features. If it doesn’t work figure out why or try something else.
- Gatsby Theme Blog: Gatsby Themes are a great way to get a Gatsby site going without too much coding. If you just want a blog, this one is a great place to start.
More Advanced Resources
- Building an OpenGraph Image Generation API: I used this video collection on egghead.io (along with copying code from Ian Jones) to create a system that automatically generates the images that appear when you share my website via twitter or services like imessage. You can see my implementation of this on Github.