Skip to content

Commit db989ee

Browse files
sjain1970sjain1970
committed
Adding Jekyll tutorial
## Fixing Issue #3622 ## Description This pull request adds a comprehensive Jekyll tutorial to the documentation. The tutorial covers the basics of setting up a Jekyll site, creating posts and pages, using templates and layouts, and customizing the site with themes and plugins. It also includes examples and step-by-step instructions to help beginners understand and build their own Jekyll sites. ## Type of PR - [ ] Bug fix - [x] Feature enhancement - [ ] Documentation update - [ ] Security enhancement - [ ] Other (specify): _______________ ## Checklist - [x] I have performed a self-review of my code. - [x] I have read and followed the Contribution Guidelines. - [x] I have tested the changes thoroughly before submitting this pull request. - [x] I have provided relevant issue numbers, screenshots, and videos after making the changes. - [x] I have commented my code, particularly in hard-to-understand areas. - [x] I have followed the code style guidelines of this project. - [x] I have checked for any existing open issues that my pull request may address. - [x] I have ensured that my changes do not break any existing functionality. - [x] Each contributor is allowed to create a maximum of 4 issues per day. This helps us manage and address issues efficiently. - [x] I have read the resources for guidance listed below. - [x] I have followed security best practices in my code changes. ## Additional Context This Jekyll tutorial includes: - Setting up a Jekyll development environment. - Creating and managing posts and pages. - Using and customizing templates and layouts. - Applying themes and integrating plugins for added functionality. - Step-by-step instructions and examples for beginners to get started with Jekyll. ## Resources for Guidance Please read the following resources before submitting your contribution: - [x] [Code Harbor Hub Community Features](https://www.codeharborhub.live/community/features) - [x] [Markdown Guide](https://www.markdownguide.org/)
1 parent 031244b commit db989ee

11 files changed

+392
-0
lines changed

‎docs/Jekyll/01-Introduction.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
id: introduction-to-jekyll
3+
title: Introduction to Jekyll
4+
sidebar_label: Introduction to Jekyll
5+
sidebar_position: 1
6+
tags: [jekyll, static site generator]
7+
description: Learn about Jekyll, a static site generator used for creating fast and secure websites with ease.
8+
---
9+
10+
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.
11+
12+
### Key Features of Flask
13+
14+
1. **Static Site Generation:** Jekyll generates static HTML pages, which are fast to load and secure.
15+
16+
2. **Markdown Support:** Write content in Markdown, and Jekyll will convert it to HTML.
17+
18+
3. **Template System:** Use Liquid templates to create dynamic content.
19+
20+
4. **Plugins:** Extend Jekyll's functionality with plugins.
21+
22+
23+
### Conclusion
24+
25+
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.

‎docs/Jekyll/02-Installation.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
id: installing-jekyll
3+
title: Installing Jekyll
4+
sidebar_label: Installing Jekyll
5+
sidebar_position: 2
6+
tags: [jekyll, installation]
7+
description: Learn how to install Jekyll on your local machine and get started quickly.
8+
---
9+
10+
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.
11+
12+
### Prerequisites
13+
**Ruby:** Ensure you have Ruby installed. You can check by running `ruby -v` in your terminal.
14+
15+
**RubyGems:** This is usually installed with Ruby. Check with `gem -v`.
16+
17+
### Installation Steps
18+
19+
1. **Install Jekyll and Bundler:**
20+
```sh
21+
gem install jekyll bundler
22+
```
23+
24+
2. **Verify the Installation:**
25+
```sh
26+
jekyll -v
27+
```
28+
### Conclusion
29+
30+
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.

‎docs/Jekyll/03-Setting-Up.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
id: setting-up-a-new-jekyll-site
3+
title: Setting up a new Jekyll site
4+
sidebar_label: Setting up a new Jekyll site
5+
sidebar_position: 3
6+
tags: [jekyll, setup, new site]
7+
description: Learn how to set up a new Jekyll site from scratch, including creating and structuring your project.
8+
---
9+
10+
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.
11+
12+
### Steps
13+
14+
1. **Create a New Jekyll Site:**
15+
```sh
16+
jekyll new my-awesome-site
17+
cd my-awesome-site
18+
```
19+
20+
2. **Build the Site and Serve Locally:**
21+
```sh
22+
bundle exec jekyll serve
23+
```
24+
Visit `http://localhost:4000` to see your new site.
25+
26+
### Conclusion
27+
28+
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.

‎docs/Jekyll/04-Configuration.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
id: jekyll-configuration
3+
title: Jekyll Configuration
4+
sidebar_label: Jekyll Configuration
5+
sidebar_position: 4
6+
tags: [jekyll, configuration]
7+
description: Learn how to configure your Jekyll site using the `_config.yml` file to customize settings and behavior.
8+
---
9+
10+
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.
11+
12+
### Key Configuration Options
13+
14+
1. **Site Settings:**
15+
``yaml
16+
title: My Awesome Site
17+
description: >- # this means to ignore newlines until "baseurl:"
18+
This is my awesome website built with Jekyll.
19+
baseurl: "" # the subpath of your site, e.g. /blog
20+
url: "http://example.com" # the base hostname & protocol for your site
21+
```
22+
23+
2. **Build Settings:**
24+
```yaml
25+
markdown: kramdown
26+
theme: minima
27+
plugins:
28+
- jekyll-feed
29+
```
30+
31+
### Conclusion
32+
33+
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.

‎docs/Jekyll/05-Pages-and-Post.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
id: creating-pages-and-posts
3+
title: Creating Pages and Posts
4+
sidebar_label: Creating Pages and Posts
5+
sidebar_position: 5
6+
tags: [jekyll, pages, posts]
7+
description: Learn how to create pages and posts in Jekyll to add content to your site.
8+
---
9+
10+
Creating content in Jekyll involves creating pages and posts. Pages are used for static content, while posts are typically used for blog entries.
11+
12+
### Creating Pages
13+
14+
1. **Create a New Page:**
15+
```sh
16+
touch about.md
17+
```
18+
- Add the following front matter to the page:
19+
20+
markdown
21+
---
22+
layout: page
23+
title: About
24+
permalink: /about/
25+
---
26+
27+
28+
2. **Add Content:**
29+
30+
markdown
31+
# About Me
32+
This is the about page of my Jekyll site.
33+
34+
35+
### Creating Posts
36+
37+
1. **Create a New Post:**
38+
```sh
39+
touch _posts/2024-07-20-my-first-post.md
40+
```
41+
42+
- Add the following front matter to the post:
43+
44+
```markdown
45+
---
46+
layout: post
47+
title: "My First Post"
48+
date: 2024-07-20 12:00:00 -0400
49+
categories: blog
50+
---
51+
```
52+
53+
2. **Add Content:**
54+
55+
```markdown
56+
# Welcome
57+
This is my first blog post on my new Jekyll site.
58+
```
59+
60+
### Conclusion
61+
62+
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.

‎docs/Jekyll/06-Themes.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
id: using-themes
3+
title: Using Themes
4+
sidebar_label: Using Themes
5+
sidebar_position: 6
6+
tags: [jekyll, themes]
7+
description: Learn how to use and customize themes in Jekyll to enhance the look and feel of your site.
8+
---
9+
10+
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.
11+
12+
### Steps to Use a Theme
13+
14+
1. **Choose a Theme:** Browse themes on Jekyll Themes or GitHub.
15+
16+
2. **Add the Theme to Your Site:**
17+
18+
```yaml
19+
# _config.yml
20+
theme: jekyll-theme-minimal
21+
```
22+
23+
3. **Install the Theme:**
24+
```sh
25+
bundle install
26+
```
27+
28+
### Customizing a Theme
29+
30+
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.
31+
32+
### Conclusion
33+
34+
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.

‎docs/Jekyll/07-Layouts-and-Includes.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
id: working-with-layouts-and-includes
3+
title: Working with Layouts and Includes
4+
sidebar_label: Working with Layouts and Includes
5+
sidebar_position: 7
6+
tags: [jekyll, layouts, includes]
7+
description: Learn how to use layouts and includes in Jekyll to structure your site efficiently.
8+
---
9+
10+
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.
11+
12+
### Using Layouts
13+
14+
1. **Define a Layout:**
15+
16+
```html
17+
<!-- _layouts/default.html -->
18+
<!DOCTYPE html>
19+
<html lang="en">
20+
<head>
21+
<meta charset="UTF-8">
22+
<title>{{ page.title }}</title>
23+
</head>
24+
<body>
25+
{{ content }}
26+
</body>
27+
</html>
28+
```
29+
30+
2. **Apply the Layout:**
31+
```yaml
32+
---
33+
layout: default
34+
title: My Page
35+
---
36+
```
37+
38+
### Using Includes
39+
40+
1. **Create an Include:**
41+
42+
```html
43+
<header>
44+
<h1>Welcome to My Site</h1>
45+
</header>
46+
```
47+
48+
2. **Use the Include:**
49+
50+
```html
51+
<!DOCTYPE html>
52+
<html lang="en">
53+
<head>
54+
<meta charset="UTF-8">
55+
<title>{{ page.title }}</title>
56+
</head>
57+
<body>
58+
{% include header.html %}
59+
{{ content }}
60+
</body>
61+
</html>
62+
```
63+
64+
### Conclusion
65+
66+
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.

‎docs/Jekyll/08-Plugins.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
id: jekyll-plugins
3+
title: Jekyll Plugins
4+
sidebar_label: Jekyll Plugins
5+
sidebar_position: 8
6+
tags: [jekyll, plugins]
7+
description: Discover how to extend your Jekyll site’s functionality using plugins.
8+
---
9+
10+
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.
11+
12+
### Installing Plugins
13+
14+
1. **Add the Plugin to Your `Gemfile`:**
15+
```ruby
16+
gem "jekyll-sitemap"
17+
```
18+
19+
2. **Update Your Bundle:**
20+
```sh
21+
bundle install
22+
```
23+
24+
3. **Enable the Plugin in `_config.yml:`**
25+
```yaml
26+
plugins:
27+
- jekyll-sitemap
28+
```
29+
30+
### Popular Plugins
31+
1. **jekyll-seo-tag:** Adds SEO tags to your site.
32+
2. **jekyll-paginate:** Provides pagination for posts.
33+
3. **jekyll-feed:** Generates an RSS feed for your posts
34+
35+
### Conclusion
36+
37+
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.

‎docs/Jekyll/09-Deployments.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
id: deployment
3+
title: Deployment
4+
sidebar_label: Deployment
5+
sidebar_position: 9
6+
tags: [jekyll, deployment]
7+
description: Learn how to deploy your Jekyll site to different hosting platforms.
8+
---
9+
10+
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.
11+
12+
### Popular Deployment Options
13+
14+
**GitHub Pages:**
15+
16+
- Steps:
17+
1. Push your site to a GitHub repository.
18+
2. Configure the repository settings to enable GitHub Pages.
19+
- Advantages: Free hosting with easy integration.
20+
21+
**Netlify:**
22+
23+
- Steps:
24+
1. Connect your GitHub repository to Netlify.
25+
2. Netlify will build and deploy your site automatically.
26+
- Advantages: Continuous deployment, custom domains, and SSL.
27+
28+
**Amazon S3:**
29+
30+
- Steps:
31+
1. Upload your site files to an S3 bucket.
32+
2. Configure the bucket to serve static content.
33+
- Advantages: Scalable and reliable hosting.
34+
35+
### Conclusion
36+
37+
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.

0 commit comments

Comments
 (0)