Last week, for the first time in a couple of months, I felt the need to do more with my Jekyll website(s). GitHub Pages provides an opportunity to host as many sites as I wish, as long as their repository code is public and I’m okay with the resulting site being public. I wasn’t really okay with that situation, so instead, I opted to look at GitHub Pro. GitHub Pro offered to host my GitHub Pages site on repositories that were private, which was basically exactly what I wanted. I know that GitLab Pages could provide me with that same setup for free, but my whole world is on GitHub, and I didn’t quite feel the need to switch that up yet.
When it comes to having a private website though, neither GitHub Pages nor GitLab Pages (free) offers that. So, I went to the handy-dandy Google for how to protect a GitHub Pages site. I ended up finding @scottishstoater’ repo protected-github-pages.
As I started working on two new GitHub Pages sites I started to play around with the different Jekyll themes. It turns out that my original site (this one) was made so long ago that a decent amount about the themes have changed since then. Now, @pages-themes manages most of the GitHub Pages themes (instead of the individual creators of the themes). They also do this thing where you can @import {{ site.theme }}; into the CSS files, assuming that the theme is set in the _config.yml. What this means is that new users of the themes don’t need to copy-paste all of the CSS files if they just want exactly the CSS settings of the original themes. This means that it’s very possible that getting your GitHub Pages site up and running is fast… like super fast… like within-a-day-fast. In fact, both of my new GitHub Pages sites were running and live within a day.
What this also means is that, since none of the CSS is actually in your repository, when you want to make changes to the CSS (say edit the size of a button, change the font, etc), you need to go to the CSS source on GitHub, search in the entire repository for the piece that you need, and then copy-paste that entire element back to your repo and make the changes. To find exactly which piece of CSS required to make a change, I had to play a lot with using Chrome’s Inspect option on my local site. Chrome’s Inspect feature allowed me to find the exact value that I’d need to edit so I copy-pasted the proper CSS element into my local repository 😕. I’m sure that changing the themes’ CSS pattern had good intentions, but I actually found it quite annoying. Perhaps the most annoying part of this is that when running Jekyll locally, I got a petty warning about the _includes/ directory not found in the source layout. Since I use the _includes/ directory in every project, this was particularly irritating.
So instead, I went through each GitHub Pages repository I was using and copy-pasted all of the CSS code into my own directory, and then removed the setting of theme in the _config.yml. Now there’s a ton of CSS lines in my repos, but I don’t really mind, especially if all of the CSS can now be in one condensed file and repository, instead of calling a bunch of other files/repos.
I also took the weekend to standardize all of the code that sources my sites, so the directory and file layout of them all match. I even made another site that has nice buttons that links to each of my sites and their respective code. I also made that repo private and put in password protection. There’s links to my other private site there, so I don’t want people to figure out a way into the originally private site. So putting an extra password in for the new list of sites (that the world can’t get to) is beneficial for me. (I should clarify that hackers could probably get in… I didn’t put in top-notch security; even the example repos I used say that, but it’s secure-enough 🤫).
The last thing I did this weekend was redo this site. I wanted to make the “About Me” and “Interests & Hobbies” page more user-friendly. I wanted to rethink who my audience of this site is… besides me and my mom. I realized that I wanted it to be easier for prospective employers to see information about me. So reading about my favorite books and TV shows, while debatably interesting, maybe isn’t the best content for my “About Me” page. Instead, that should be my resumé page. And then my “Interests & Hobbies” page should look less bulletpoint-y and more section-y.
Oh… I also purchased my domain! 🙌🏼. I had been hesitant to make the commitment of which domain to buy for a while (which is silly because I commit for a year when I sign my apartment contract annually), but I finally took the plunge and purchased my domain: emmasax4.info. Technically, I could’ve swapped out .info for .com, or emmasax4 for just plain emmasax. But after a week of pondering what I wanted to choose, I realized that 4 is kind of my thing. My email has a 4. My Twitter has a 4. My GitHub has a 4. And of course, I did that all intentionally when I made those usernames (actually the email thing was just because [email protected] was already taken, and the rest came after the email). So I figured that I might as well be intentional about my 4’s and just make it happen with that! So in one night, I went through the work of setting up my DNS, hooking it all up into GitHub, and by the time I went to bed, I had my own websites hosted on GitHub Pages with custom domains and SSL.
Throughout my website “spike,” I’d like to say that I learned a lot more about Jekyll. I learned more about how the Jekyll themes use CSS, I learned that a Jekyll theme is really just a bunch of CSS, and Jekyll itself is really just about the data structures and config files. I learned more about how the permalinks work. And I learned that Jekyll isn’t really that magic 🎉… I could make my own Jekyll site by adding one file at a time, instead of selecting a specific theme in GitHub’s Settings page. I learned more about DNS, and about hosting websites on custom domains. After all of this, I feel like I’m finally ready to take on the website world!
For more blog posts about setting up this website on Jekyll, keep an eye on my other Jekyll tagged blog posts!
EDIT: Since writing this blog post, I’ve switched the primary domain for my website from emmasax4.info to emmasax.com. Read more on how I set up redirects for this in my blog post 301 Redirects with Static Sites.
