101591 Views
79842 Views
45596 Views
44332 Views
40991 Views
33419 Views
Raspberry Pi Time machine
Now Ad-Free
Guiding Light
Sync Files on your Pis, with Syncthing
NextCloud
Buddy Jr.
Introduction to FreeCAD for Beginners
Building a Robot Arm with Raspberry Pi and PCA9685
Building User Authentication for Static Sites with FastAPI
Mastering Pydantic for Robust Data Validation
Mastering Markdown for Documentation with Jekyll
Introduction to Rust
KevsRobots Learning Platform
60% Percent Complete
By Kevin McAleer, 3 Minutes
Static assets are crucial components of any website, contributing to its aesthetics, functionality, and overall user experience. In Jekyll, managing these assets efficiently is key to building a professional and polished site.
Jekyll supports a flexible directory structure, allowing you to organize your assets in a way that makes sense for your project. A common approach is to create dedicated directories for each type of asset within the root of your Jekyll project:
images/
css/
js/
To reference static assets in your Jekyll site, use the site.baseurl variable to ensure your paths are correct, especially when your site is hosted in a subpath of a domain.
site.baseurl
To use Varables in Jekyll, you can use the following syntax: ``.
For Example:
![An example image]({{ site.baseurl }}/images/example.jpg)
Images can be included in your content using the following syntax: [Alt Text](URL for the image).
[Alt Text](URL for the image)
For example:
![An example image](/images/example.jpg)
Include a link to your CSS file in the <head> section of your layout template:
<head>
<link rel="stylesheet" href="/css/styles.css">
Include your JavaScript files before the closing </body> tag in your layout template for better page load performance:
</body>
<script src="{{ site.baseurl }}/js/scripts.js"></script>
Jekyll has built-in support for Sass, a CSS preprocessor that allows you to use variables, nested rules, mixins, and more in your stylesheets.
.scss
.sass
_sass
css
@import
--- --- @import "main";
images
js
< Previous Next >