​
How to Host Your Website Template

In this guide, we’ll walk you through the process of hosting and setting up your purchased website template using various hosting providers. We’ll cover the differences between these providers and provide step-by-step instructions for uploading your website.

​
Hosting Providers Overview

​
Hostinger

  • Features: Affordable pricing, 24/7 support, free domain with annual plans, easy-to-use control panel (hPanel).
  • Best for: Beginners and budget-conscious users.

​
Cloudflare Pages

  • Features: Global CDN, built-in security features, free SSL certificates, automatic CI/CD.
  • Best for: Users who need high performance and security.

​
GitHub Pages

  • Features: Free hosting for static sites, integrates with GitHub repositories, automatic HTTPS.
  • Best for: Users comfortable with Git and GitHub.

​
Other Providers

  • Vercel: Optimized for front-end frameworks, serverless functions, automatic scaling, easy CI/CD. Best for developers using frameworks like Next.js, React, and other modern web technologies.
  • Netlify: Similar to Vercel with robust CI/CD, serverless functions, and a strong focus on frontend frameworks.

​
How to Upload Your Website

For the purpose of this guide, we’ll use Hostinger as an example hosting provider. The process may vary slightly depending on the provider you choose. If you wish to use a different hosting provider, you can find the instructions on their website 😇.
  1. Sign Up: Create an account on Hostinger.
  2. Choose a Plan: Select a hosting plan that suits your needs.
  3. Set Up Your Domain: If you have a domain, connect it to Hostinger. If not, you can purchase one through Hostinger.
  4. Access hPanel: Log in to hPanel.
  5. Upload Files:
    • Go to the “File Manager” in hPanel.
    • Navigate to the public_html directory.
    • Upload your website files (HTML, CSS, JS, etc.) here.
  6. Check Your Website: Visit your domain to ensure everything is working.

​
Modifying Your Website

Once you’ve successfully hosted your website template, you may want to customize it to better suit your brand or preferences. Here are some main points to consider:

​
Editing Colors

You can easily change the colors of your website by modifying the variables in the CSS file. Look for the section labeled “Customize variables here” in your CSS file: 
/* ⬇️ Customize variables here ⬇️ */
Simply replace the hexadecimal color codes with the ones of your choice to update the colors across your website.

​
Uploading Branding Assets

You can upload your branding assets, such as logos and images, to the assets folder of your website template. Replace the existing files with your own to personalize your site further.

​
Image Compression Tools

To optimize your images for web use and improve loading times, consider using image compression tools such as:
  • TinyPNG: is a useful tool for compressing PNG images while maintaining their quality.
  • WebP Converter: Convert your PNG images to WebP format, which offers better compression and smaller file sizes. You can use online converters like Online Convert to convert your images to WebP format.
These tools can help reduce the file sizes of your images without sacrificing visual quality, ensuring a faster and smoother browsing experience for your website visitors. 🎉 Congratulations! You’ve successfully learned how to host, set up, and customize your website template.