Skip to content

Adding Jekyll tutorial #3706

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions docs/Jekyll/01-Introduction.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
id: introduction-to-jekyll
title: Introduction to Jekyll
sidebar_label: Introduction to Jekyll
sidebar_position: 1
tags: [jekyll, static site generator]
description: Learn about Jekyll, a static site generator used for creating fast and secure websites with ease.
---

Jekyll is a static site generator written in Ruby. It takes a directory of templates, content files, and configuration, and produces a static website. Jekyll is commonly used for blogs and project websites because of its simplicity and efficiency.

### Key Features of Flask

1. **Static Site Generation:** Jekyll generates static HTML pages, which are fast to load and secure.

2. **Markdown Support:** Write content in Markdown, and Jekyll will convert it to HTML.

3. **Template System:** Use Liquid templates to create dynamic content.

4. **Plugins:** Extend Jekyll's functionality with plugins.


### Conclusion

Jekyll is an excellent choice for creating simple, fast, and secure static websites. Its features make it suitable for personal blogs, project documentation, and more. Whether you're a developer looking to build a portfolio or a content creator needing a reliable blogging platform, Jekyll offers the tools and flexibility needed to create a professional and efficient website.
30 changes: 30 additions & 0 deletions docs/Jekyll/02-Installation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
id: installing-jekyll
title: Installing Jekyll
sidebar_label: Installing Jekyll
sidebar_position: 2
tags: [jekyll, installation]
description: Learn how to install Jekyll on your local machine and get started quickly.
---

Installing Jekyll is straightforward, especially if you have Ruby installed on your system. Jekyll requires a few dependencies and can be set up with simple commands.

### Prerequisites
**Ruby:** Ensure you have Ruby installed. You can check by running `ruby -v` in your terminal.

**RubyGems:** This is usually installed with Ruby. Check with `gem -v`.

### Installation Steps

1. **Install Jekyll and Bundler:**
```sh
gem install jekyll bundler
```

2. **Verify the Installation:**
```sh
jekyll -v
```
### Conclusion

By following these steps, you should have Jekyll installed on your system, ready to create and manage static websites. With Jekyll and Bundler set up, you can efficiently handle dependencies and ensure your site builds consistently across different environments.
28 changes: 28 additions & 0 deletions docs/Jekyll/03-Setting-Up.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
id: setting-up-a-new-jekyll-site
title: Setting up a new Jekyll site
sidebar_label: Setting up a new Jekyll site
sidebar_position: 3
tags: [jekyll, setup, new site]
description: Learn how to set up a new Jekyll site from scratch, including creating and structuring your project.
---

Setting up a new Jekyll site is simple and quick, allowing you to get started with your static website in no time. Jekyll provides a default structure that you can easily customize.

### Steps

1. **Create a New Jekyll Site:**
```sh
jekyll new my-awesome-site
cd my-awesome-site
```

2. **Build the Site and Serve Locally:**
```sh
bundle exec jekyll serve
```
Visit `http://localhost:4000` to see your new site.

### Conclusion

With these steps, you've created a new Jekyll site and served it locally, ready for customization and content addition. Jekyll's default structure includes folders for posts, pages, assets, and configuration, making it easy to organize and manage your site effectively.
33 changes: 33 additions & 0 deletions docs/Jekyll/04-Configuration.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
id: jekyll-configuration
title: Jekyll Configuration
sidebar_label: Jekyll Configuration
sidebar_position: 4
tags: [jekyll, configuration]
description: Learn how to configure your Jekyll site using the `_config.yml` file to customize settings and behavior.
---

Jekyll uses a `_config.yml` file for configuration, where you can set various options for your site. This file is essential for customizing your site's behavior, appearance, and functionality.

### Key Configuration Options

1. **Site Settings:**
``yaml
title: My Awesome Site
description: >- # this means to ignore newlines until "baseurl:"
This is my awesome website built with Jekyll.
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://example.com" # the base hostname & protocol for your site
```

2. **Build Settings:**
```yaml
markdown: kramdown
theme: minima
plugins:
- jekyll-feed
```

### Conclusion

The `_config.yml` file is crucial for customizing your Jekyll site. By modifying this file, you can easily change the behavior and appearance of your site. Whether you need to update the site title, add plugins, or adjust markdown settings,` _config.yml` provides a centralized location for these configurations, simplifying site management and customization.
62 changes: 62 additions & 0 deletions docs/Jekyll/05-Pages-and-Post.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
id: creating-pages-and-posts
title: Creating Pages and Posts
sidebar_label: Creating Pages and Posts
sidebar_position: 5
tags: [jekyll, pages, posts]
description: Learn how to create pages and posts in Jekyll to add content to your site.
---

Creating content in Jekyll involves creating pages and posts. Pages are used for static content, while posts are typically used for blog entries.

### Creating Pages

1. **Create a New Page:**
```sh
touch about.md
```
- Add the following front matter to the page:

markdown
---
layout: page
title: About
permalink: /about/
---


2. **Add Content:**

markdown
# About Me
This is the about page of my Jekyll site.


### Creating Posts

1. **Create a New Post:**
```sh
touch _posts/2024-07-20-my-first-post.md
```

- Add the following front matter to the post:

```markdown
---
layout: post
title: "My First Post"
date: 2024-07-20 12:00:00 -0400
categories: blog
---
```

2. **Add Content:**

```markdown
# Welcome
This is my first blog post on my new Jekyll site.
```

### Conclusion

Creating pages and posts in Jekyll is straightforward. By using the appropriate front matter, you can easily add and organize content on your site. Whether you're building a blog, a portfolio, or a documentation site, Jekyll's simple file-based structure makes content management intuitive and efficient.
34 changes: 34 additions & 0 deletions docs/Jekyll/06-Themes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
id: using-themes
title: Using Themes
sidebar_label: Using Themes
sidebar_position: 6
tags: [jekyll, themes]
description: Learn how to use and customize themes in Jekyll to enhance the look and feel of your site.
---

Jekyll themes allow you to quickly change the appearance of your site without having to design it from scratch. Themes provide a consistent look and feel across all pages and posts.

### Steps to Use a Theme

1. **Choose a Theme:** Browse themes on Jekyll Themes or GitHub.

2. **Add the Theme to Your Site:**

```yaml
# _config.yml
theme: jekyll-theme-minimal
```

3. **Install the Theme:**
```sh
bundle install
```

### Customizing a Theme

To customize a theme, you can override theme files by copying them into your site’s directory. For example, to customize the `_layouts/default.html` layout, copy it from the theme's gem to your local `_layouts` directory.

### Conclusion

Using themes in Jekyll simplifies the process of styling your site. You can quickly implement a professional design and further customize it to meet your needs, ensuring your site looks unique and polished.
66 changes: 66 additions & 0 deletions docs/Jekyll/07-Layouts-and-Includes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
id: working-with-layouts-and-includes
title: Working with Layouts and Includes
sidebar_label: Working with Layouts and Includes
sidebar_position: 7
tags: [jekyll, layouts, includes]
description: Learn how to use layouts and includes in Jekyll to structure your site efficiently.
---

Layouts and includes in Jekyll help you manage the structure and reuse components across your site. They enable you to maintain a consistent design and avoid redundancy.

### Using Layouts

1. **Define a Layout:**

```html
<!-- _layouts/default.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ page.title }}</title>
</head>
<body>
{{ content }}
</body>
</html>
```

2. **Apply the Layout:**
```yaml
---
layout: default
title: My Page
---
```

### Using Includes

1. **Create an Include:**

```html
<header>
<h1>Welcome to My Site</h1>
</header>
```

2. **Use the Include:**

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ page.title }}</title>
</head>
<body>
{% include header.html %}
{{ content }}
</body>
</html>
```

### Conclusion

Layouts and includes are powerful tools in Jekyll for creating a maintainable and scalable site structure. They help you keep your code DRY (Don't Repeat Yourself) and ensure a consistent layout across your site.
37 changes: 37 additions & 0 deletions docs/Jekyll/08-Plugins.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
id: jekyll-plugins
title: Jekyll Plugins
sidebar_label: Jekyll Plugins
sidebar_position: 8
tags: [jekyll, plugins]
description: Discover how to extend your Jekyll site’s functionality using plugins.
---

Jekyll plugins allow you to extend the functionality of your site beyond the built-in features. Plugins can handle tasks such as generating sitemaps, managing assets, and more.

### Installing Plugins

1. **Add the Plugin to Your `Gemfile`:**
```ruby
gem "jekyll-sitemap"
```

2. **Update Your Bundle:**
```sh
bundle install
```

3. **Enable the Plugin in `_config.yml:`**
```yaml
plugins:
- jekyll-sitemap
```

### Popular Plugins
1. **jekyll-seo-tag:** Adds SEO tags to your site.
2. **jekyll-paginate:** Provides pagination for posts.
3. **jekyll-feed:** Generates an RSS feed for your posts

### Conclusion

Jekyll plugins are a great way to enhance your site with additional features. By leveraging plugins, you can save time and effort while adding powerful capabilities to your static site.
37 changes: 37 additions & 0 deletions docs/Jekyll/09-Deployments.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
id: deployment
title: Deployment
sidebar_label: Deployment
sidebar_position: 9
tags: [jekyll, deployment]
description: Learn how to deploy your Jekyll site to different hosting platforms.
---

Deploying your Jekyll site involves moving your static files to a server where they can be accessed by visitors. Various hosting platforms support Jekyll sites, making deployment straightforward.

### Popular Deployment Options

**GitHub Pages:**

- Steps:
1. Push your site to a GitHub repository.
2. Configure the repository settings to enable GitHub Pages.
- Advantages: Free hosting with easy integration.

**Netlify:**

- Steps:
1. Connect your GitHub repository to Netlify.
2. Netlify will build and deploy your site automatically.
- Advantages: Continuous deployment, custom domains, and SSL.

**Amazon S3:**

- Steps:
1. Upload your site files to an S3 bucket.
2. Configure the bucket to serve static content.
- Advantages: Scalable and reliable hosting.

### Conclusion

Deploying your Jekyll site can be done easily using various platforms like GitHub Pages, Netlify, and Amazon S3. Each option offers different features and advantages, allowing you to choose the best solution for your needs.
Loading
Loading