title | tags | accent | tile | image | redirect_from | draft | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Build Your First Website! |
guides dev jekyll |
red |
|
meta-preview.png |
/website |
true |
Hello!
Static sites provide web developers and content creators with a lower maintenance and more secure way to create a website. This works by generating HTML files that can be hosted on any web server, and because
There are many static site generators out there, but the most common ones used today are Jekyll (Ruby), Hugo (Go), Gatsby (Javascript/React). Jekyll site provide an advantage because they can be hosted on GitHub Pages!
I created a project on Glitch.com that will easily allow you to get started on your first Jekyll website! All you need to do is click "Remix this Project" to create your own Jekyll website. (I highly recommend creating an account so you can save your progress for later.)
We can see what the output of this by clicking "Show" in the top left corner!
Now that you have a your project, let's look through the files.
Inside the _sass
folder are your site wide stylesheets. We'll revisit them later!
The page is formatted
Jekyll has a built in CSS preprocessor called Sass! Sass is a version of CSS that allows you to import styles from other files, use variables, nest elements, modify colors, and so forth!
Let's edit
What
Liquid templating syntax
- Create a content type
- Jekyll plugins
- content management systems