52 lines
2.6 KiB
Markdown
52 lines
2.6 KiB
Markdown
---
|
|
layout: project
|
|
title: This website
|
|
description: The self-built site using Jekyll, Bootstrap, TypeScript, and more!
|
|
year: current
|
|
permalink: /projects/website
|
|
thumbnail_url: /assets/images/website.webp
|
|
project_url: https://owenryan.us/
|
|
source_url: https://code.owenryan.us/owenryan/owenryan.us
|
|
SEO_tags: [Website, HTML, CSS, Jekyll]
|
|
---
|
|
|
|
After squatting on this domain for 7 years, I finally stopped procrastinating and decided to create a website.
|
|
Here is everything I used to turn my visions into reality.
|
|
|
|
## Structure
|
|
|
|
This website was created using the [Jekyll](https://jekyllrb.com/) static site generator, which runs on the
|
|
[Liquid](https://shopify.github.io/liquid/) template engine. Jekyll supports writing posts in
|
|
[Markdown](https://en.wikipedia.org/wiki/Markdown), which makes writing simple pages like this one much easier. On the
|
|
other hand, using plain markdown makes embedding videos and icons much more difficult.
|
|
|
|
## Theme
|
|
|
|
Every page is running a custom theme built with the [Bootstrap](https://getbootstrap.com/) CSS library, and styled wit
|
|
[SASS](https://sass-lang.com/). Jekyll automatically renders markdown files to fit the site theme.
|
|
|
|
## Typescript
|
|
|
|
When it comes to creating websites, I try to keep scripting down to a minimum to improve client performance. On this
|
|
site, there are currently only three times Javascript is used on this site.
|
|
|
|
- Lazy loading Stylesheets (Used for loading FontAwesome icons in the background)
|
|
- Gradient rotator (Only on index.html)
|
|
- "Get Email Address" button in contact.html (Decodes an obfuscated version of my email address to prevent scraping)
|
|
|
|
I chose to work with TypeScript over JavaScript since I prefer to use static-typing whenever possible to avoid confusion
|
|
and to allow better static analysis and linting. On the other hand, Jekyll only has built-in support for CoffeeScript,
|
|
so compiling to JavaScript has to be done manually.
|
|
|
|
## Hosting
|
|
|
|
Jekyll produces static HTML and CSS files, meaning that they can be hosted anywhere. I chose to host this website using
|
|
the [Apache webserver](https://httpd.apache.org/) because it's reliable and has better documentation than NGINX.
|
|
|
|
## DOOM Easter Egg
|
|
|
|
You might have noticed the spaghetti monster on the social media panel on the front page. I had no idea what to put
|
|
there, so I linked to a page with a built-in x86 emulator ([v86](https://github.com/copy/v86)), that runs a super
|
|
lightweight Linux image built with Buildroot that boots straight into the original DOOM via [Chocolate
|
|
Doom](https://www.chocolate-doom.org/wiki/index.php/Chocolate_Doom). [Feel free to check out the buildroot
|
|
configuration](https://code.owenryan.us/owenryan/buildroot-doom)
|