diff --git a/docs/Jekyll/01-Introduction.md b/docs/Jekyll/01-Introduction.md new file mode 100644 index 000000000..b61ffdc76 --- /dev/null +++ b/docs/Jekyll/01-Introduction.md @@ -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. \ No newline at end of file diff --git a/docs/Jekyll/02-Installation.md b/docs/Jekyll/02-Installation.md new file mode 100644 index 000000000..5a62a783d --- /dev/null +++ b/docs/Jekyll/02-Installation.md @@ -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. \ No newline at end of file diff --git a/docs/Jekyll/03-Setting-Up.md b/docs/Jekyll/03-Setting-Up.md new file mode 100644 index 000000000..87a044946 --- /dev/null +++ b/docs/Jekyll/03-Setting-Up.md @@ -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. \ No newline at end of file diff --git a/docs/Jekyll/04-Configuration.md b/docs/Jekyll/04-Configuration.md new file mode 100644 index 000000000..837670eb2 --- /dev/null +++ b/docs/Jekyll/04-Configuration.md @@ -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. \ No newline at end of file diff --git a/docs/Jekyll/05-Pages-and-Post.md b/docs/Jekyll/05-Pages-and-Post.md new file mode 100644 index 000000000..6e695d925 --- /dev/null +++ b/docs/Jekyll/05-Pages-and-Post.md @@ -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. \ No newline at end of file diff --git a/docs/Jekyll/06-Themes.md b/docs/Jekyll/06-Themes.md new file mode 100644 index 000000000..6e8f59535 --- /dev/null +++ b/docs/Jekyll/06-Themes.md @@ -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. \ No newline at end of file diff --git a/docs/Jekyll/07-Layouts-and-Includes.md b/docs/Jekyll/07-Layouts-and-Includes.md new file mode 100644 index 000000000..457cc86bc --- /dev/null +++ b/docs/Jekyll/07-Layouts-and-Includes.md @@ -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 + + + + + + {{ page.title }} + + + {{ content }} + + +``` + +2. **Apply the Layout:** +```yaml +--- +layout: default +title: My Page +--- +``` + +### Using Includes + +1. **Create an Include:** + +```html +
+

Welcome to My Site

+
+``` + +2. **Use the Include:** + +```html + + + + + {{ page.title }} + + + {% include header.html %} + {{ content }} + + +``` + +### 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. \ No newline at end of file diff --git a/docs/Jekyll/08-Plugins.md b/docs/Jekyll/08-Plugins.md new file mode 100644 index 000000000..cabadd4eb --- /dev/null +++ b/docs/Jekyll/08-Plugins.md @@ -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. \ No newline at end of file diff --git a/docs/Jekyll/09-Deployments.md b/docs/Jekyll/09-Deployments.md new file mode 100644 index 000000000..7fc7259b9 --- /dev/null +++ b/docs/Jekyll/09-Deployments.md @@ -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. \ No newline at end of file diff --git a/docs/Jekyll/10-Troubleshooting.md b/docs/Jekyll/10-Troubleshooting.md new file mode 100644 index 000000000..baaa64e1d --- /dev/null +++ b/docs/Jekyll/10-Troubleshooting.md @@ -0,0 +1,32 @@ +--- +id: best-practices-and-troubleshooting +title: Best Practices and Troubleshooting +sidebar_label: Best Practices and Troubleshooting +sidebar_position: 10 +tags: [jekyll, best practices, troubleshooting] +description: Learn best practices for developing Jekyll sites and how to troubleshoot common issues. +--- + +Building a Jekyll site involves more than just writing code. Following best practices and knowing how to troubleshoot issues can save you time and improve your site's quality. + +### Best Practices + +1. **Use Source Control:** Keep your project in a version control system like Git. +2. **Keep Dependencies Updated:** Regularly update your gems and plugins to the latest versions. +3. **Optimize for Performance:** Minimize and compress assets for faster load times. +4. **Backup Your Site:** Regularly backup your site data and configurations. + +### Troubleshooting Common Issues + +1. **Build Errors:** +- Solution: Check the error message and review your _config.yml and front matter for typos or missing values. + +2. **Missing Styles or Scripts:** +- Solution: Verify that your asset paths are correct and that the files are properly linked. + +3. **Deployment Issues:** +- Solution: Ensure your deployment settings are correctly configured and that your hosting platform supports static sites. + +### Conclusion + +Adhering to best practices and being prepared to troubleshoot common issues will make your Jekyll development process smoother and more efficient. By following these guidelines, you can build robust, maintainable, and high-performing static sites. \ No newline at end of file diff --git a/docs/Jekyll/_category_.json b/docs/Jekyll/_category_.json new file mode 100644 index 000000000..909145eb8 --- /dev/null +++ b/docs/Jekyll/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Jekyll", + "position": 30, + "link": { + "type": "generated-index", + "description": "Jekyll is a static site generator that simplifies the creation of websites. In this tutorial, you will learn how to efficiently build and customize static websites using Markdown, Liquid templates, and YAML front matter." + } +} \ No newline at end of file