Skip to content

Latest commit

 

History

History
53 lines (34 loc) · 1.58 KB

2019-03-06-first-website.md

File metadata and controls

53 lines (34 loc) · 1.58 KB
title tags accent tile image redirect_from draft
Build Your First Website!
guides dev jekyll
red
order width height image
8
11
5
tile.svg
meta-preview.png
/website
true

Hello!

Why static sites?

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!

Jekyll-Starter project

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!

Learning to read code

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!

Let's write your first blog posts!

The page is formatted

Stylin' up the site

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

Next steps

Liquid templating syntax

  • Create a content type
  • Jekyll plugins
  • content management systems