Introduction

Creating a professional and efficient website is crucial for any business aiming to establish a strong online presence. In this blog post, I will walk you through the comprehensive process of developing a business website for Upasana Yogapeeth using Pelican, a Python-based static site generator, and deploying it on Cloudflare Pages. A significant highlight of this project was developing a custom Pelican theme based on the Bootswatch United theme and using HTML files for content to have precise control over page layouts and designs. We'll delve into each phase of the project, from initial planning to deployment, highlighting the challenges faced and solutions implemented.

In today's digital era, a well-designed website is more than just a digital storefront; it's a platform to engage with customers, showcase services, and build brand credibility. According to recent studies, 93% of business purchase decisions start with a search engine search of websites, highlighting the critical role of a robust online presence.

I embarked on a project to develop a business website for Upasana Yogapeeth, an organization dedicated to promoting yoga and wellness. The project prioritized static content for speed and security, featured a dynamic blog section for regular updates, handled form submissions efficiently, and ensured optimal performance through modern deployment strategies. A significant aspect of this project was creating a custom Pelican theme based on the Bootswatch United theme and utilizing HTML files for content to have precise control over the layout and design of each page, tailored to meet the unique branding and functional needs of the business.

Project Objectives

The primary objectives of the project were:

  • Design an intuitive and visually appealing website layout that reflects the ethos of Upasana Yogapeeth.
  • Develop the website using Pelican, focusing on static content for speed and security.
  • Create a custom Pelican theme based on the Bootswatch United theme to match the business's branding, including color schemes, typography, and imagery.
  • Utilize HTML files for static pages instead of Markdown to have granular control over the layout and styling.
  • Implement a dynamic blog section for regular updates, articles, and news.
  • Enable form submissions using Cloudflare Pages Functions for efficient and secure data handling.
  • Store form data securely in Supabase, a backend as a service platform.
  • Deploy the website on Cloudflare Pages for scalability, speed, and global reach.

Phase 1: Requirements Gathering

Effective requirements gathering is crucial for project success. This phase involved a deep dive into understanding the business's needs and setting a solid foundation for the project's development.

Meetings with Stakeholders

  • Initial Consultation: Met with the Upasana Yogapeeth leadership to understand their mission, vision, and goals for the website.
  • Target Audience Analysis: Identified the primary audience as yoga enthusiasts, potential students, and wellness seekers.
  • Functional Requirements: Discussed necessary features such as course listings, online applications, event calendars, and contact forms.
  • Non-Functional Requirements: Addressed performance, security, SEO optimization, and responsiveness across devices.

Defining the Website Structure

  • Site Map Creation: Developed a detailed site map outlining all necessary pages and sub-pages, namely:
    • Home
    • About Us
    • Courses
    • Blog
    • Contact Us
    • Application Form
  • User Journey Mapping: Mapped out user flows to ensure intuitive navigation and easy access to information.

Feature Identification

  • Blog Section: Needed a section for publishing articles, research findings, and news updates.
  • Contact and Application Forms: Required forms for user inquiries and course applications.
  • Multimedia Integration: Inclusion of galleries, videos, and testimonials.
  • SEO Considerations: Implementation of SEO best practices for higher search engine rankings.

Technical Requirements

  • Static Site Generation with Pelican: Chosen for its efficiency, security, and flexibility.
  • Cloudflare Pages for Hosting: For its ease of deployment, global CDN, and support for serverless functions.
  • Supabase for Data Storage: To securely handle form submissions and user data.
  • Custom Theme Development: To ensure brand consistency and meet specific design requirements.
  • HTML Content Files: Use of HTML instead of Markdown for static pages to have precise control over layout and styling.

Outcome: The culmination of this phase was a comprehensive Requirements Specification Document and a Project Roadmap, providing clear guidance for the subsequent phases.

Phase 2: Design

The design phase translated the gathered requirements into visual representations, focusing on user experience (UX) and user interface (UI) design principles.

Wireframes Creation

  • Low-Fidelity Wireframes: Created sketches for each page to establish basic layouts and content placement.
  • Tools Used: Utilized Figma for digital wireframing, enabling easy sharing and collaboration.
  • Navigation Flow: Designed intuitive menus and navigation paths to enhance user engagement.

Visual Design Mockups

  • High-Fidelity Mockups: Developed detailed designs incorporating color schemes, typography, and imagery aligned with Upasana Yogapeeth's branding.
  • Branding Elements:
    • Logo Integration: Placed prominently on the header and footer for brand recognition.
    • Color Palette: Chose calming and natural tones to reflect the essence of yoga and wellness.
    • Typography: Selected fonts that are clean, modern, and easy to read.
  • Responsive Design Considerations: Ensured that designs adapt gracefully to various screen sizes, including desktop, tablet, and mobile devices.

Stakeholder Review

  • Feedback Sessions: Presented the designs to stakeholders for input and approval.
  • Iterations: Made adjustments based on feedback, such as modifying color contrasts and adjusting content hierarchy.

Preparation of Design Assets

  • Image Optimization: Prepared images in appropriate formats and resolutions for web use.
  • Iconography: Selected or created custom icons to enhance visual appeal and usability.
  • Style Guide Creation: Documented style guidelines to maintain consistency throughout development.

Outcome: Achieved stakeholder approval on the final designs, providing a clear blueprint for the development phase.

Phase 3: Development

The development phase involved bringing the approved designs to life through code, focusing on both front-end and back-end aspects.

Pelican Setup and Configuration

  • Environment Setup:
    • Installed Python 3.11 and created a virtual environment using venv.
    • Installed Pelican using pip install pelican.
  • Project Initialization:
    • Ran pelican-quickstart to scaffold the project, specifying settings like site title, author, and paths.
    • Configured path settings for content and output directories.
  • Configuration Settings:
    • Configured pelicanconf.py with site-specific settings, including timezone, default language, and plugins.
    • Plugins and Extensions:
      • Enabled plugins such as sitemap, neighbors, and tipue_search for enhanced functionality.
      • Configured Markdown extensions for any required syntax support (primarily for blog posts).

Developing a Custom Pelican Theme

Creating a custom theme was central to the project's success, requiring careful planning and execution.

Theme Selection and Customization

  • Base Theme Selection:
    • Chose the Bootswatch United theme as the foundation for the custom Pelican theme. Bootswatch provides free themes for Bootstrap, offering a quick start with aesthetically pleasing designs.
  • Rationale:
    • The United theme's clean and professional look aligned well with Upasana Yogapeeth's branding. It provided a solid starting point, reducing development time while allowing for extensive customization.

Theme Naming and Structure

  • Theme Naming:
    • Named the custom theme united to reflect its base on the Bootswatch United theme.
  • Theme Structure:
    • Placed the custom theme in the themes/united directory.
    • Organized assets such as CSS, images, and JS within the theme's static directory.

Understanding Theme Requirements

  • Analyzed Design Mockups: Broke down designs into components and layouts to identify necessary templates.
  • Identified Reusable Components: Components like headers, footers, and navigation menus were abstracted for reuse.

Template Development

  • Base Template (base.html):
    • Started with the Bootswatch United base template and adapted it to Pelican's templating system.
    • Included Pelican-specific variables and blocks using Jinja2 templating.
    • Incorporated meta tags for SEO and viewport settings for responsiveness.
  • Inheritance and Blocks:
    • Ensured child templates could override or extend base template sections.
    • Used Jinja2 blocks to define sections like head, content, and scripts.
  • Specific Templates:
    • Index Page (index.html): Customized to feature a hero section, featured courses, testimonials, and latest blog posts.
    • Article Template (article.html): Designed for individual blog posts, including author info, publication date, and social sharing buttons.
    • Static Page Templates (page.html): Adapted to accommodate HTML content files, ensuring that any inline styling or custom elements were rendered correctly.

Styling with CSS/SCSS

  • Bootstrap and Bootswatch Integration:
    • Leveraged Bootstrap 5 as the core CSS framework for responsive design.
    • Integrated the Bootswatch United theme CSS to style Bootstrap components according to the United theme's aesthetic.
  • Customization of Bootswatch Theme:
    • Modified the Bootswatch United theme's variables to match Upasana Yogapeeth's branding, such as primary colors, fonts, and button styles.
    • Overrode default styles where necessary to achieve the desired look and feel.
  • Custom Styles:
    • Added custom CSS to handle unique components and layouts not covered by Bootstrap or Bootswatch.
    • Organized custom styles into separate CSS files for each page, such as about-us.css, courses.css, etc.
  • Responsive Design:
    • Utilized Bootstrap's grid system and responsive utilities to ensure the site looked great on all devices.
    • Tested on devices with varying resolutions to ensure visual integrity.
  • Optimization:
    • Minified CSS files for production to reduce load times.
    • Used critical CSS for above-the-fold content to improve perceived performance.
  • Dynamic Menu Generation:
    • Implemented logic in templates to generate menus based on the site's page hierarchy.
    • Highlighted active pages for better user orientation.
  • Accessibility Considerations:
    • Ensured all interactive elements were accessible via keyboard navigation.
    • Used ARIA attributes for assistive technologies.

Custom Features

  • Sliders and Carousels:
    • Integrated Swiper.js for responsive sliders showcasing testimonials and image galleries.
  • Interactive Elements:
    • Added hover effects and animations using CSS transitions and keyframes.
    • Implemented modal pop-ups for forms and image enlargements.
  • Forms:
    • Styled forms consistently across the site, ensuring clear labels and inputs.

Testing and Iteration

  • Local Development Server:
    • Used Pelican's pelican --listen to run a local server for real-time preview.
  • Cross-Browser Testing:
    • Tested on Chrome, Firefox, Safari, and Edge to catch browser-specific issues.
  • Linting and Code Quality:
    • Employed tools like ESLint and Stylelint to maintain code quality.

Static Pages Development

  • Content Integration:
    • Created HTML files in the content/pages/ directory for each static page, such as about-us.html, courses.html, etc.
    • Using HTML for content allowed for fine-grained control over the layout and styling of each page.
    • Included necessary metadata in the front matter of the HTML files for Pelican to process.
  • Enhanced Customization:
    • Leveraged the flexibility of HTML to include custom classes, IDs, and inline styles where necessary.
    • Incorporated Bootstrap and Bootswatch classes directly into the content to utilize pre-built responsive components.
  • Multimedia Elements:
    • Embedded images and videos directly in the HTML content.
    • Used optimized images from the static/images/ directory.
  • SEO Optimization:
    • Included meta descriptions, keywords, and structured data within the HTML files.
  • Page-Specific Scripts and Styles:
    • Linked page-specific CSS and JavaScript files to enhance interactivity and styling.

Blog Section Implementation

  • Configuration:
    • Set up blog-specific settings in pelicanconf.py, such as ARTICLE_URL and ARTICLE_SAVE_AS.
  • Content Organization:
    • Organized blog posts in the content/blog/ directory, using Markdown files for ease of writing and formatting.
    • Utilized categories and tags for better content organization.
  • Custom Blog Templates:
    • Created a blog index page (blog.html) listing posts with excerpts and featured images.
    • Individual post templates included related posts and author bios.
  • Search Functionality:
    • Integrated Tipue Search, a client-side search engine, for instant search results.
  • Pagination and Navigation:
    • Implemented pagination for blog listings using Pelican's built-in features.
    • Added next and previous post links in articles for improved navigation.

Form Submission Handling

  • Form Design:
    • Developed forms with clear labels, placeholders, and validation messages.
    • Used HTML5 validation attributes and JavaScript for client-side validation.
  • Cloudflare Pages Functions:
    • Developed a serverless function submit-application-form.js to process application form submissions.
    • Validated form data, integrated with Supabase to store submissions, and sent confirmation emails to users.
  • Security Measures:
    • Implemented server-side validation in the Cloudflare function to ensure data integrity.
    • Used reCAPTCHA v3 to prevent spam and abuse, integrating the site and secret keys as environment variables.

Supabase Integration

  • Database Setup:
    • Created tables in Supabase for storing contact inquiries and application data.
    • Defined table schemas with appropriate data types and constraints.
  • API Configuration:
    • Used the @supabase/supabase-js library to interact with the Supabase API within the Cloudflare function.
    • Stored API keys securely as environment variables in Cloudflare Pages.
  • Email Notifications:
    • Configured Supabase to trigger email notifications upon new form submissions.
  • Data Privacy Compliance:
    • Ensured that sensitive data was handled securely and in compliance with relevant data protection regulations.

Content Management Workflow

  • HTML Workflow:
    • Established guidelines for writing content directly in HTML, including best practices for structure and styling.
    • Created starter templates for new pages to maintain consistency.
  • Markdown Workflow for Blog:
    • Used Markdown for blog posts to simplify content creation and editing.
    • Created templates for new blog posts to maintain consistency.
  • Automation Scripts:
    • Developed a shell script create_content.sh to automate the creation of new content files with the necessary front matter and boilerplate code.
    • Streamlined the process of adding new pages or blog posts, reducing manual effort and errors.
  • Documentation:
    • Prepared a Content Management Guide for the business team.
    • Included instructions on setting up the development environment and using Git for content updates.
  • Version Control:
    • Set up a Git repository on GitHub with branch protection rules.
    • Used pull requests for content updates, allowing for review before merging.

Outcome: Successfully developed a fully functional website with a custom theme based on Bootswatch United and HTML content files, meeting all the specified requirements and setting the stage for testing and deployment.

Phase 4: Testing

Testing ensured the website was robust, user-friendly, and free of critical issues before going live.

Functional Testing

  • Feature Verification:
    • Tested all links, buttons, forms, and interactive elements.
    • Ensured that blog posts displayed correctly with all metadata.
  • Form Submission Testing:
    • Submitted test data through forms to verify Supabase integration and Cloudflare Functions.
    • Checked email notifications and database entries for accuracy.
  • Serverless Function Testing:
    • Tested Cloudflare Pages Functions locally using wrangler CLI to ensure they behaved as expected before deploying.

Usability Testing

  • User Testing Sessions:
    • Invited a group of users representing the target audience to navigate the site.
    • Collected feedback on ease of navigation, content clarity, and overall satisfaction.

Compatibility Testing

  • Cross-Device Testing:
    • Tested on various devices including iPhones, Android phones, iPads, and desktops.
    • Used BrowserStack for testing on different browsers and operating systems.
  • Browser Compatibility:
    • Verified that the site rendered correctly on major browsers.
    • Addressed any CSS or JavaScript inconsistencies.

Performance Testing

  • Page Load Times:
    • Used Google PageSpeed Insights analyze performance.
    • Achieved high scores by optimizing images, minifying assets, and leveraging browser caching.
  • Resource Optimization:
    • Implemented lazy loading for images and asynchronous loading for scripts.
    • Reduced the number of HTTP requests by combining files where possible.

Phase 5: Deployment

Deployment made the website accessible to the world, with configurations ensuring performance and security.

Cloudflare Pages Configuration

  • Project Setup:
    • Connected the GitHub repository to Cloudflare Pages for continuous integration and deployment (CI/CD).
    • Configured build settings, specifying the build command (make html) and output directory (output/).
  • Custom Build Commands:
    • Used the Makefile to automate the build process, including cleaning, generating, and publishing.

Custom Domain and SSL

  • DNS Settings:
    • Updated DNS records to point the domain upasanayogapeeth.com to Cloudflare's nameservers.
    • Verified domain ownership through Cloudflare.
  • SSL/TLS Configuration:
    • Enabled Full SSL mode to encrypt data between visitors and Cloudflare, and between Cloudflare and the origin server.
  • Automatic HTTPS Rewrites:
    • Ensured all HTTP requests are redirected to HTTPS for secure connections.

Environment Variables

  • Secure Storage:
    • Used Cloudflare's environment variable feature to store sensitive information like Supabase API keys, reCAPTCHA keys, and other secrets.
  • Access Control:
    • Restricted access to environment variables to authorized personnel only.

Final Review

  • Post-Deployment Testing:
    • Performed a thorough test of the live site to ensure all functionalities remained intact after deployment.
    • Checked for any discrepancies between the staging environment and the live site.

Outcome: Successfully deployed the website with optimal configurations, ensuring high availability and performance.

Phase 6: Post-Deployment Support

Ongoing support is essential to maintain and improve the website over time.

Monitoring

  • Performance Monitoring:
    • Set up Cloudflare Analytics to monitor traffic, bandwidth usage, and threats blocked.
    • Used Supabase Monitoring to track database performance and query times.
  • Error Tracking:
    • Implemented Sentry for real-time error tracking and alerting.

Issue Resolution

  • Support Channels:
    • Established communication channels for stakeholders to report issues.
    • Created a ticketing system to prioritize and track issue resolution.
  • Regular Maintenance:
    • Scheduled regular checks for broken links, outdated content, and dependency updates.

Updates and Maintenance

  • Dependency Management:
    • Used tools like Dependabot to automate dependency updates.
    • Tested updates in a staging environment before applying to production.
  • Content Updates:
    • Assisted the business team in adding new blog posts and updating course information.

Future Planning

  • Feedback Collection:
    • Implemented feedback forms and surveys to gather user opinions and suggestions.
  • Feature Roadmap:
    • Compiled a list of potential enhancements, prioritizing based on impact and feasibility.

Outcome: Established a robust support system to ensure the website remains up-to-date, secure, and continues to meet user needs.

Challenges and Solutions

Every project encounters challenges; addressing them effectively is crucial for success.

Developing a Custom Pelican Theme Based on Bootswatch United

  • Challenge: Adapting the Bootswatch United theme to work seamlessly with Pelican's templating system required careful integration and customization.
  • Solution:
    • Understanding Theme Structures: Studied both Bootswatch's and Pelican's theme structures to identify compatibility layers.
    • Template Adaptation: Modified Bootswatch's HTML templates to include Pelican's Jinja2 templating syntax.
    • CSS Customization: Overrode specific styles in the Bootswatch United theme to align with Upasana Yogapeeth's branding without breaking the theme's overall aesthetic.
    • Community Resources: Leveraged online forums and discussions where others had integrated Bootswatch themes with Pelican, learning from their experiences.

Custom Content Management with HTML Files

  • Challenge: Using HTML files for content instead of Markdown required more meticulous management and increased the potential for code duplication or inconsistencies.
  • Solution:
    • Structured HTML Templates: Created consistent structures for HTML content files, including common headers and footers, to maintain uniformity.
    • Use of Includes and Macros: Leveraged Jinja2 includes and macros to avoid repetition and to keep content files manageable.
    • Documentation: Provided detailed guidelines for creating and editing HTML content files, ensuring that future content editors could easily maintain the site.

Content Delivery Delays

  • Challenge: Delays in receiving final content from the business team threatened project timelines.
  • Solution:
    • Placeholder Content: Used Lorem Ipsum text and stock images to continue development.
    • Parallel Workflows: Focused on technical aspects and functionality that didn't depend on final content.
    • Content Workshops: Assisted the business team in content creation, offering templates and guidelines.

Cloudflare Pages Functions Learning Curve

  • Challenge: As Cloudflare Pages Functions was relatively new, documentation and examples were limited.
  • Solution:
    • Experimentation: Conducted tests with simple functions to understand the deployment process.
    • Knowledge Sharing: Documented findings and shared code snippets for future reference.
    • Alternative Resources: Consulted Cloudflare's support and developer community for insights.

Supabase Integration Issues

  • Challenge: Encountered authentication and connectivity problems during initial Supabase integration.
  • Solution:
    • Detailed Logging: Implemented extensive logging to pinpoint the exact failure points.
    • Configuration Review: Double-checked API keys, database schemas, and network settings.
    • Support Engagement: Reached out to Supabase's support team for assistance, leading to a quick resolution.

Managing Multiple Static Assets

  • Challenge: With numerous CSS and JavaScript files for different pages, managing static assets efficiently became complex.
  • Solution:
    • Asset Organization: Structured static assets into organized directories within content/static/ and the theme's static/ directories.
    • Minification and Bundling: Used tools like uglify-js and cssnano to minify JavaScript and CSS files, reducing load times.
    • Cache Busting: Implemented cache busting strategies by appending version numbers or hashes to asset filenames.

Conclusion

The development of the Upasana Yogapeeth website was a multifaceted project that required careful planning, technical expertise, and effective communication. By leveraging Pelican for static site generation and Cloudflare Pages for deployment, we achieved a fast, secure, and scalable website.

Creating a custom Pelican theme based on the Bootswatch United theme and utilizing HTML files for content allowed us to tailor the website's appearance and functionality to the business's unique needs, enhancing brand identity and user experience. Integrating Cloudflare Pages Functions and Supabase enabled us to handle dynamic functionalities like form submissions without compromising the advantages of a static site.

The project's success was a result of:

  • Clear Objectives: Well-defined goals guided the development process.
  • Effective Collaboration: Regular communication with stakeholders ensured alignment.
  • Adaptive Strategies: Flexibility in addressing challenges kept the project on track.
  • Commitment to Quality: Rigorous testing and attention to detail led to a polished final product.

Future Recommendations

To continue enhancing the website and its value to users, the following recommendations are proposed:

Regular Content Updates:

  • Blog Activity: Maintain a consistent publishing schedule to keep the audience engaged and improve SEO.
  • Course Updates: Regularly update course information, schedules, and availability.

Advanced SEO Strategies:

  • Keyword Optimization: Research and incorporate relevant keywords into content and meta tags.
  • Meta Descriptions: Craft compelling meta descriptions for all pages and posts.
  • Backlink Building: Encourage backlinks from reputable sites to improve domain authority.

Feature Enhancements:

  • Social Media Integration: Embed social media feeds and share buttons to increase engagement.
  • Multilingual Support: Consider adding language options to reach a broader audience.
  • User Authentication: Implement login functionalities for personalized experiences, such as course enrollment tracking.

Analytics Implementation:

  • Google Analytics: Integrate to gain insights into user behavior, traffic sources, and conversion rates.
  • Heatmaps: Use tools like Hotjar to understand how users interact with the site.

Automated Testing:

  • Continuous Integration: Implement automated tests for critical functionalities to catch issues early.
  • End-to-End Testing: Use tools like Cypress or Selenium for comprehensive testing.

Theme Refinements:

  • User Feedback: Collect and analyze user feedback to identify areas for improvement.
  • Design Trends: Stay updated with web design trends to keep the site modern and appealing.
  • Accessibility Enhancements: Continually improve accessibility features to serve all users better.

Feel free to reach out for collaborations or if you have any questions about the project!

Thank you for reading! If you found this post insightful, consider sharing it with others who might benefit from it.

Gallery

Home page
Home Page
 About Us page
About Us Page
 Courses page
Courses Page
 Contact Us page
Contact Us Page
 Blog Listing page
Blog Listing Page
 Blog Post page
Blog Post Page
 Application form page
Application Form Page

Appendices

Appendix A: Key Code Snippets

Pelican Configuration (pelicanconf.py)

import  os
from  pelican.readers  import  HTMLReader, MarkdownReader

DEBUG  =  True

# Theme settings
THEME_TEMPLATES_OVERRIDES  = ['templates']

DELETE_OUTPUT_DIRECTORY  =  True

# Site information
SITENAME  =  'Upasana Yogapeeth'
SITESUBTITLE  =  'For those seeking knowledge'
SITEURL  =  os.getenv('SITEURL', '')
SITELOGO  =  'favicon.ico'
INDEX_SAVE_AS  =  'index.html'

# Author settings
AUTHOR  =  'Upasana Yogapeeth'
AUTHOR_BIO  =  'Upasana Yogapeeth is a yoga school in Mysore, India. We offer yoga teacher training courses, yoga retreats, and workshops.'
AUTHOR_URL  =  '{slug}.html'
AUTHOR_SAVE_AS  =  '{slug}.html'
AUTHORS_URL  =  '{slug}.html'
AUTHORS_SAVE_AS  =  '{slug}.html'

# Content paths
PATH  =  'content'
ARTICLE_PATHS  = ['blog']
PAGE_PATHS  = ['pages']

# URL settings
PAGE_URL  =  '{slug}.html'
PAGE_SAVE_AS  =  '{slug}.html'
ARTICLE_URL  =  'blog/{slug}.html'
ARTICLE_SAVE_AS  =  'blog/{slug}.html'

# URL settings for categories
CATEGORY_URL  =  'category/{slug}/'
CATEGORY_SAVE_AS  =  'category/{slug}/index.html'

# Templates
DIRECT_TEMPLATES  = ['blog', 'categories',]

# Timezone and language
TIMEZONE  =  'Asia/Kolkata'
DEFAULT_LANG  =  'en' 

# Pagination
DEFAULT_PAGINATION  =  10

# Static paths and extra files
STATIC_PATHS  = ['images', 'static', 'extra']

EXTRA_PATH_METADATA  = {
    'extra/favicon.ico': {'path': 'favicon.ico'},
}

# Sitemap settings
SITEMAP  = {
    "format": "xml",
    "priorities": {
        "pages": 1.0,
        "articles": 0.5,
        "indexes": 1.0,
    },
    "changefreqs": {
        "pages": "monthly",
        "articles": "monthly",
        "indexes": "daily",
    }
}

READERS  = {
    'html': HTMLReader,
    'md': MarkdownReader
}

Sample Jinja2 Template (base.html)

<!DOCTYPE html>
<html lang="{{ LANG }}">
<head>
    <meta charset="UTF-8">
    <title>{% if title %}{{ title }} - {% endif %}{{ SITENAME }}</title>
    {% if description %}
    <meta name="description" content="{{ description }}">
    {% endif %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Stylesheets -->
    <link rel="stylesheet" href="{{ SITEURL }}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ SITEURL }}/static/css/style.css">
    {% block head %}{% endblock %}
</head>
<body>
    {% include 'partials/navbar.html' %}
    <main role="main">
        {% block content %}{% endblock %}
    </main>
    {% include 'partials/footer.html' %}
    <!-- Scripts -->
    <script src="{{ SITEURL }}/static/js/bootstrap.bundle.min.js"></script>
    {% block scripts %}{% endblock %}
</body>
</html>

Appendix B: Environment Variables Configuration

Cloudflare Pages Environment Variables

  • SUPABASE_URL: The URL of the Supabase project.
  • SUPABASE_KEY: The public API key for accessing Supabase.
  • RECAPTCHA_SECRET_KEY: Secret key for reCAPTCHA validation.
  • RECAPTCHA_SITE_KEY: Site key used in forms.

Acknowledgments

  • Upasana Yogapeeth Team: For their collaboration and insights throughout the project.
  • Pelican Community: For providing an excellent static site generator and support resources.
  • Bootswatch: For offering the United theme, which served as a solid foundation for our custom theme.
  • Cloudflare: For offering robust tools that facilitated smooth deployment and enhanced functionality.
  • Supabase: For providing an accessible backend solution for data management.

(The information provided in this blog post is for educational purposes and reflects the author's personal experience with the project.)

Project Structure

Below is the project structure showcasing how the files and directories are organized:

UpasanaYogaPeeth
└─ src
├─ Makefile
├─ package-lock.json
├─ package.json
├─ pelicanconf.py
├─ publishconf.py
├─ requirements.txt
├─ content
│  ├─ blog
│  │  └─ unlocking-the-mind-iit-delhi-study.md
│  ├─ extra
│  │  └─ favicon.ico
│  ├─ images
│  │  ├─ various image files...
│  ├─ pages
│  │  ├─ about-us.html
│  │  ├─ application-form.html
│  │  ├─ contact-us.html
│  │  ├─ courses.html
│  │  └─ home.html
│  ├─ robots.txt
│  └─ static
│     ├─ css
│     │  ├─ about-us.css
│     │  ├─ blog.css
│     │  ├─ bootstrap.min.css
│     │  ├─ contact-us.css
│     │  ├─ courses.css
│     │  ├─ footer.css
│     │  ├─ forms.css
│     │  ├─ index.css
│     │  └─ navbar.css
│     ├─ images
│     │  ├─ various image files...
│     └─ js
│        ├─ bootstrap.bundle.min.js
│        └─ bootstrap.min.js
├─ functions
│  └─ submit-application-form.js
├─ templates
│  ├─ article.html
│  ├─ base.html
│  ├─ blog.html
│  ├─ categories.html
│  ├─ page.html
│  ├─ partials
│  │  ├─ footer.html
│  │  ├─ navbar.html
│  │  └─ post_card.html
│  └─ success.html
└─ create_content.sh

The project structure highlights the organization of content, templates, static assets, and custom functions, providing a clear overview of the project's components.