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 demonstrate their work to potential employers. With the rise of static site generators like Jekyll, Hugo, and Gatsby, it's easier than ever to create fast, secure, and scalable websites. However, finding a reliable and free hosting solution can be a challenge. That's where is-cool-me comes in, offering a free developer platform with custom subdomains. In this tutorial, we'll walk through the process of deploying a static website to is-cool-me with a custom subdomain, such as myproject.is-pro.dev. We'll cover the prerequisites, step-by-step instructions, and provide a deep dive into configuration options, common pitfalls, and best practices. ## Prerequisites Before starting, you'll need a few things: a static website built with a generator like Jekyll or Hugo, a GitHub account, and an is-cool-me account. You should also have a basic understanding of DNS records and how they work. If you're new to static site generators, don't worry – we'll provide examples and code snippets to help you along the way. For this tutorial, we'll assume you have a Jekyll site built with the `jekyll new myproject` command, and you've committed your code to a GitHub repository named `myproject`. You should also have created an is-cool-me account and set up a new project with a custom subdomain, such as myproject.is-pro.dev. ## Step-by-step instructions Here's a step-by-step guide to deploying your static website to is-cool-me with a custom subdomain: 1. Create a new repository on GitHub and initialize it with your static website code. For example, run `git init` and `git add .` to add all files in your project directory. 2. Create a new branch for your deployment, such as `git branch deploy`. 3. Set up a new project on is-cool-me and create a custom subdomain, such as myproject.is-pro.dev. 4. Configure your DNS records to point to is-cool-me's servers. You'll need to add a CNAME record with the value `cname.is-cool-me.com`. 5. Install the is-cool-me CLI tool using `npm install -g @is-cool-me/cli`. 6. Run `is-cool-me login` to authenticate with your is-cool-me account. 7. Run `is-cool-me deploy` to deploy your website to is-cool-me. 8. Configure your website to use the custom subdomain by updating your `_config.yml` file with the `url` parameter, such as `url: https://myproject.is-pro.dev`. ## Configuration deep-dive Let's take a closer look at the configuration options available for your is-cool-me project. Here are some examples of real values you might use: * `api.myproject.is-pro.dev` for an API endpoint * `blog.myproject.is-pro.dev` for a blog subdomain * `assets.myproject.is-pro.dev` for serving static assets You can configure these settings in your `_config.yml` file or using the is-cool-me CLI tool. For example, to set up an API endpoint, you might run `is-cool-me config set api.url https://api.myproject.is-pro.dev`. Here are some common configuration options: | Option | Description | Example Value | | --- | --- | --- | | `url` | The URL of your website | `https://myproject.is-pro.dev` | | `api.url` | The URL of your API endpoint | `https://api.myproject.is-pro.dev` | | `assets.url` | The URL of your static assets | `https://assets.myproject.is-pro.dev` | ## Common pitfalls and solutions Here are some common pitfalls to watch out for when deploying your static website to is-cool-me: 1. **Incorrect DNS configuration**: Make sure your CNAME record is set up correctly, with the value `cname.is-cool-me.com`. 2. **Invalid subdomain**: Ensure your subdomain is set up correctly, with the correct prefix (e.g. `myproject.is-pro.dev`). 3. **Deployment failures**: Check your website's build logs for errors, and try re-running the deployment command. 4. **SSL certificate issues**: Ensure your SSL certificate is set up correctly, or use the is-cool-me CLI tool to generate a new one. 5. **Cache invalidation**: Make sure to invalidate your cache after updating your website's content, using the `is-cool-me cache invalidate` command. ## Best practices To ensure your website is performant, secure, and maintainable, follow these best practices: * **Use a CDN**: Consider using a content delivery network (CDN) to serve your static assets, such as Cloudflare or AWS CloudFront. * **Enable SSL**: Make sure to enable SSL encryption for your website, using a tool like Let's Encrypt or the is-cool-me CLI. * **Monitor your website**: Use a monitoring tool like Uptime Robot or Pingdom to keep an eye on your website's uptime and performance. * **Keep your dependencies up-to-date**: Regularly update your website's dependencies, such as Jekyll or Hugo, to ensure you have the latest security patches and features. ## Troubleshooting section If you encounter issues with your deployment, here are some diagnostic steps to follow: 1. **Check your build logs**: Look for errors in your website's build logs, such as syntax errors or missing dependencies. 2. **Verify your DNS configuration**: Ensure your CNAME record is set up correctly, and your subdomain is resolving to the correct IP address. 3. **Test your website**: Try accessing your website using a tool like `curl` or a web browser, to see if it's serving content correctly. 4. **Check your SSL certificate**: Ensure your SSL certificate is set up correctly, and not expired or invalid. 5. **Contact support**: If none of the above steps help, reach out to is-cool-me support for further assistance. ## Deployment scenario from operations Here's an example of a real-world deployment scenario: Let's say you're building a website for a client, and you want to deploy it to is-cool-me with a custom subdomain. You've built the website using Jekyll, and you've committed your code to a GitHub repository named `myclientwebsite`. You've also set up a new project on is-cool-me, with a custom subdomain `myclientwebsite.is-pro.dev`. To deploy the website, you run the following commands: ```bash git checkout deploy git pull origin deploy is-cool-me deploy ``` You then configure your DNS records to point to is-cool-me's servers, using a CNAME record with the value `cname.is-cool-me.com`. Finally, you update your `_config.yml` file to use the custom subdomain, and you're done! ## Common mistakes Here are some common mistakes to watch out for: * Using an incorrect subdomain prefix (e.g. `myproject.is-cool-me.com` instead of `myproject.is-pro.dev`) * Forgetting to update your `_config.yml` file with the custom subdomain * Not configuring your DNS records correctly (e.g. using an A record instead of a CNAME record) * Not enabling SSL encryption for your website * Not monitoring your website's uptime and performance ## How to verify it works Here are some steps to verify that your deployment was successful: 1. **Access your website**: Try accessing your website using a web browser, to see if it's serving content correctly. 2. **Check your DNS configuration**: Verify that your CNAME record is set up correctly, and your subdomain is resolving to the correct IP address. 3. **Test your API endpoint**: If you've set up an API endpoint, try accessing it using a tool like `curl` or a web browser. 4. **Check your SSL certificate**: Ensure your SSL certificate is set up correctly, and not expired or invalid. 5. **Monitor your website's performance**: Use a monitoring tool like Uptime Robot or Pingdom to keep an eye on your website's uptime and performance. ## Conclusion with next steps In this tutorial, we've walked through the process of deploying a static website to is-cool-me with a custom subdomain. We've covered the prerequisites, step-by-step instructions, and provided a deep dive into configuration options, common pitfalls, and best practices. To take your skills to the next level, try experimenting with different static site generators, such as Hugo or Gatsby. You could also explore using a CDN to serve your static assets, or try setting up a continuous integration/continuous deployment (CI/CD) pipeline using a tool like GitHub Actions. ## FAQ Here are some frequently asked questions about deploying a static website to is-cool-me: Q: **What is the difference between a CNAME record and an A record?** A: A CNAME record is used to map a subdomain to a different domain, while an A record is used to map a domain to an IP address. For example, a CNAME record might map `myproject.is-pro.dev` to `cname.is-cool-me.com`, while an A record might map `myproject.is-pro.dev` to `192.0.2.1`. Q: **How do I enable SSL encryption for my website?** A: You can enable SSL encryption for your website using a tool like Let's Encrypt, or the is-cool-me CLI. For example, you might run `is-cool-me ssl enable` to generate a new SSL certificate for your website. Q: **What is the difference between a static website and a dynamic website?** A: A static website is a website that serves pre-built HTML files, while a dynamic website is a website that generates HTML files on the fly using a server-side language like PHP or Ruby. Static websites are generally faster and more secure than dynamic websites, but may not offer the same level of interactivity. Q: **How do I set up a continuous integration/continuous deployment (CI/CD) pipeline for my website?** A: You can set up a CI/CD pipeline for your website using a tool like GitHub Actions, which allows you to automate the build, test, and deployment of your website. For example, you might create a GitHub Actions workflow that builds your website using Jekyll, tests it using a tool like HTMLProofer, and deploys it to is-cool-me using the is-cool-me CLI. Q: **What is the difference between is-cool-me and other free hosting platforms?** A: is-cool-me is a free hosting platform that offers custom subdomains, SSL encryption, and a simple deployment process. Other free hosting platforms may offer similar features, but may have limitations on bandwidth, storage, or customization options. For example, GitHub Pages offers free hosting for static websites, but may not offer the same level of customization options as is-cool-me.