Deploying a Static Website to Free Hosting with a Custom Subdomain: A Tutorial

## Introduction Deploying a static website to free hosting with a custom subdomain is an essential skill for developers looking to showcase their projects or create a professional online presence without incurring significant costs. The rise of static site generators like Jekyll, Hugo, and Gatsby has made it easier than ever to create fast, secure, and scalable websites. However, deploying these sites to a custom subdomain on a free hosting platform can be a daunting task, especially for those new to web development. In this tutorial, we will walk through the process of deploying a static website to a free hosting platform with a custom subdomain, using the is-cool-me platform as an example. We will cover the prerequisites, step-by-step instructions, configuration options, common pitfalls, and best practices to ensure a successful deployment. ## Prerequisites Before starting, you will need a few things: a static website built with a static site generator, an account on the is-cool-me platform, and a custom subdomain (e.g., myproject.is-pro.dev). You should also have a basic understanding of DNS configuration, Git, and the command line. If you don't have a static website, you can create one using a tool like Jekyll or Hugo. If you don't have an account on the is-cool-me platform, you can sign up for free. Make sure you have the necessary dependencies installed on your machine, such as Node.js and Git. Additionally, you should have a code editor or IDE of your choice, such as Visual Studio Code or IntelliJ. ## Step-by-step instructions Here are the step-by-step instructions to deploy your static website to a free hosting platform with a custom subdomain: 1. Create a new repository on the is-cool-me platform for your static website. You can do this by logging into your account and clicking on the "Create a new repository" button. 2. Initialize a new Git repository in your project directory using the command `git init`. 3. Add your static website files to the Git repository using the command `git add .`. 4. Commit your changes using the command `git commit -m "Initial commit"`. 5. Link your repository to the is-cool-me platform using the command `git remote add origin https://git.is-pro.dev/myproject/myproject.git`. 6. Push your changes to the is-cool-me platform using the command `git push -u origin master`. 7. Configure your DNS settings to point to the is-cool-me platform. You can do this by adding a CNAME record to your DNS settings with the value `cname.is-pro.dev`. 8. Verify your custom subdomain using the is-cool-me platform's verification tool. 9. Deploy your static website to the custom subdomain using the command `is-pro deploy myproject.is-pro.dev`. 10. Test your website to ensure it is working correctly. ## Configuration deep-dive The is-cool-me platform provides a range of configuration options to customize your deployment. Here are a few examples: * `api.myproject.is-pro.dev`: This is the API endpoint for your custom subdomain. You can use this to access your website's API. * `cname.is-pro.dev`: This is the CNAME record value for your custom subdomain. You can use this to configure your DNS settings. * `myproject.is-pro.dev`: This is your custom subdomain. You can use this to access your website. The is-cool-me platform also provides a range of environment variables that you can use to customize your deployment. Here are a few examples: | Environment Variable | Description | | --- | --- | | `IS_PRO_DOMAIN` | The custom subdomain for your website | | `IS_PRO_API` | The API endpoint for your custom subdomain | | `IS_PRO_CNAME` | The CNAME record value for your custom subdomain | ## Common pitfalls and solutions Here are a few common pitfalls and solutions to watch out for: 1. **Incorrect DNS settings**: Make sure you have added a CNAME record to your DNS settings with the value `cname.is-pro.dev`. Solution: Check your DNS settings and add the CNAME record if it is missing. 2. **Invalid Git repository**: Make sure your Git repository is properly initialized and linked to the is-cool-me platform. Solution: Check your Git repository and re-link it to the is-cool-me platform if necessary. 3. **Custom subdomain not verified**: Make sure you have verified your custom subdomain using the is-cool-me platform's verification tool. Solution: Verify your custom subdomain using the verification tool. 4. **Incorrect environment variables**: Make sure you have set the correct environment variables for your deployment. Solution: Check your environment variables and update them if necessary. 5. **Deployment failed**: Make sure you have deployed your static website to the custom subdomain correctly. Solution: Check your deployment logs and re-deploy your website if necessary. ## Best practices Here are a few best practices to keep in mind: * **Use a version control system**: Use a version control system like Git to manage your code and track changes. * **Test your website**: Test your website thoroughly to ensure it is working correctly. * **Use a secure connection**: Use a secure connection (HTTPS) to protect your website and users. * **Optimize your website**: Optimize your website for performance and speed. * **Monitor your website**: Monitor your website for errors and issues. ## Troubleshooting section Here are a few diagnostic steps to help you troubleshoot issues with your deployment: 1. **Check your deployment logs**: Check your deployment logs to see if there were any errors during the deployment process. 2. **Check your DNS settings**: Check your DNS settings to ensure they are correct and up-to-date. 3. **Check your environment variables**: Check your environment variables to ensure they are set correctly. 4. **Test your website**: Test your website to ensure it is working correctly. 5. **Check your Git repository**: Check your Git repository to ensure it is properly initialized and linked to the is-cool-me platform. ## Deployment scenario from operations Here is a complete real-world example of deploying a static website to a custom subdomain on the is-cool-me platform: Let's say we have a static website built with Jekyll and we want to deploy it to the custom subdomain `myproject.is-pro.dev`. We would follow these steps: * Create a new repository on the is-cool-me platform for our static website. * Initialize a new Git repository in our project directory using the command `git init`. * Add our static website files to the Git repository using the command `git add .`. * Commit our changes using the command `git commit -m "Initial commit"`. * Link our repository to the is-cool-me platform using the command `git remote add origin https://git.is-pro.dev/myproject/myproject.git`. * Push our changes to the is-cool-me platform using the command `git push -u origin master`. * Configure our DNS settings to point to the is-cool-me platform using the CNAME record `cname.is-pro.dev`. * Verify our custom subdomain using the is-cool-me platform's verification tool. * Deploy our static website to the custom subdomain using the command `is-pro deploy myproject.is-pro.dev`. ## Common mistakes Here are a few common mistakes to watch out for: * Not verifying your custom subdomain * Not setting the correct environment variables * Not testing your website thoroughly * Not using a secure connection (HTTPS) * Not optimizing your website for performance and speed * Not monitoring your website for errors and issues ## How to verify it works Here are a few verification checks to ensure your deployment is working correctly: 1. **Check your website**: Check your website to ensure it is working correctly and all pages are loading properly. 2. **Check your DNS settings**: Check your DNS settings to ensure they are correct and up-to-date. 3. **Check your environment variables**: Check your environment variables to ensure they are set correctly. 4. **Test your API**: Test your API to ensure it is working correctly and returning the expected results. 5. **Check your deployment logs**: Check your deployment logs to ensure there were no errors during the deployment process. ## Conclusion with next steps In conclusion, deploying a static website to a free hosting platform with a custom subdomain is a relatively straightforward process. By following the steps outlined in this tutorial, you should be able to deploy your static website to a custom subdomain on the is-cool-me platform. Next steps include monitoring your website for errors and issues, optimizing your website for performance and speed, and testing your API to ensure it is working correctly. You can also explore additional features and functionality provided by the is-cool-me platform, such as support for multiple custom subdomains and integration with other services. ## FAQ Here are a few frequently asked questions with detailed answers: Q: What is the difference between a custom subdomain and a custom domain? A: A custom subdomain is a subdomain of a larger domain, such as `myproject.is-pro.dev`. A custom domain, on the other hand, is a fully qualified domain name, such as `myproject.com`. The is-cool-me platform supports both custom subdomains and custom domains. Q: How do I configure my DNS settings to point to the is-cool-me platform? A: You can configure your DNS settings to point to the is-cool-me platform by adding a CNAME record with the value `cname.is-pro.dev`. You can do this through your DNS provider's control panel or by contacting their support team. Q: What is the purpose of the `IS_PRO_DOMAIN` environment variable? A: The `IS_PRO_DOMAIN` environment variable is used to specify the custom subdomain for your website. You can use this variable to access your website's API and configure your deployment. Q: How do I troubleshoot issues with my deployment? A: You can troubleshoot issues with your deployment by checking your deployment logs, DNS settings, and environment variables. You can also test your website and API to ensure they are working correctly. Q: Can I use a secure connection (HTTPS) with my custom subdomain? A: Yes, you can use a secure connection (HTTPS) with your custom subdomain. The is-cool-me platform supports HTTPS and provides a free SSL certificate for your custom subdomain.