93 lines
2.8 KiB
Markdown
93 lines
2.8 KiB
Markdown
---
|
||
layout: step
|
||
title: Assets
|
||
position: 7
|
||
---
|
||
Using CSS, JS, images and other assets is straightforward with Jekyll. Place
|
||
them in your site folder and they’ll copy across to the built site.
|
||
|
||
Jekyll sites often use this structure to keep assets organized:
|
||
|
||
```
|
||
.
|
||
├── assets
|
||
│ ├── css
|
||
│ ├── images
|
||
│ └── js
|
||
...
|
||
```
|
||
So, from your assets folder, create folders called css, images and js.
|
||
Additionally, directly under the root create another folder called `_sass`, which you will need shortly.
|
||
|
||
## Sass
|
||
|
||
Inlining the styles used in `_includes/navigation.html`(adding or configuring within the same file) is not a best practice.
|
||
Instead, let's style the current page by defining our first class in a new css file instead.
|
||
|
||
To do this, refer to the class (that you will configure in the next parts of this step) from within the `navigation.html` file by removing the code you added earlier (to color the current link red) and inserting the following code:
|
||
|
||
{% raw %}
|
||
```liquid
|
||
<nav>
|
||
{% for item in site.data.navigation %}
|
||
<a href="{{ item.link }}"{% if page.url == item.link %} class="current"{% endif %}>{{ item.name }}</a>
|
||
{% endfor %}
|
||
</nav>
|
||
```
|
||
{% endraw %}
|
||
|
||
You could use a standard CSS file for styling, we're going to take it a step
|
||
further by using [Sass](https://sass-lang.com/). Sass is a fantastic extension
|
||
to CSS baked right into Jekyll.
|
||
|
||
First create a Sass file at `assets/css/styles.scss` with the following content:
|
||
|
||
```sass
|
||
---
|
||
---
|
||
@import "main";
|
||
```
|
||
|
||
The empty front matter at the top tells Jekyll it needs to process the file. The
|
||
`@import "main"` tells Sass to look for a file called `main.scss` in the sass
|
||
directory (`_sass/` by default) you already created at the root of your working directory earlier.
|
||
|
||
At this stage you'll just have a main css file. For larger projects, this is a
|
||
great way to keep your CSS organized.
|
||
|
||
Create the current class mentioned above in order to color the current link green. Create a Sass file at `_sass/main.scss` with the following content:
|
||
|
||
```sass
|
||
.current {
|
||
color: green;
|
||
}
|
||
```
|
||
|
||
You'll need to reference the stylesheet in your layout.
|
||
|
||
Open `_layouts/default.html` and add the stylesheet to the `<head>`:
|
||
|
||
{% raw %}
|
||
```liquid
|
||
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>{{ page.title }}</title>
|
||
<link rel="stylesheet" href="/assets/css/styles.css">
|
||
</head>
|
||
<body>
|
||
{% include navigation.html %}
|
||
{{ content }}
|
||
</body>
|
||
</html>
|
||
```
|
||
{% endraw %}
|
||
|
||
The `styles.css` referenced here is generated by Jekyll from the `styles.scss` you created earlier in `assets/css/`.
|
||
|
||
Load up <a href="http://localhost:4000" target="_blank" data-proofer-ignore>http://localhost:4000</a>
|
||
and check that the active link in the navigation is green.
|
||
|
||
Next we're looking at one of Jekyll's most popular features, blogging.
|