This website is hosted on GitHub, an online code management service. Most things that GitHub offers are free, and hosting your website there is free as well. The downside is that you need to host a static website, which is a website that does not require server-side processing (like a database). Most webpages hosted on GitHub are generated using a static webpage generator called jekyll. Jekyll takes your content (like the text of this site), formats it into HTML and organizes it using your layout HTML files. You can have different layouts for different types of content files too. There is also a (limited) programming language called Liquid1 that you can use to help you generate your website.
While your layouts are written in HTML, you can write your content in markdown, which is a syntax that can be formatted into HTML. To get a feel for what markdown is/does check out this online markdown converter called dillinger. Markdown is a great way to write nicely formatted content.
If you want to host your website on github, my best guess is you’ll probably need a GitHub account. Once that is done you basically follow the directions found here for getting jekyll installed. This will allow you to preview your website locally on your machine before uploading it for the entire world to see.
Once you have jekyll installed you can start a new site by running jekyll new my-awesome-site on the command line. Alternatively, you can get started by following the steps outlined here.
At first I wanted to get something up and running quickly – I didn’t want to spend any more than three days working on my website. This goal is reasonable if you are okay with using a layout that someone else designed. All you need to do is choose a layout, and there are lots of examples on jekyll’s wiki page. Many of the sites listed on the wiki share their source code so you can fork (copy) their code to your GitHub page, delete their content, and replace it with your own.
Jekyll-bootstrap tries to make it as easy as possible to get your website up and running with little hassle. You can get your website up and running in 3 minutes if you want to. They also have a handful of themes to choose from too. The jekyll-bootstart website has a nice description of the how jekyll works. I found their description of liquid useful too.
Designing Your Website
I ended up borrowing layout elements from various websites. Lots of people use GitHub to host their site, and many want you to use their code.
The navigation thingy on the right side of this page was not my idea either; I got that idea from the jekyll-bootstrap-doc project page (although it seems like they copied it from the bootstrap docs). I found the relavent CSS file for the bootstrap docs on github. I learned enough jQuery at codeacademy.com to edit the jekyll-bootstrap-docs code for this website.
Codrops.com has a lot of cool design elements for a website. Basically everything these guys do is hot fire so check them out. The style for my links was taken from this codrops.com article, and their demo has a lot more examples to choose from. You can find even more examples of creative link effects here. Their HTML and CSS source code is freely available on github as well. I also borrowed from one of their articles on arrow navagation, the demo is here and the CSS is here. I must note that getting the arrows to work nicely in a jekyll site was non-trivial as well. I ended up editing some code that some guy posted on github.
More on my layout and style choices
The font I’m using is Open Sans, and I got it from Google Fonts – all their fonts are free. Adobe typkit has some nice fonts but only a small subset are free. If you want to use build-in fonts, this website lists all your options.
Turns out that having a footer stay at the bottom of a webpage is kinda non-trivial. I ended up styling this layout with Flexbox, which makes a lot of layout problems easy. Philip Walton has a good site on what you can do with Flexbox.
You can style your code highlights. I used the jekyll-GitHub CSS file located here.
Sometimes I would visit a website and really like one particular thing that they did. Figuring out how to do that one thing is easy if you use your web browsers HTML inspector5. This made learning CSS a lot easier too, since you can edit a sites CSS and watch what happens in real-time.
Right now all tags for this site are generated on one page. There are better ways to do this and Charlie Park has a nice post on how to do so.
Testing out your HTML and CSS layout is easy in jekyll. In the root directory of your website folder run jekyll serve -w and Jekyll will watch for any changes to your files. This allows you to quickly watch any changes you make to your CSS or layout files.
The domain name
The default domain name for a GitHub website is <GITHUB_USERNAME>.github.io. You can use a different domain name, but this requires some setting up. There are several places to get domain names from, and namecheap.com has really cheap domain names. David Ensinger has a post on how he setup his DNS for GitHub websites on namecheap.com. He has another post on how to transfer this to Cloudflare. This site uses Namecheap for domain name registration and Cloudflare for content delivery. Cloudflare offers a lot of their services for free (the services I use are all free).
Good web development practices
I don’t know how but I stumbled onto Mark Otto’s guild to writing good code. I don’t think I followed it much, maybe I should have.
Yahoo and Google both have guilds on designing websites that load quickly. Yahoo’s performance site can be found here, and Google’s can be found here and Google offers a free speedtest as well. There are other free online speed-testing sites such as pingdom.com.
Things To Do
There is a lot of things you can do with Jekyll on github. I don’t have the time or energy to implement them all at this time, but when I do here are some possible improvements.
Knitr: At some point I’ll want to render some R code here. I found this quick tutorial on how to incorporate knitr into Jekyll here and here.