December 6, 2020
- GitHub Pages
- Code Embeds
- Other Stuff
Here is a list of everything I use to build Happy Coding.
There are many ways to build a website like Happy Coding, and I’m not saying this is The One True Way to go about it. There are a million different tools and workflows you could choose, and you should go with whatever makes the most sense to you. But if you’re curious, here’s what works for me.
I use Windows at home. I started creating Happy Coding on an old Dell desktop, but for the last few years I’ve done everything on a Lenovo ThinkPad. This thing is a “laptop” in name only. In reality it’s a monster that weighs about 15 pounds.
Happy Coding is hosted on GitHub Pages, which means that the site itself is backed by an open-source repo. To update the site, I update the content in the Happy Coding repo, and then GitHub Pages automatically deploys it.
Because I’m using GitHub Pages, that means I’m also using git. I’m pretty much the only person updating the site and I always push directly to the main branch, so I use GitHub Desktop to push my changes. For any other workflow, I’d probably recommend using the command line.
I write the text of every tutorial and blog in Markdown, and then use Liquid to stitch them together into HTML files.
For example, view the Markdown source for this blog entry.
The section at the top between
--- is Liquid front matter that tells Jekyll what to do with the content, and then the rest of the file is Markdown content that gets converted into HTML. That content goes through the blog post layout which adds the title, date, and comment section, and then the default layout which adds everything else.
Jekyll is built in Ruby and Bundler, but I don’t have to deal with that directly other than when I decide to update Jekyll. Jekyll also uses Kramdown and Rogue for syntax highlighting of code blocks, but that’s another thing I almost never have to think about.
Wherever possible, I include embedded code editors in tutorials and examples.
For p5.js, I use p5.js-widget. Similar to the Markdown converter I mentioned above, I actually went pretty far down the rabbit hole of creating my own p5.js embedded editor before realizing a better solution already existed.
When I’m working on a language-specific tutorial or project, I also use language-specific editors. For Processing I use the Processing editor; for p5.js I use the p5.js editor; for Android I use Android Studio. For Java I use a little bit of Intellij, but I mostly use jEdit.
I use Processing to create the background images. See this page for more info on that process, and how to contribute your own background images!
I use good old Microsoft Paint for editing and cropping most images. I also use the Snipping Tool to get screenshots, and I press
PrtSc a lot. If I need something fancy like transparency I’ll use GIMP, but Paint works for almost everything I need.
I’ve also commissioned a few artists to create images for specific tutorials and blog posts. Generally they’re credited below each image.
Did I forget anything? Are you curious about anything else? Let me know!