getting-started

Project Structure

Project Structure Overview

The Snowlake Jekyll Theme Version 2.0.0 follows a comprehensive and modular directory structure designed to provide flexibility, maintainability, and ease of customization.

Core Jekyll Directories

1. _authors/

  • Contains markdown files for author profiles
  • Enables dynamic author information across the site
  • Example files: sarah-wanderlust.md, tortoiz-themes.md

2. _data/

  • YAML and JSON configuration files for site-wide settings
  • Manages carousel data, navigation, and other dynamic content
  • Key files:
    • clients_carousel.yml
    • navigation.yml
    • team_carousel.yml

3. _includes/

  • Reusable HTML components and partials
  • Organized into subdirectories:
    • components/: Modular UI components
    • core/: Essential site-wide includes (meta tags, scripts)
    • layouts/: Layout-specific includes
    • posts/: Blog-related includes
    • utilities/: Utility components like analytics, social sharing

4. _layouts/

  • HTML templates for different page types
  • Supports various layouts:
    • Blog layouts
    • Portfolio layouts
    • Post layouts
    • Shop layouts

5. _portfolio/

  • Markdown files for portfolio items
  • Organized by display style:
    • fullscreen/
    • grid/
    • masonry/
    • mosaic/
    • products/

6. _posts/

  • Blog post markdown files
  • Follows Jekyll’s date-based naming convention
  • Supports various post formats and styles

7. _shop_items/

  • Markdown files for shop products
  • Includes featured products section

Page and Feature Directories

8. about/

  • About page variations and templates

9. blogs/

  • Blog index pages with different layouts

10. contact/

  • Contact page templates
  • Includes documentation guides

11. elements/

  • UI component demonstrations
  • Includes accordions, buttons, carousels, etc.

12. features/

  • Header and footer variations
  • Navigation styles
  • Modal and loading templates

13. home-pages/

  • Multiple homepage variations
  • Different design and layout options

14. portfolios/

  • Portfolio page templates
  • Various display styles (grid, masonry, mosaic)

15. services/

  • Service page templates

16. shop/

  • Shop-related pages
  • Cart and checkout templates

Configuration and Utility Files

  • _config.yml: Main Jekyll configuration
  • Gemfile: Ruby gem dependencies
  • README.md: Project documentation
  • 404.html: Custom error page

Best Practices and Recommendations

  1. Use meaningful, descriptive names for files and directories
  2. Leverage Jekyll’s include and layout systems for modularity
  3. Keep configuration files organized and well-commented
  4. Utilize front matter for page-specific metadata
  5. Maintain consistent naming conventions

Customization Tips

  • Modify _data/ files to update site-wide settings
  • Add new layouts in _layouts/ for unique page designs
  • Extend _includes/ with custom components
  • Create new portfolio and blog post entries as needed

Performance Considerations

  • Minimize the use of large assets
  • Optimize images and use responsive techniques
  • Leverage Jekyll’s built-in asset management
  • Use caching and CDN for static assets

Project Folder Structure

Snowlake Jekyll Theme Version 2.0.0 ├── _authors/ │ │ sarah-wanderlust.md │ │ tortoiz-themes.md ├── _data/ │ │ clients_carousel.yml │ │ general_settings.yml │ │ navigation.yml │ │ one_page_nav.yml │ │ reviews.json │ │ team_carousel.yml ├── _includes/ │ ├── components/ │ │ ├── breadcrumbs/ │ │ │ │ breadcrumb-text.html │ │ │ │ breadcrumbs.html │ │ ├── clients/ │ │ │ │ clients-carousel.html │ │ ├── contact/ │ │ │ │ contact-1.html │ │ │ │ contact-2.html │ │ │ │ contact-3.html │ │ │ │ contact-4.html │ │ │ │ contact-info.html │ │ │ │ gmap.html │ │ ├── modals/ │ │ │ │ _modal-contact.html │ │ │ │ _modal-cookie.html │ │ │ │ _modal-sale.html │ │ │ │ _modal-signup.html │ │ │ │ _modal-subscription-alternative.html │ │ │ │ _modal-subscription.html │ │ ├── portfolio/ │ │ │ ├── loops/ │ │ │ │ │ fullscreen-loop.html │ │ │ │ │ grid-loop.html │ │ │ │ │ masonry-loop.html │ │ │ │ │ mosaic-loop.html │ │ │ │ │ portfolio-loop.html │ │ │ │ related-projects.html │ │ ├── shop/ │ │ │ │ products-carousel.html │ │ │ │ products_slider.html │ │ │ │ shop-items-list.html │ │ ├── team/ │ │ │ │ team-members.html │ │ │ │ teams-carousel.html │ ├── core/ │ │ ├── head/ │ │ │ │ meta-og-tags.html │ │ │ │ meta-seo-tags.html │ │ ├── scripts/ │ │ │ │ scripts.html │ │ ├── styles/ │ │ │ │ styles.html │ ├── layouts/ │ │ ├── footer/ │ │ │ │ footer-1.html │ │ │ │ footer-2.html │ │ │ │ footer-3.html │ │ │ │ footer-4.html │ │ │ │ footer-5.html │ │ │ │ footer-6.html │ │ │ │ footer-7.html │ │ │ │ footer-8.html │ │ │ │ footer.html │ │ ├── header/ │ │ │ │ page-title.html │ │ │ │ page-title10.html │ │ │ │ page-title2.html │ │ │ │ page-title3.html │ │ │ │ page-title4.html │ │ │ │ page-title5.html │ │ │ │ page-title6.html │ │ │ │ page-title7.html │ │ │ │ page-title8.html │ │ │ │ page-title9.html │ │ ├── nav/ │ │ │ │ _btn-header.html │ │ │ │ _cart-header-section.html │ │ │ │ _drop-search.html │ │ │ │ _hamburger.html │ │ │ │ _offcanvas-info.html │ │ │ │ _shop-header.html │ │ │ │ _social_header.html │ │ │ │ nav-1.html │ │ │ │ nav-10.html │ │ │ │ nav-11.html │ │ │ │ nav-2.html │ │ │ │ nav-3.html │ │ │ │ nav-4.html │ │ │ │ nav-5.html │ │ │ │ nav-6.html │ │ │ │ nav-7.html │ │ │ │ nav-8.html │ │ │ │ nav-9.html │ │ │ │ one-page-nav-2.html │ │ │ │ one-page-nav.html │ │ ├── sidebar/ │ │ │ │ sidebar-2.html │ │ │ │ sidebar.html │ ├── posts/ │ │ │ author.html │ │ │ carousel-layout.html │ │ │ gallery-layout.html │ │ │ gallery.html │ │ ├── loops/ │ │ │ │ post-loop.html │ │ │ slider-posts.html │ │ │ trending-posts.html │ ├── utilities/ │ │ │ analytics.html │ │ │ cover.html │ │ │ disqus-comments.html │ │ │ divider.html │ │ │ page-loading.html │ │ │ pagination.html │ │ │ social-share.html │ │ │ video.html ├── _layouts/ │ │ author_page.html │ ├── blog/ │ │ │ boxed-classic-sidebar-view.html │ │ │ boxed-classic-view.html │ │ │ boxed-grid-sidebar-view.html │ │ │ boxed-grid-view.html │ │ │ classic-grid-sidebar-view.html │ │ │ classic-grid-view.html │ │ │ classic-sidebar-view.html │ │ │ classic-view.html │ │ category.html │ │ default.html │ │ maintenance.html │ │ one-page.html │ │ page-2.html │ │ page.html │ ├── portfolio/ │ │ ├── items/ │ │ │ │ carousel-layout.html │ │ │ │ columns-layout.html │ │ │ │ masonry-layout.html │ │ │ │ multiple-img-layout.html │ │ │ │ slider-layout.html │ │ │ │ video-layout.html │ │ │ portfolio-boxed-details.html │ │ │ portfolio-classic-details.html │ │ │ portfolio-fullscreen-grid.html │ │ │ portfolio-grid-details.html │ │ │ portfolio-grid.html │ │ │ portfolio-masonry-details.html │ │ │ portfolio-masonry.html │ │ │ portfolio-mosaic.html │ ├── posts/ │ │ │ post-boxed-sidebar.html │ │ │ post-boxed.html │ │ │ post-sidebar.html │ │ │ post.html │ │ product.html │ │ shop-pages.html │ │ shop.html │ │ single.html │ │ tag.html ├── _portfolio/ │ ├── fullscreen/ │ │ │ cultural-heritage.md │ │ │ environmental-landscapes.md │ │ │ global-photography.md │ │ │ industrial-design.md │ │ │ space-exploration.md │ │ │ technological-innovation.md │ │ │ underwater-diver.md │ │ │ underwater-exploration.md │ ├── grid/ │ │ │ creative-portfolio..md │ │ │ digital-agency.md │ │ │ ecommerce-platform.md │ │ │ illustration-project.md │ │ │ mobile-app-design.md │ │ │ packaging-design.md │ │ │ photography-portfolio.md │ │ │ social-media-campaign.md │ │ │ startup-branding.md │ ├── masonry/ │ │ │ architectural-photography.md │ │ │ digital-art.md │ │ │ digital-photo.md │ │ │ fashion-design.md │ │ │ food-photography.md │ │ │ interior-design.md │ │ │ landscape-photography.md │ │ │ product-design.md │ │ │ street-art.md │ │ │ street-design.md │ │ │ tattoo-design.md │ │ │ urban-street.md │ ├── mosaic/ │ │ │ abstract-art.md │ │ │ brand-identity.md │ │ │ commercial-photography.md │ │ │ data-visualization.md │ │ │ digital-illustration.md │ │ │ digital-marketing.md │ │ │ environmental-design.md │ │ │ experimental-typography.md │ │ │ graphic-design.md │ │ │ interactive-design.md │ │ │ motion-graphics.md │ │ │ product-photography.md │ │ │ ui-ux-design.md │ │ │ video-production.md │ │ │ web-design.md │ │ portfolio-post-carousel.md │ │ portfolio-post-columns.md │ │ portfolio-post-masonry.md │ │ portfolio-post-multi-images.md │ │ portfolio-post-slider.md │ │ portfolio-post-video.md │ ├── products/ │ │ │ brand_box.md │ │ │ branding_stationary.md │ │ │ brown_paper_card.md │ │ │ clipboard_office.md │ │ │ half_fold_book.md │ │ │ paperback_book.md ├── _posts/ │ │ 2025-01-01-simple-post-with-sidebar.md │ │ 2025-01-02-post-boxed-sidebar.md │ │ 2025-01-02-post-boxed.md │ │ 2025-01-03-a-dreamy-roadtrip-in-australia.md │ │ 2025-01-03-markdown-post.md │ │ 2025-01-04-markdown-with-image.md │ │ 2025-01-04-my-love-affair-with-cappadocia.md │ │ 2025-01-05-24-hours-in-the-village-of-valencia.md │ │ 2025-01-05-markdown-post-with-code-highlighting.md │ │ 2025-01-06-24-the-biggest-train-station-in-europe.md │ │ 2025-01-06-markdown-Post-With-Video.md │ │ 2025-01-07-engagement-our-statement.md │ │ 2025-01-07-maecenas-sed-diam.markdown │ │ 2025-01-07-the-natural-places-in-brazil.md │ │ 2025-01-08-simple-post-no-sidebar.md │ │ 2025-01-10-post-with-Gallery.md │ │ 2025-01-14-Post-with-Carousel.md │ │ 2025-01-14-markdown-advanced-guide.md │ │ 2025-01-14-travel-photography-essentials.md │ │ 2025-01-15-multi-carousel-post.md ├── _shop_items/ │ │ brand_box.md │ │ branding_stationary.md │ │ brown_paper_card.md │ │ clipboard_office.md │ ├── featured/ │ │ │ featured_product1.md │ │ │ featured_product2.md │ │ │ featured_product3.md │ │ half_fold_book.md │ │ paperback_book.md │ │ shopping_bag.md │ │ shopping_paperbag.md │ │ wine_bag.md ├── about/ │ │ about-2.html │ │ about-3.html │ │ about-4.html │ │ about.html │ │ index.html │ blank_page.html ├── blogs/ │ │ index-boxed-classic-sidebar.html │ │ index-boxed-classic.html │ │ index-boxed-grid-sidebar.html │ │ index-boxed-grid.html │ │ index-classic-grid-sidebar.html │ │ index-classic-grid.html │ │ index-classic-sidebar.html │ │ index-classic.html │ │ index.html │ cloudflare.toml ├── contact/ │ │ contact-1.html │ │ contact-2.html │ │ contact-3.html │ │ contact-4.html │ │ index.html │ ├── layout/ │ │ │ 01-layout-overview-guide.md │ │ │ 02-footer-layouts-guide.md │ │ │ 03-header-configurations-guide.md │ │ │ 04-navigation-styles-guide.md │ │ │ 05-sidebar-guide.md │ ├── posts/ │ │ │ 01-simple-post-with-sidebar-guide.md │ │ │ 02-boxed-post-with-sidebar-guide.md │ │ │ 03-markdown-post-guide.md │ │ │ 04-markdown-with-image-guide.md │ │ │ 05-markdown-with-code-highlighting-guide.md │ │ │ 06-markdown-post-with-video-guide.md │ │ │ 07-markdown-post-with-gallery-guide.md │ │ │ 08-markdown-post-with-carousel-guide.md │ ├── shop/ │ │ │ 01-shop-item-guide.md │ │ │ 03-shop-item-types-guide.md │ ├── tutorials/ │ │ │ MASONRY_TEMPLATE.md │ │ │ folder-structure.md │ │ │ general-settings.md │ │ │ modals.md │ │ │ overview.md │ │ │ portfolio-layouts.md │ │ │ post-types.md │ │ │ project-structure.md │ │ │ shop-product.md │ │ │ single-post.md ├── elements/ │ │ accordion.html │ │ alerts.html │ │ animated_text.html │ │ blockquote.html │ │ buttons_badges.html │ │ call_to_action.html │ │ carousel.html │ │ clients.html │ │ countdown.html │ │ counter.html │ │ dividers.html │ │ dropcap.html │ │ forms.html │ │ icon_box.html │ │ icons_concept.html │ │ icons_icofont.html │ │ icons_image_mask.html │ │ icons_jam.html │ │ icons_lineal.html │ │ image_hover.html │ │ lightbox.html │ │ lists.html │ │ media_player.html │ │ modal.html │ │ pricing.html │ │ process_steps.html │ │ progress_bar.html │ │ scroll_animations.html │ │ social_icons.html │ │ tables.html │ │ tabs.html │ │ team.html │ │ testimonials.html │ │ titles.html │ │ toggle.html │ │ tooltip_popover.html │ │ typography.html │ │ video_popup.html │ │ waves.html │ │ wrappers.html ├── features/ │ │ faq.html │ │ footer1.html │ │ footer2.html │ │ footer3.html │ │ footer4.html │ │ footer5.html │ │ footer6.html │ │ footer7.html │ │ footer8.html │ │ header1.html │ │ header10.html │ │ header2.html │ │ header3.html │ │ header4.html │ │ header5.html │ │ header6.html │ │ header7.html │ │ header8.html │ │ header9.html │ │ index.html │ │ loading.html │ │ modal.html │ │ navigation1.html │ │ navigation10.html │ │ navigation11.html │ │ navigation2.html │ │ navigation3.html │ │ navigation4.html │ │ navigation5.html │ │ navigation6.html │ │ navigation7.html │ │ navigation8.html │ │ navigation9.html │ │ scroll.html │ github.toml ├── home-pages/ │ │ index-10.html │ │ index-11.html │ │ index-12.html │ │ index-13.html │ │ index-14.html │ │ index-15.html │ │ index-16.html │ │ index-17.html │ │ index-18.html │ │ index-19.html │ │ index-2.html │ │ index-20.html │ │ index-21.html │ │ index-22.html │ │ index-23.html │ │ index-24.html │ │ index-25.html │ │ index-26.html │ │ index-27.html │ │ index-3.html │ │ index-31.html │ │ index-4.html │ │ index-5.html │ │ index-6.html │ │ index-7.html │ │ index-8.html │ │ index-9.html │ │ index.html │ index.html │ netlify.toml ├── portfolios/ │ │ box-item-details.html │ │ fullscreen-grid.html │ │ grid-portfolio-details.html │ │ grid-portfolio.html │ │ masonry-portfolio-details.html │ │ masonry-portfolio.html │ │ mosaic-portfolio.html │ │ portfolio-item-details.html │ search.json ├── services/ │ │ index-2.html │ │ index-3.html │ │ index-4.html │ │ index-5.html │ │ index.html ├── shop/ │ │ index-2.html │ │ index.html │ │ shop-cart.html │ │ shop-checkout.html │ 404.html │ Gemfile │ README.md │ _config.yml