If you're interested in web design, and looking to work on your first side project, I strongly recommend making a Jekyll site.
What is Jekyll
Jekyll is a static site generator with free deploy and hosting on GitHub. That means it's used to build sites with information that doesn't change unless the underlying code changes. Marketing sites, government sites sharing information, portfolio sites, and blog sites without comments are all commonly static sites.
Sliding Scale of Difficulty
Jekyll as a framework has a great sliding scale of difficulty, and variety of approaches that can teach you a lot about web design.
You can leave the deploy up to GitHub, but when you want custom plugins, you need to learn deploy tooling through GH actions. There's no tests, but if you're inclined to DevOps, there's plenty of linting that can happen, or automated post/page creation that can happen.
When you're starting with front-end design, you can get comfortable with how to structure html and SCSS, explore accessibility, swap your frontend tooling for tailwind, or write mobile media queries. It's a static site, so learning more about presentation is inevitable.
Guess what? You can learn about configuring domain names too! I had no idea what a CName record was, and now I do!
Modern Web Dev, but smaller
In modern web development, we don't build things from scratch. We work within the confines of a framework that builds things for us. Our data typically lives in a different place from our front-end, and we get that data using a templating language of some sort. Jekyll is the simplest form of this.
Data is stored in three places in Jekyll, the frontmatter of a page, the site variable, and custom yaml files that you create. You reference individual files for their frontmatter, documentation for the site variable, and a yaml config for the rest. This is a micro system of what modern web development feels like.
The templating language for Jekyll is liquid from Shopify. [TODO]
Jekyll will allow you to get comfortable with modern build tools, abstractions, and how to use a framework. You'll get used to figuring out how to work with the framework, and how it feels to work against it.
Also, in modern web development, we don't build it ourselves, we leverage libraries, and call-out to external systems. Plugins are a perfect example of this. You CAN have comments on your Jekyll blog, but only if they come from a Discourse page. You want a contact form? Embed typeform.
Jekyll is Visual
When you're starting out, you need to see the results of your actions and share them. Turn on jekyll serve --livereload and every time you save, you'll see the results of the changes you made. You can send anyone the site, so they can see what you built.
Other Reasons to build a Jekyll site
LinkTree and SpeakerDeck are dumb. I'm going to pay you to share my content? No. Also, link.tree wants a pro account to put an image behind a list of links. That's gross and dumb, and you can build that. You're a developer.
You don't think you're a developer? Okay, what title do you identify with? Programmer? Software Engineer? Script Kiddie? Coder? Code Hobbyist?
Doesn't matter. You can learn to put an image behind a list of buttons with links.
Never pay someone to host your static content or let them put ads on it again.
What about Hugo and Gatsby?
Look, if the points above apply to whatever static site generator you want to use, then use it. If you don't like my advice, don't take it. Your mileage will vary. Just have fun and build things.
If you're interested in web design, and looking to work on your first side project, I strongly recommend making a Jekyll site.
What is Jekyll
Jekyll is a static site generator with free deploy and hosting on GitHub. That means it's used to build sites with information that doesn't change unless the underlying code changes. Marketing sites, government sites sharing information, portfolio sites, and blog sites without comments are all commonly static sites.
Sliding Scale of Difficulty
Jekyll as a framework has a great sliding scale of difficulty, and variety of approaches that can teach you a lot about web design.
You can leave the deploy up to GitHub, but when you want custom plugins, you need to learn deploy tooling through GH actions. There's no tests, but if you're inclined to DevOps, there's plenty of linting that can happen, or automated post/page creation that can happen.
When you're starting with front-end design, you can get comfortable with how to structure html and SCSS, explore accessibility, swap your frontend tooling for tailwind, or write mobile media queries. It's a static site, so learning more about presentation is inevitable.
Guess what? You can learn about configuring domain names too! I had no idea what a CName record was, and now I do!
Modern Web Dev, but smaller
In modern web development, we don't build things from scratch. We work within the confines of a framework that builds things for us. Our data typically lives in a different place from our front-end, and we get that data using a templating language of some sort. Jekyll is the simplest form of this.
Data is stored in three places in Jekyll, the frontmatter of a page, the site variable, and custom yaml files that you create. You reference individual files for their frontmatter, documentation for the site variable, and a yaml config for the rest. This is a micro system of what modern web development feels like.
The templating language for Jekyll is liquid from Shopify. [TODO]
Jekyll will allow you to get comfortable with modern build tools, abstractions, and how to use a framework. You'll get used to figuring out how to work with the framework, and how it feels to work against it.
Jekyll is Visual
When you're starting out, you need to see the results of your actions and share them. Turn on
jekyll serve --livereloadand every time you save, you'll see the results of the changes you made. You can send anyone the site, so they can see what you built.Other Reasons to build a Jekyll site
LinkTree and SpeakerDeck are dumb. I'm going to pay you to share my content? No. Also, link.tree wants a pro account to put an image behind a list of links. That's gross and dumb, and you can build that. You're a developer.
You don't think you're a developer? Okay, what title do you identify with? Programmer? Software Engineer? Script Kiddie? Coder? Code Hobbyist?
Doesn't matter. You can learn to put an image behind a list of buttons with links.
Never pay someone to host your static content or let them put ads on it again.
What about Hugo and Gatsby?
Look, if the points above apply to whatever static site generator you want to use, then use it. If you don't like my advice, don't take it. Your mileage will vary. Just have fun and build things.