Site Creation
Table of contents
Introduction
Welcome to my first ever log! As time goes by hopefully my writing skills will improve with my development skills but for now bear with me.
What inspired me to make this site?
Most of the work I’ve done in the past three years relevant to websites are primarily focused on scraping them and going through requests with Postman. While I know basic HTML, CSS, and React, there are a lot of frameworks that I’d like to work with. The theory behind the creation of the site is that I can use this site to not only learn about how to create an attractive and functional website, but I can save my experiences for myself and others to learn from.
Process Overview
My first concern was what would I use to build my site? After watching a couple videos made by Fireship, I was almost convinced to use petite-vue as my JavaScript framework and Bootstrap as my CSS framework. I would host my site with Firebase since it is easier to setup than AWS and since I currently use it for a site such as this one. While something like that is definitely a future plan, I wanted something simple and easy to start with so I could focus on one framework at a time and not be overwhelmed. Lets choose something else…
Welcome to GitHub Pages + Jekyll! I remember taking The Missing Semester of Your CS Education and after seeing how their site was made I was intrigued and excited to make my own site with Jekyll. An easy setup and I’d have my site ready to go? Sounded too good to be true. (Hint: I make life difficult for myself and it was indeed too good to be true.)
Setting up Jekyll + Ruby
First step was setting up Jekyll locally. Since Jekyll runs off Ruby, I had to install that first. At first I followed this guide but I found that both chruby and ruby-install have many issues with macOS and my beta version of macOS. After some research on Ruby package managers I turned to rbenv and was directed to use ruby-build to install different versions of Ruby.
After the installation of Ruby I was able to setup a basic project with Jekyll and serve it locally with bundle exec jekyll serve. After finding the theme I did some more customization and design and it was ready to be hosted on GitHub Pages. Here is where we encounter a plethora of issues.
Issues 😔
At first I thought that the deployment of the Jekyll project with GitHub Pages was going to be simple. I’ve already do some preliminary testing to ensure a smoother experience but boy was I wrong. Here are some of the major issues that I encountered.
Using the Correct Jekyll Theme
When deploying a Jekyll site with GitHub, there are some things that you have to change. For example in the Gemfile, you have to change the gem fromjekyll to github-pages. Additionally your theme has to be changed to a remote theme since GitHub wouldn’t have access to your local installation of the theme you want to use. The remote theme didn’t work so well though as the remote theme didn’t seem to to date. I decided I would download the files of the theme and then have them in the repo itself so I wouldn’t have to worry about any of this. The only issue here was that the local installation seemed out of date compared to the GitHub repo itself. I decided to download the latest GitHub release of the theme and then upload it to my own repo and eventually everything worked out.
Deploying the Site with GitHub Actions
This is the part where I shoot myself in the foot. GitHub has a well built feature to allow you to deploy your page from a branch seamlessly. No setup is needed other than selecting the branch. Any normal person would choose this option right? Well I’m not any normal person. As I’d find out, using GitHub Actions to build and deploy your page is slightly /s more difficult than aforementioned option.
To use GitHub Actions you need to configure a YML file in a .github/workflows directory which is main difficulty that you’ll face. For example, the provided YML file for serving Jekyll (from GitHub themselves) does not work (I guess they did mention the whole thing is still in beta). After searching through multiple examples of working YML files, I eventually did find a solution.
As treacherous as all of this sounds, there are advantages of using GitHub Actions. Since you get to control how your site is built and deployed, you can do things like choose what version of Ruby or Jekyll to use with your site. At the end of the day an average user will never need this level of customization but if you have time on your hands, GitHub Actions is great to work with.
Conclusion
Thanks for reading all of that if you did. Hopefully I start working on some cool stuff but I think my next addition will be an article on my development setup. TL;DR: Site hard to make but I made it.