<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ hosting - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ hosting - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Sat, 30 May 2026 16:31:32 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/hosting/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ VPS vs PaaS: How to Choose a Hosting Solution ]]>
                </title>
                <description>
                    <![CDATA[ If you’ve ever stared at a dozen hosting plans, not sure which one to choose, you’re not alone. Hosting isn’t one-size-fits-all, and knowing the difference between a VPS (Virtual Private Server) and a PaaS (Platform as a Service) can help you pick so... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/vps-vs-paas-how-to-choose-a-hosting-solution/</link>
                <guid isPermaLink="false">687fca00b102539f23984a03</guid>
                
                    <category>
                        <![CDATA[ hosting ]]>
                    </category>
                
                    <category>
                        <![CDATA[ server ]]>
                    </category>
                
                    <category>
                        <![CDATA[ PaaS ]]>
                    </category>
                
                    <category>
                        <![CDATA[ vps ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Cloud Computing ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Manish Shivanandhan ]]>
                </dc:creator>
                <pubDate>Tue, 22 Jul 2025 17:27:28 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1753205132683/65ed718f-a68e-4e31-8db3-cf9265e50817.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>If you’ve ever stared at a dozen hosting plans, not sure which one to choose, you’re not alone. Hosting isn’t one-size-fits-all, and knowing the difference between a VPS (Virtual Private Server) and a PaaS (Platform as a Service) can help you pick something that works for your project.</p>
<p>Let’s break them down clearly. We’ll go through VPS and PaaS in detail in terms of scaling, pricing, control, and so on. Each handles hosting very differently, and by the end of this guide, you’ll know exactly which solution fits your workflow better.</p>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ul>
<li><p><a class="post-section-overview" href="#heading-what-is-a-vps">What is a VPS?</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-what-is-a-paas">What is a PaaS?</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-control-and-customization">Control and Customisation</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-setup-and-deployment">Setup and Deployment</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-scaling">Scaling</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-maintenance-and-updates">Maintenance and Updates</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-performance">Performance</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-security">Security</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-pricing">Pricing</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-when-to-use-each">When to Use Each</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-summary">Summary</a></p>
</li>
</ul>
<h2 id="heading-what-is-a-vps">What is a VPS?</h2>
<p>VPS stands for <a target="_blank" href="https://cloud.google.com/learn/what-is-a-virtual-private-server">Virtual Private Server</a>. Think of it as your own slice of a physical server.</p>
<p>Unlike shared hosting, where you compete for resources, a VPS gives you isolated computing power, dedicated RAM, CPU, and storage that’s all yours.</p>
<p>It acts like a mini datacenter. You gain root access, allowing you to install any OS (such as Ubuntu or CentOS), run custom applications, set up cron jobs, configure firewall rules, and essentially shape the environment as you see fit. It’s flexible, affordable, and powerful, and ideal for developers who want control without the complexity of managing bare-metal hardware.</p>
<h2 id="heading-what-is-a-paas">What is a PaaS?</h2>
<p>PaaS stands for <a target="_blank" href="https://azure.microsoft.com/en-us/resources/cloud-computing-dictionary/what-is-paas">Platform as a Service</a>. It’s a cloud-based environment that lets you build, deploy, and scale applications without worrying about infrastructure.</p>
<p>Instead of provisioning servers or managing software stacks, you simply write your code, connect your Git repository, and hit deploy. The platform takes care of everything from building your app, routing traffic, provisioning SSL, scaling services, and monitoring health. It’s DevOps on autopilot.</p>
<p>PaaS solutions are built for speed and simplicity. They support modern languages and frameworks out of the box and offer smart features like auto-scaling, built-in CI/CD, and usage-based pricing.</p>
<p>Now let’s look at the main differences between the two options so you can decide which is best for your use case.</p>
<h2 id="heading-control-and-customisation"><strong>Control and Customisation</strong></h2>
<p>A VPS gives you full control. It’s your server, your rules. </p>
<p>You get root access, pick your OS, install whatever software you need, and tweak system settings to your liking. VPS solutions makes this easy by letting you deploy clean server images quickly like Ubuntu, Debian, Redhat or whatever suits you. Then it’s all in your hands.</p>
<p>PaaS, on the other hand, limits a bit of that flexibility in exchange for convenience. PaaS abstracts the system layer away completely and often comes with support which is handy if you need help. </p>
<p>You write code, push to a Git repo, and it takes care of the rest. It supports popular languages and frameworks, but if you need a very specific runtime or library, you might hit a wall.</p>
<p>If you like being in control, VPS wins here. If you’d rather avoid infrastructure altogether, PaaS is your solution. </p>
<h2 id="heading-setup-and-deployment"><strong>Setup and Deployment</strong></h2>
<p>Getting a VPS up and running takes more effort. You’ll start by provisioning a server, then SSH in to install packages, configure firewalls, set up your web server, and deploy your code manually or via tools like <a target="_blank" href="https://www.freecodecamp.org/news/the-docker-handbook/">Docker</a>.</p>
<p>With PaaS, setup is nearly instant. You connect your GitHub or GitLab account, select your repo, and click deploy. It handles building, routing, SSL certificates, and launching the app, all within minutes. No SSH, no terminal commands, no surprises.</p>
<p>So if you want fast and repeatable deployments, PaaS is the smoother ride. If you’re okay spending more time upfront to craft your ideal setup, VPS gives you the flexibility.</p>
<h2 id="heading-scaling"><strong>Scaling</strong></h2>
<p>Scaling is one of the biggest advantages of PaaS. When your app traffic increases, it can spin up more containers or instances automatically. </p>
<p>You don’t have to predict resource needs ahead of time. Your app scales with demand and scales back down to save money when things quiet down.</p>
<p>With a VPS, scaling is more manual. You have to monitor usage and upgrade your server or configure load balancers yourself. Some developers enjoy this level of control, especially when optimising resource use. But it can be a headache during unexpected traffic spikes.</p>
<p>If your app is likely to grow or experience unpredictable load, PaaS gives you peace of mind. If your traffic is steady and predictable, VPS can handle it just fine, especially if you’re comfortable managing the growth yourself.</p>
<h2 id="heading-maintenance-and-updates"><strong>Maintenance and Updates</strong></h2>
<p>VPS means you’re in charge of everything under the hood. That includes system updates, security patches, disk usage, and log rotation. You also need to manage backups, monitoring, and anything else that keeps your app healthy and online.</p>
<p>PaaS removes that burden. The platform takes care of OS-level updates, security patches, and even restarts or auto-heals when something goes wrong. You get built-in monitoring and automatic backups, and logs are available right from the dashboard.</p>
<p>If maintenance isn’t your strong suit, or just not how you want to spend your valuable time, PaaS clearly comes out ahead.</p>
<h2 id="heading-performance"><strong>Performance</strong></h2>
<p>With a VPS, you get guaranteed resources. They offers dedicated CPU cores and RAM that only your apps use. You can fine-tune performance at every level, from <a target="_blank" href="https://www.freecodecamp.org/news/the-nginx-handbook/">Nginx</a> config files to memory usage. But I would recommend that you read the provider’s fine print and service terms as dedicated resources are not always fully dedicated.</p>
<p>PaaS solutions often run apps in shared or containerised environments. They manage performance for you and isolate workloads, but you might not have the same raw consistency as with a dedicated VPS, especially under heavy compute loads.</p>
<p>For apps that demand consistent high performance, like an online streaming service, a VPS is often the better choice. For most typical web apps, PaaS delivers more than enough speed and stability.</p>
<h2 id="heading-security"><strong>Security</strong></h2>
<p>In a VPS, security is your responsibility. That includes setting up firewalls, securing SSH access, managing user roles, and keeping the OS up to date. VPS gives you the tools, but it’s up to you to use them correctly.</p>
<p>PaaS handles most security concerns automatically, including <a target="_blank" href="https://www.freecodecamp.org/news/protect-against-ddos-attacks/">DDoS protection</a>. It provides HTTPS out of the box, isolates apps from each other, and keeps the platform patched and hardened. While you’re still responsible for securing your app code, you don’t have to worry about the infrastructure.</p>
<p>If security isn’t your strong point, or you want to reduce risk, PaaS adds a safety net. For experienced sysadmins, VPS offers the flexibility to build your own defenses.</p>
<h2 id="heading-pricing"><strong>Pricing</strong></h2>
<p>VPS pricing may appear more affordable at first glance. A VPS server with 4 GB RAM and 80 GB SSD might only set you back $10-15 per month. But that price is fixed, whether your app is serving ten users or ten thousand. And when you outgrow that plan, scaling means resizing the server or juggling additional machines.</p>
<p>PaaS platforms take a different approach. Instead of paying for fixed resources you may or may not use, you pay for what you actually consume. If your app gets minimal traffic, your costs stay low. But if usage spikes, PaaS scales your resources to match, without downtime or manual effort. You’re billed based on activity, not guesswork.</p>
<p>This makes PaaS a better long-term deal for most modern apps. You’re not locked into static hardware. You don’t have to overpay just to be “safe.” And as your app scales, your infrastructure scales with it automatically. </p>
<p>But keep in mind that since PaaS platforms scale automatically based on demand, a sudden spike in traffic can lead to unexpectedly high costs. To avoid surprise bills, make sure to set up pricing alerts and usage thresholds. Most PaaS providers offer these features to help you stay in control of your budget.</p>
<h2 id="heading-when-to-use-each"><strong>When to Use Each</strong></h2>
<p>Use a VPS if you need complete control, want to host multiple apps on one server, or have special requirements around software, performance, or system-level configuration. </p>
<p><a target="_blank" href="https://www.hetzner.com/">Hetzner</a> is a great choice when you want a solid server at a good price and are comfortable managing it yourself. It offers powerful virtual servers with full root access, making it a favorite among developers who want total control. If you’re comfortable managing your own infrastructure, Hetzner gives you the tools and flexibility to build exactly what you need.</p>
<p>Choose PaaS if you want to move fast, avoid infrastructure headaches, and focus purely on coding. PaaS lets you deploy and scale apps with minimal effort, which makes it ideal for teams that want to spend more time building and growing their business than managing. </p>
<p><a target="_blank" href="https://sevalla.com/">Sevalla</a> is a modern PaaS built for speed and simplicity. It handles everything from deployments to scaling, so you can focus entirely on writing code. With smart usage-based pricing and built-in automation, Sevalla is ideal for developers who want to move fast without managing servers or infrastructure.</p>
<h2 id="heading-summary"><strong>Summary</strong></h2>
<p>There’s no one-size-fits-all answer when choosing between VPS and PaaS. It depends on your priorities, whether you care more about control or convenience, price or speed, flexibility or simplicity.</p>
<p>A VPS gives you a clean slate and full power under the hood. It’s ideal for experienced developers and sysadmins who want to build their environment from the ground up.</p>
<p>A PaaS offering gives you the tools to deploy fast, scale effortlessly, and skip the DevOps. It’s perfect if you’d rather write code than manage servers.</p>
<p>Hope you enjoyed this article. <a target="_blank" href="https://linkedin.com/in/manishmshiva">Connect with me</a> on LinkedIn or <a target="_blank" href="https://manishshivanandhan.com/">visit my website</a>.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Set Up Coolify in AWS EC2 and Have the Power to Do Anything in the Cloud ]]>
                </title>
                <description>
                    <![CDATA[ Coolify is an open-source, self-hostable platform that serves as an alternative to services like Heroku, Netlify, and Vercel. It lets developers deploy and manage applications, databases, and services on their own infrastructure, providing greater co... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-set-up-coolify-in-aws-ec2/</link>
                <guid isPermaLink="false">6862962d9dc534abcc4c7eae</guid>
                
                    <category>
                        <![CDATA[ AWS ]]>
                    </category>
                
                    <category>
                        <![CDATA[ hosting ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Open Source ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Md. Fahim Bin Amin ]]>
                </dc:creator>
                <pubDate>Mon, 30 Jun 2025 13:50:37 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1751291416644/05d052cc-dc58-49b4-ac16-3064001fd816.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Coolify is an open-source, self-hostable platform that serves as an alternative to services like Heroku, Netlify, and Vercel. It lets developers deploy and manage applications, databases, and services on their own infrastructure, providing greater control and flexibility.</p>
<p>If you want to use Coolify, you have two options. You can purchase their cloud plan, which costs you money. On the other hand, you can self-host it for free and have unlimited usage without any limitations.</p>
<p>In this article, I will show you how to self-host Coolify directly in an AWS EC2 instance and use its features. I will also show you how to deploy any website directly into it.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1747932644011/206603be-4687-4e0d-ab96-6c1271006cf5.png" alt="206603be-4687-4e0d-ab96-6c1271006cf5" class="image--center mx-auto" width="2880" height="1800" loading="lazy"></p>
<p>This article includes a step-by-step video walkthrough that I made for you. You can watch the video on my <a target="_blank" href="https://www.youtube.com/@FahimAmin">YouTube channel</a>.</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/LADT0Y_IcNU" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ul>
<li><p><a class="post-section-overview" href="#heading-requirements-for-self-hosting-coolify">Requirements For Self-Hosting Coolify</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-set-up-an-aws-ec2-instance-for-coolify">Set Up an AWS EC2 Instance For Coolify</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-security-group-of-aws-ec2">Security Group of AWS EC2</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-install-coolify-in-aws-ec2">Install Coolify In AWS EC2</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-access-coolify-from-anywhere-using-the-public-ip">Access Coolify From Anywhere Using The Public IP</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-how-to-deploy-a-website-via-coolify">How to Deploy A Website Via Coolify</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-conclusion">Conclusion</a></p>
</li>
</ul>
<h2 id="heading-requirements-for-self-hosting-coolify">Requirements For Self-Hosting Coolify</h2>
<p>Since we’re going to self-host Coolify in the cloud for this article, you’ll need to make sure that you have at least the minimum specification of the server. According to Coolify, currently, the minimum requirements are given below:</p>
<h3 id="heading-server-requirements">Server Requirements</h3>
<ul>
<li><p>A VPS (Virtual Private Server)</p>
</li>
<li><p>A Dedicated Server</p>
</li>
<li><p>A Virtual Machine (VM)</p>
</li>
<li><p>A Raspberry Pi (see our <a target="_blank" href="https://coolify.io/docs/knowledge-base/how-to/raspberry-pi-os#prerequisites"><strong>Raspberry Pi OS Setup Guide</strong></a>)</p>
</li>
<li><p>Or any other server with SSH access</p>
</li>
</ul>
<h3 id="heading-supported-operating-system">Supported Operating System</h3>
<ul>
<li><p>Debian-based (for example, Debian, Ubuntu)</p>
</li>
<li><p>Redhat-based (for example, CentOS, Fedora, Redhat, AlmaLinux, Rocky, Asahi)</p>
</li>
<li><p>SUSE-based (for example, SLES, SUSE, openSUSE)</p>
</li>
<li><p>Arch Linux</p>
</li>
<li><p>Alpine Linux</p>
</li>
<li><p>Raspberry Pi OS 64-bit (Raspbian)</p>
</li>
</ul>
<h3 id="heading-supported-architectures"><strong>Supported Architectures</strong></h3>
<p>Coolify runs on 64-bit systems:</p>
<ul>
<li><p>AMD64</p>
</li>
<li><p>ARM64</p>
</li>
</ul>
<h3 id="heading-minimum-hardware-requirements"><strong>Minimum Hardware Requirements</strong></h3>
<ul>
<li><p><strong>CPU</strong>: 2 cores</p>
</li>
<li><p><strong>Memory (RAM)</strong>: 2 GB</p>
</li>
<li><p><strong>Storage</strong>: 30 GB of free space</p>
</li>
</ul>
<p>Coolify may function properly on servers with lower specs than those mentioned above, but they recommend slightly higher minimum requirements. This ensures that users have sufficient resources to deploy multiple applications without performance issues.</p>
<p>I recommend that you check the <a target="_blank" href="https://coolify.io/docs/get-started/installation">official documents,</a> as there might be an update regarding the specifications, and you do not want to miss that part!</p>
<p>I am going to use <strong>AWS EC2</strong> as my server for this guide.</p>
<h2 id="heading-set-up-an-aws-ec2-instance-for-coolify">Set Up an AWS EC2 Instance for Coolify</h2>
<p>Create a new EC2 instance in AWS.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751003070325/e9f40038-12d7-4918-828a-3114d43f8185.png" alt="Create EC2" class="image--center mx-auto" width="1641" height="790" loading="lazy"></p>
<p>Give it any suitable name you want. I am going with <code>coolify-yt</code> for the purpose of this article.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751003129368/d9726de2-f5e9-4d87-abbd-15660438c510.png" alt="EC2 name" class="image--center mx-auto" width="1631" height="796" loading="lazy"></p>
<p>For the Amazon Machine Image (AMI), I will use the latest LTS of Ubuntu (Ubuntu Server 24.04 LTS).</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751003224058/cf23f6b2-c099-40b8-bec1-a39fb0384907.png" alt="AMI Type" class="image--center mx-auto" width="1649" height="804" loading="lazy"></p>
<p>The architecture will be 64-bit (x86).</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751003299729/06970567-5523-4976-9156-d621ccf19899.png" alt="AMI Architecture" class="image--center mx-auto" width="1632" height="756" loading="lazy"></p>
<p>For the instance type, I can’t go with the free tier because that wouldn’t meet the minimum specification. So I’m going with the <code>t2.medium</code>.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751003366450/465a7aad-c049-486a-baf4-6fb9a8ee1537.png" alt="Instance Type" class="image--center mx-auto" width="1335" height="784" loading="lazy"></p>
<p>I will create a new key pair for key pair. I will go with RSA, and the file format will be <code>.pem</code>.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751003554621/6ea1ccba-aeb9-496f-a207-37bf9d554e17.png" alt="Key Pair" class="image--center mx-auto" width="1082" height="653" loading="lazy"></p>
<p>When you click on <code>Create key pair</code>, it will download a <code>.pem</code> file. Make sure to keep that safely.</p>
<p>For the storage, I am taking a 50 GB block storage. But you can follow Coolify’s minimum specification storage (30GB) for now if you want.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751003637365/4238a847-271e-4f4b-a96f-5a84ec9bdf74.png" alt="Storage configuration" class="image--center mx-auto" width="1557" height="773" loading="lazy"></p>
<p>If I want to use my Coolify from anywhere, I have to check the three boxes in the Network settings.</p>
<ul>
<li><p>Allow SSH traffic from (Anywhere)</p>
</li>
<li><p>Allow HTTPS traffic from the internet</p>
</li>
<li><p>Allow HTTP traffic from the internet</p>
</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751003752198/d67af805-bef4-4273-b592-dd1703e56cfd.png" alt="Network settings" class="image--center mx-auto" width="1163" height="574" loading="lazy"></p>
<p>Now, simply click on “Launch instance.” It will create our new EC2 server. It might take a few seconds to half a minute. So just be patient and wait for it to finish its task.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751003903936/277c79c0-f393-4d0f-a78e-5614915f9359.png" alt="Launch instance" class="image--center mx-auto" width="1641" height="809" loading="lazy"></p>
<h2 id="heading-security-group-of-aws-ec2">Security Group of AWS EC2</h2>
<p>Go to the instance tab and find the name of your newly created EC2 instance. Then, find its security group name.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751003959839/d85e30ba-c75d-4c70-afb1-d21765e03045.png" alt="instances" class="image--center mx-auto" width="1660" height="791" loading="lazy"></p>
<p>I have the security group name for my newly created EC2 as “launch-wizard-7”.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004072271/0a1294e6-ae5c-4f61-ab55-6fc3cb1db6be.png" alt="Security Group" class="image--center mx-auto" width="1611" height="612" loading="lazy"></p>
<p>Now, go to the security group tab and find out which security group is associated with your newly created EC2.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004120094/3a328a4b-3da6-4012-928e-0cc8a9414b29.png" alt="security group" class="image--center mx-auto" width="1642" height="805" loading="lazy"></p>
<p>As my EC2’s security group name was “launch-wizard-7”, I will click on that security group ID.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004179202/9919cb9f-a77d-47bd-a47d-52ac51f8a9f2.png" alt="Security group ID" class="image--center mx-auto" width="1620" height="671" loading="lazy"></p>
<p>It will take me to its configuration page. Now, click on “Edit inbound rules”.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004258702/da5ea5a7-ecdf-4358-8e0b-f428bf61bf85.png" alt="Inbound rules" class="image--center mx-auto" width="1587" height="647" loading="lazy"></p>
<p>Add a new rule. The type will be “Custom TCP”. The port will be “8000”. The source will be “Anywhere-IPv4”.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004306106/249b91f7-c0fe-4797-80a0-6d059d55f922.png" alt="Edit inbound rules" class="image--center mx-auto" width="1627" height="743" loading="lazy"></p>
<p>Now save the rules.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004359517/fbaf4dc7-c608-424b-a890-e8c106971097.png" alt="save changes" class="image--center mx-auto" width="1637" height="747" loading="lazy"></p>
<p>Now, go to the EC2 page and make sure that the newly created EC2 is running.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004404168/0321f546-a40e-4ba6-8815-414547e93346.png" alt="EC2 status" class="image--center mx-auto" width="1636" height="673" loading="lazy"></p>
<p>If you want to connect to the EC2 server from your local machine, you have to use the <code>.pem</code> key. For that, you have to go to the “SSH Client” tab in the connect settings.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004603377/99a0a7ac-0d99-433d-bae8-e357cdedd2f2.png" alt="SSH Client" class="image--center mx-auto" width="1645" height="719" loading="lazy"></p>
<p>For now, I am not going to go through that much hassle, so I’ll use the browser to connect to my server using the “Connect” button.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004526291/a56fe27c-2b7f-400d-94f7-b26dc66ad4a4.png" alt="Connect EC2" class="image--center mx-auto" width="1635" height="730" loading="lazy"></p>
<p>Make sure to note the Public IPv4 address of the EC2. Now click on “Connect”.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004626331/f5b8e5a5-5cef-4137-bbf7-807695b79e67.png" alt="Connect" class="image--center mx-auto" width="1645" height="772" loading="lazy"></p>
<p>It will open a new tab with the EC2 connection in your browser.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004654940/951377a0-7c3d-4e88-bc38-bc73b53da337.png" alt="Connect EC2" class="image--center mx-auto" width="1653" height="766" loading="lazy"></p>
<p>It will be ready to use within a few seconds.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004678704/b1313149-61ed-42d9-9a80-03c7a6f84c32.png" alt="EC2" class="image--center mx-auto" width="1658" height="819" loading="lazy"></p>
<h2 id="heading-install-coolify-in-aws-ec2">Install Coolify in AWS EC2</h2>
<p>There are many ways to install Coolify directly on our EC2. But I usually follow the recommended <a target="_blank" href="https://coolify.io/docs/get-started/installation">installation script of Coolify</a>.</p>
<p><code>curl -fsSL</code> <a target="_blank" href="https://cdn.coollabs.io/coolify/install.sh"><code>https://cdn.coollabs.io/coolify/install.sh</code></a> <code>| sudo bash</code></p>
<p>Use <code>sudo zsh</code> instead of <code>sudo bash</code> if you are running the command from a “ZSH” terminal.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004776360/3f7ca4e5-e819-4c06-bf91-1b4b04edae9a.png" alt="Coolify script" class="image--center mx-auto" width="777" height="418" loading="lazy"></p>
<p>It will start installing Coolify into your server. Follow their prompts in the EC2 terminal.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004847716/1994a54b-29ae-44a3-94dd-953c2bc9ffc5.png" alt="install coolify in EC2" class="image--center mx-auto" width="1658" height="705" loading="lazy"></p>
<p>Depending on your EC2 specification, it might take several minutes. Be patient and let it do its job until it reaches the “Congratulations!” screen.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751004975296/c99da698-0e14-41b3-a32e-761d44edca29.png" alt="finish installation" class="image--center mx-auto" width="1655" height="778" loading="lazy"></p>
<h2 id="heading-access-coolify-from-anywhere-using-the-public-ip">Access Coolify from Anywhere Using the Public IP</h2>
<p>After the installation, open a new tab and use that public IP with an ending <code>:8000</code> port. It will take you to the Coolify account registration page for the first time.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005087901/473c8834-e8dd-497e-bb29-ed56e50f9d07.png" alt="Register" class="image--center mx-auto" width="1212" height="750" loading="lazy"></p>
<p>Register your account. The first one becomes the admin by default. But you can change the role afterwards anytime you want.</p>
<p>You can follow their instructions during the onboarding. But for now, I am simply skipping it.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005149629/fb3bcf68-d897-44f4-b210-4896ac630651.png" alt="Skip onboarding" class="image--center mx-auto" width="1168" height="666" loading="lazy"></p>
<p>Your coolify is now completely ready to go!</p>
<h2 id="heading-how-to-deploy-a-website-via-coolify">How to Deploy a Website Via Coolify</h2>
<p>Now, I want to show you how you can easily deploy a static website directly from your GitHub repository in Coolify.</p>
<p>Go to ”Project” and click on “+Add”.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005414046/2b21ea04-e90c-4f88-b853-81f10142f6b1.png" alt="Add new project" class="image--center mx-auto" width="1315" height="578" loading="lazy"></p>
<p>Give it a name and a suitable description.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005442344/dab216e0-10c9-4a05-8528-bfd662dc3094.png" alt="Name and description for the project" class="image--center mx-auto" width="1008" height="560" loading="lazy"></p>
<p>I will use <a target="_blank" href="https://github.com/FahimFBA/RainyRoof_Restaurant_Website">one of my public repositories</a> from GitHub for this trial.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005496252/a4c01732-3f38-4fa3-b3ba-d40ca3a4feba.png" alt="GitHub Repo" class="image--center mx-auto" width="1385" height="752" loading="lazy"></p>
<p>You can also deploy from private repositories. To do so, select “Private repository with GitHub App” or “With deploy key”.</p>
<p>Now, click on Production.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005567995/6908baa5-8305-4f3e-a30f-f4adceda5e06.png" alt="Project" class="image--center mx-auto" width="1152" height="419" loading="lazy"></p>
<p>Now, we need to add a resource from which it will pull the data.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005595787/123b4efe-a664-435a-9b26-88a14b636473.png" alt="Add new resource" class="image--center mx-auto" width="1461" height="433" loading="lazy"></p>
<p>As this repository is already public, I will select “Public Repository” as my project source.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005668775/f050c0d5-4c49-499a-895d-b3329c143440.png" alt="Public repo" class="image--center mx-auto" width="1625" height="747" loading="lazy"></p>
<p>Now, provide the public repo URL in the Repository URL field. Then click on “Check repository”.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005713819/4923f951-4776-4442-9ced-6774b5ee05c7.png" alt="Public repo URL" class="image--center mx-auto" width="1444" height="683" loading="lazy"></p>
<p>It will show you the project's basic configuration. Check to ensure that everything is correct.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005789227/ca3fa656-a00c-4ba4-ab07-b892755b0335.png" alt="Project config" class="image--center mx-auto" width="1455" height="709" loading="lazy"></p>
<p>If everything is alright, then click on “Continue”.</p>
<p>As this is just a static website, I will change the build pack to “Static” and click on “Continue.”</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005858468/9b1c5a9c-db49-4648-a53f-c5cfec1d4f6c.png" alt="Update project spec" class="image--center mx-auto" width="1457" height="695" loading="lazy"></p>
<p>Now, deploy the application by clicking on the “Deploy” button.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005901660/737fc56a-390b-407a-b41b-fe7f7ce0d986.png" alt="Deploy application" class="image--center mx-auto" width="1442" height="768" loading="lazy"></p>
<p>You can enable/disable the debug log as well.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005931517/659f4812-2762-4e18-b543-2678a1b3e09b.png" alt="Debug log" class="image--center mx-auto" width="1426" height="813" loading="lazy"></p>
<p>After the deployment is finished successfully, you can find the website's autogenerated URL from the Links tab.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751005979512/99b6f561-2d4a-4d24-b6a6-ea025857e909.png" alt="Link" class="image--center mx-auto" width="1431" height="720" loading="lazy"></p>
<p>The site will appear just fine!</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751006003870/eab0135a-0c3d-4e17-bbe8-1a0df996d58e.png" alt="Live site" class="image--center mx-auto" width="1638" height="837" loading="lazy"></p>
<p>You can also auto-generate a new domain or add your own domain/subdomain from the project settings at any time.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751006064485/3a7c6a99-f2c8-43f8-82a9-b4ef3bbbcfcb.png" alt="Change domain" class="image--center mx-auto" width="1443" height="811" loading="lazy"></p>
<p>The project settings will contain all other necessary configuration/environment variables, and so on. Whenever you change any information/settings/configuration in the configuration section, you just need to redeploy the application to reflect the changes.</p>
<p>You can add new team members, change the Coolify domain to something else (your domain/subdomain) and make it a generic, publicly accessible server.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1751006188731/0d8471f4-7a74-4413-8cc2-81a42da410e9.png" alt="Team" class="image--center mx-auto" width="1439" height="715" loading="lazy"></p>
<p>So, this is the generic procedure to install Coolify in an AWS EC2 instance without any hassle.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>Thanks for reading this short tutorial. I hope it helped you install Coolify on your favourite server and increase your productivity.</p>
<p>To get more content like this, you can follow me on <a target="_blank" href="https://github.com/FahimFBA">GitHub</a>, <a target="_blank" href="https://www.linkedin.com/in/fahimfba/">LinkedIn</a>, and <a target="_blank" href="https://youtube.com/@FahimAmin">YouTube</a>. My <a target="_blank" href="https://www.fahimbinamin.com/">website</a> is always available, too.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Top Hosting Platforms for Indie Hackers ]]>
                </title>
                <description>
                    <![CDATA[ If you’re an indie hacker – that is, someone building your own side project, startup, or digital product solo or with a small team – you know that hosting matters.  You’re juggling product development, community-building, marketing, support, and ever... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/top-hosting-platforms-for-indie-hackers/</link>
                <guid isPermaLink="false">685c24e3eff8a32b812ea6aa</guid>
                
                    <category>
                        <![CDATA[ hosting ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Manish Shivanandhan ]]>
                </dc:creator>
                <pubDate>Wed, 25 Jun 2025 16:33:39 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1750869186913/741d5815-6f36-41c4-b0e4-bdec93ab6fdf.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>If you’re an indie hacker – that is, someone building your own side project, startup, or digital product solo or with a small team – you know that hosting matters. </p>
<p>You’re juggling product development, community-building, marketing, support, and everything in between. </p>
<p>So you need reliable hosting, simple deployment, predictable pricing, and tools that let you iterate quickly. Not ones with hefty enterprise plans or complex setups, but solutions that complement your hustle, not slow it down.</p>
<p>In this article, we’ll explore five hosting providers that hit the sweet spot for indie hackers. All of them are PaaS, aka Platform as a Service.</p>
<p>A PaaS is a cloud service that gives you the tools to build and run applications without worrying about managing the servers, storage, or networks. Think of it like a ready-to-use kitchen: you bring your recipe (the app), and the platform gives you the stove, oven, and ingredients to cook without needing to build the kitchen yourself.</p>
<p>Each one of these providers brings unique advantages, depending on your stack, stage, and workflow, and together they cover a wide range of use cases. Let’s dive in and see which one fits your indie hacker journey.</p>
<h2 id="heading-herokuhttpswwwherokucom"><a target="_blank" href="https://www.heroku.com/"><strong>Heroku</strong></a></h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1750404263074/7ffaef10-27c4-422b-b96a-ec99ed9b1a55.png" alt="Heroku" class="image--center mx-auto" width="600" height="400" loading="lazy"></p>
<p>Heroku was among the first to popularise platform-as-a-service. </p>
<p>It’s loved for its simplicity. Git push to deploy, Heroku Postgres/Redis add-ons, auto-scaling servers, and a massive ecosystem of extensions.</p>
<p>For indie hackers building backend-heavy apps with Node.js, Rails, Django, or Go, Heroku offers instant productivity. You don’t worry about servers or containers.</p>
<p>Each app runs in your <a target="_blank" href="https://www.heroku.com/dynos/">isolated containers, aka dynos</a>, which can spin up or down based on demand. Add-on services like email, monitoring, logging, and databases are just clicks away.</p>
<p>Heroku’s free tier used to be popular with hobbyists, though now it’s more limited. Monthly pricing scales by dyno count and type.</p>
<p>For lightweight apps, a single hobby dyno plus hobby database may cost $10–15/month. That’s not bad for professional-grade infrastructure, but still pricier than shared hosting if you only need a static site.</p>
<p>The biggest win for Heroku is developer joy. Everyone from indie hackers to experienced developers appreciates the ease of tweaking environment variables, rolling back deploys, and connecting add-ons in seconds. </p>
<p>If your app involves custom logic or API services, and you value smooth deployment, Heroku is a strong contender.</p>
<h2 id="heading-hostingerhttpswwwhostingercom"><a target="_blank" href="https://www.hostinger.com/"><strong>Hostinger</strong></a></h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1750404275622/30b16e2f-842d-48f3-8e37-e2c74b40a794.jpeg" alt="Hostinger" class="image--center mx-auto" width="600" height="400" loading="lazy"></p>
<p>Hostinger is a popular choice for newbies and budget-conscious creators. It’s one of the few mainstream shared hosting providers that balances price and performance well.</p>
<p>You can launch a basic WordPress blog, landing page, or simple PHP app for just a couple of dollars a month. </p>
<p>Set up is streamlined: pick a plan, register a domain from their dashboard, and go. </p>
<p>The control panel is custom, but intuitive  with E-mail setup, SSL, file manager, and one-click installs for popular software. They also offer a handy staging environment and LiteSpeed caching.</p>
<p>For indie hackers launching static sites, simple landing pages, or early-stage MVPs, Hostinger gives enough horsepower without breaking the bank. Hostinger also has a <a target="_blank" href="https://www.hostinger.com/horizons">no-code web app builder</a>, dramatically lowering the barrier to launching a product.</p>
<p>You won’t have the nicest DevOps tools, but if your goal is to validate quickly and cheaply, Hostinger is your tool. And when traffic grows, you can upgrade to VPS or cloud hosting plans.</p>
<h2 id="heading-vercelhttpsvercelcom"><a target="_blank" href="https://vercel.com/"><strong>Vercel</strong></a></h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1750404284387/af8b4e6b-8f28-445d-9ca0-be6bf4adb93c.png" alt="Vercel" class="image--center mx-auto" width="600" height="400" loading="lazy"></p>
<p>If your indie hacker stack leans front-end heavy – React, Next.js, SvelteKit, or any Jamstack framework – Vercel is a game-changer.</p>
<p>It was built by the team behind <a target="_blank" href="https://www.freecodecamp.org/news/build-a-full-stack-application-with-nextjs/">Next.js</a>, so deploying Next apps to production is nearly magical.</p>
<p>Connect your Git repo, push a feature branch, and Vercel builds a preview deployment automatically. Pull request feedback loops get faster because non-developers can click a preview link, poke around, and comment. </p>
<p>You can define build times, edge functions, image optimisation, and routing inside your project configuration.</p>
<p>Vercel’s free tier is generous. It has unlimited personal projects, preview deploys, and edge network usage capped per month. When you need higher capacity, you can upgrade to Pro plans. </p>
<p>They’re all drop-in billing by usage, so no surprises. And their integrations suite (like analytics, search, e-commerce) helps indie hackers build richer tools quickly.</p>
<p>A couple of tradeoffs in Vercel include backends running as edge or <a target="_blank" href="https://www.splunk.com/en_us/blog/learn/serverless-functions.html">serverless functions</a>, not persistent processes. If your use case doesn’t fit serverless models, you may need a separate backend provider. </p>
<p>Overall, if you’re building a modern frontend-first product, Vercel gives you speed, simplicity, and scale from day one.</p>
<h2 id="heading-railwayhttpsrailwaycom"><a target="_blank" href="https://railway.com/"><strong>Railway</strong></a></h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1750404332609/7b85b031-c649-46e1-957e-abce16e2e671.png" alt="Railway" class="image--center mx-auto" width="600" height="400" loading="lazy"></p>
<p>Railway is often called “Heroku for the next generation,” and that’s not a bad description. It blends ease of deployment with infrastructure flexibility.</p>
<p>You connect your GitHub repo, and Railway loads your <a target="_blank" href="https://www.freecodecamp.org/news/the-docker-handbook/">Dockerfile</a> or project type automatically. DNS, SSL, environment variables, and metrics are all neatly bundled.</p>
<p>You can provision databases, queues, caches – everything you need in a few clicks. Auto-scaling is optional and customizable.</p>
<p>There’s a generous free tier that gives you $5 in credit per month, usually enough for small apps or experiments. From there, you pay for usage. It’s more granular than Heroku’s flat dyno model.</p>
<p>For indie hackers experimenting with new tech or building full-stack apps, Railway is a fine choice because it removes friction at every step. It’s modern, minimalist, and built with developer experience in mind.</p>
<p>Railway isn’t as massive as AWS or Google Cloud. Don’t expect enterprise-grade SLAs or huge add-on ecosystems. But for a single dev or small dev team, Railway’s tooling and interface hit the sweet spot between simplicity and power.</p>
<h2 id="heading-flyiohttpsflyio"><a target="_blank" href="https://fly.io/"><strong>Fly.io</strong></a></h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1750404374672/d43f592f-e9e8-4e79-9d26-06882404bd03.png" alt="Fly.io" class="image--center mx-auto" width="600" height="400" loading="lazy"></p>
<p>Fly.io is a unique PaaS that lets you deploy applications close to your users worldwide. It builds Docker containers from your projects and spreads them on their global edge network.</p>
<p>An indie hacker can start with a simple fly launch, and Fly.io will build their Docker image, provision VMs in various data centres, and route users to the nearest instance. That can lead to very low latencies for users in Europe, Asia, and the Americas.</p>
<p>Storage volumes are available, plus persistent Postgres managed clusters. You get operational visibility through logs, metrics, and global traffic maps.</p>
<p>It's free tier covers modest usage, perfect for testing or small user bases. Paid plans charge by vCPU hours, RAM, and bandwidth, similar to cloud pricing, but wrapped in a PaaS interface.</p>
<p>If your indie project demands speed or you’re targeting global users, Fly.io gives local access without deep DevOps. If you prefer container workflows (Dockerfile, compose), Fly.io fits your style without sacrificing simplicity.</p>
<h2 id="heading-how-to-choose-the-right-host"><strong>How to Choose the Right Host</strong></h2>
<p>Here’s how to think about picking the right fit based on your particular situation.</p>
<p>If you prioritize smooth backend deployment and simplicity, Heroku remains a classic. Git-based deploys, add-ons, predictable pricing – that old comfort meets modern needs.</p>
<p>If you want ultra-low cost and just need a static site or WordPress blog, Hostinger is the best. It’s cheap, fast, and in charge of most backend details.</p>
<p>If your project is frontend-first, or built on Next.js or <a target="_blank" href="https://jamstack.org/">Jamstack</a> frameworks, Vercel offers fast builds, preview links, and edge function capabilities. It’s built for your stack, with a seamless developer experience.</p>
<p>If you want a modern all-in-one PaaS with flexibility and granular billing, Railway is an exciting choice. It supports Docker, databases, and more with minimal config and strong UX.</p>
<p>If you want geographical coverage and container-based global apps, Fly.io lets you deploy low-latency apps anywhere in the world, using Docker under the hood with a clean control layer.</p>
<h2 id="heading-summary"><strong>Summary</strong></h2>
<p>Every host shines in its niche. There’s no one-size-fits-all, but knowing your needs helps you choose well. These platforms empower you to iterate fast, launch cheaper, and scale when ready.</p>
<p>As indie hackers ourselves, we want our tech to empower our creativity, not slow it down. Choose tools that support your curiosity and let you learn, pivot, and launch. Happy hosting, and even happier hacking.</p>
<p>Hope you enjoyed this article. You can <a target="_blank" href="https://manishshivanandhan.com/">learn more about me</a> or <a target="_blank" href="https://www.linkedin.com/in/manishmshiva/">connect with me on LinkedIn</a>.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Speed Up Website Loading by Removing Extra Bits and Bytes ]]>
                </title>
                <description>
                    <![CDATA[ Let’s start with an interesting fact: according to research done by Akamai, a 1-second delay in loading a website’s page can decrease the conversion rate by 7%. We are currently living in a fast-paced world, where time is money for everyone. People e... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/speed-up-website-loading/</link>
                <guid isPermaLink="false">67bca6f616cf4617f656a33f</guid>
                
                    <category>
                        <![CDATA[ code optimization ]]>
                    </category>
                
                    <category>
                        <![CDATA[ server ]]>
                    </category>
                
                    <category>
                        <![CDATA[ hosting ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Google PageSpeed ]]>
                    </category>
                
                    <category>
                        <![CDATA[ cloudflare ]]>
                    </category>
                
                    <category>
                        <![CDATA[ performance ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Alex Tray ]]>
                </dc:creator>
                <pubDate>Mon, 24 Feb 2025 17:05:58 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1740094347867/d1097d7b-776f-4228-8088-7726b827271f.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Let’s start with an interesting fact: according to research done by <a target="_blank" href="https://www.akamai.com/newsroom/press-release/akamai-releases-spring-2017-state-of-online-retail-performance-report">Akamai</a>, a 1-second delay in loading a website’s page can decrease the conversion rate by 7%.</p>
<p>We are currently living in a fast-paced world, where time is money for everyone. People expect their favorite websites to load lightning-fast. A slow loading speed will not only make them go to the competitor but will also hurt the <a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-on-page-seo-techniques-to-rank-on-the-first-page/">website's ranking</a> in the SERP.</p>
<p>But the main question is, who’s the culprit? Those extra bits and bytes that almost every site contains. These are unnecessary code files, unoptimized images, and many more. But by following the right approach, you can easily strip away these inefficiencies and achieve excellent loading speed.</p>
<p>In this article, I will be discussing that approach in detail, so stick around with me till the very end.</p>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ul>
<li><p><a class="post-section-overview" href="#heading-why-does-loading-speed-matter">Why Does Loading Speed Matter?</a></p>
<ul>
<li><p><a class="post-section-overview" href="#heading-google-ranking-factor">Google Ranking Factor</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-impact-on-user-experience">Impact on User Experience</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-negative-brand-perception">Negative Brand Perception</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-retaining-mobile-users">Retaining Mobile Users</a></p>
</li>
</ul>
</li>
<li><p><a class="post-section-overview" href="#heading-how-to-remove-extra-bits-amp-bytes-from-the-website-different-strategies">How to Remove Extra Bits &amp; Bytes from the Website – Different Strategies</a></p>
<ul>
<li><p><a class="post-section-overview" href="#heading-perform-code-optimization">Perform Code Optimization</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-image-amp-media-optimization">Image &amp; Media Optimization</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-manage-plugins-amp-scripts">Manage Plugins &amp; Scripts</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-server-amp-hosting-upgrades">Server &amp; Hosting Upgrades</a></p>
</li>
</ul>
</li>
<li><p><a class="post-section-overview" href="#heading-tools-that-you-can-use-to-streamline-the-process">Tools That You Can Use to Streamline the Process</a></p>
<ul>
<li><p><a class="post-section-overview" href="#heading-minifierhttpswwwminifierorg">Minifier</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-tinypnghttpstinypngcom">TinyPNG</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-png-to-webp-converterhttpscloudconvertcompng-to-webp">PNG to WebP Converter</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-google-pagespeed-insighthttpspagespeedwebdev">Google PageSpeed Insight</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-cloudflarehttpswwwcloudflarecom">Cloudflare</a></p>
</li>
</ul>
</li>
<li><p><a class="post-section-overview" href="#heading-wrapping-up">Wrapping Up</a></p>
</li>
</ul>
<h2 id="heading-why-does-loading-speed-matter">Why Does Loading Speed Matter?</h2>
<p>There are several reasons why the loading speed of a website is considered essential. Here are some of the major ones.</p>
<ol>
<li><h3 id="heading-google-ranking-factor">Google Ranking Factor:</h3>
</li>
</ol>
<p>Website loading speed is a confirmed ranking factor. This means that search engines like Google definitely consider the loading time when evaluating a website’s quality. Usually, the <a target="_blank" href="https://sematext.com/glossary/page-load-time/">ideal loading speed</a> is between 0 and 2 seconds. However, 3 seconds is also sometimes acceptable.</p>
<p>In case your site does not fulfill this criteria, then there is a high probability that it may receive a penalty from Google. This will result in lower rankings in the targeted niche – which no webmaster or business wants.</p>
<ol start="2">
<li><h3 id="heading-impact-on-user-experience">Impact on User Experience:</h3>
</li>
</ol>
<p>A slow loading speed is capable of single-handedly destroying the entire user experience. When the website does not load quickly in front of the visitor, they may close it and move on to another site to find the required information, product, or service.</p>
<p>This will decrease the number of user engagements and increase the overall bounce rate of the site. And a high bounce rate increases the chances of facing a penalty from Google.</p>
<ol start="3">
<li><h3 id="heading-negative-brand-perception">Negative Brand Perception:</h3>
</li>
</ol>
<p>For online businesses or brands, their authority and image are everything. When their official site takes too much time to load, it ultimately damages the brand’s perception or credibility in their minds. They will think about how you can deliver a top-notch service or product when you aren’t able to properly manage a website.</p>
<p>This negative impression will not only reduce customer engagement but also conversions.</p>
<ol start="4">
<li><h3 id="heading-retaining-mobile-users">Retaining Mobile Users:</h3>
</li>
</ol>
<p>Mobile contributes to <a target="_blank" href="https://www.mobiloud.com/blog/what-percentage-of-internet-traffic-is-mobile">58% of the global internet traffic</a>. It is also true mobile networks often have slow internet speed issues as compared to Wi-Fi. This can be especially true for people living in rural areas. So, that’s why you should always prioritize loading speed to efficiently retain mobile users.</p>
<h2 id="heading-how-to-remove-extra-bits-amp-bytes-from-the-website-different-strategies">How to Remove Extra Bits &amp; Bytes from the Website – Different Strategies</h2>
<p>Here are some of the most proven strategies you can utilize to remove extra bits and bytes from your websites.</p>
<ol>
<li><h3 id="heading-perform-code-optimization">Perform Code Optimization:</h3>
</li>
</ol>
<p>Excessive HTML, CSS, and JavaScript can greatly slow down a website. Due to the large code file, the host server will have to transfer more packets to the client browser, ultimately resulting in slow loading.</p>
<p>To resolve this issue, it is always recommended to perform code optimization. The most widely known and used technique for this purpose is minification. It refers to the process of removing all the:</p>
<ul>
<li><p>Unnecessary characters</p>
</li>
<li><p>White spaces</p>
</li>
<li><p>Line breaks</p>
</li>
<li><p>Comments</p>
</li>
<li><p>Unused elements.</p>
</li>
</ul>
<p>But you’ll want to make sure that the code works as before, even after minification.</p>
<p>Optimizing code boosts application performance by reducing execution time and resource consumption. Refactor inefficient loops, minimize database queries, and leverage caching to enhance speed. You can use profiling tools to identify bottlenecks and streamline functions for smoother, faster performance.</p>
<p>To demonstrate better, below I have discussed an example:</p>
<p><strong>Unoptimized JavaScript Code:</strong></p>
<pre><code class="lang-javascript">greet(name) {
    <span class="hljs-keyword">if</span> (!name) {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Hello, Guest!"</span>);
    } <span class="hljs-keyword">else</span> {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Hello, "</span> + name + <span class="hljs-string">"!"</span>);
    }
}
greet(<span class="hljs-string">"John"</span>);
</code></pre>
<p><strong>Minified Version:</strong></p>
<pre><code class="lang-javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">greet</span>(<span class="hljs-params">n</span>)</span>{<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Hello, "</span>+(n||<span class="hljs-string">"Guest"</span>)+<span class="hljs-string">"!"</span>)}greet(<span class="hljs-string">"John"</span>);
</code></pre>
<p>As you can see, I created the minified version by removing all the line breaks and whitespaces. Apart from this, I used shortened variables, like “<strong>n</strong>” instead of “<strong>Name</strong>.” Finally, I also replaced the If Else statement with a shorter n || "Guest" expression.</p>
<p>This is how you can easily condense the entire HTML, CSS, and JavaScript code of your website, and enhance the overall loading speed.</p>
<p>Just keep in mind that there are multiple downsides of code minification. For instance, it significantly impacts code readability and can cause challenges in debugging and maintenance. So use this approach judiciously.</p>
<ol start="2">
<li><h3 id="heading-image-amp-media-optimization">Image &amp; Media Optimization:</h3>
</li>
</ol>
<p>Apart from code, unoptimized images, <a target="_blank" href="https://logocreator.io/blog/logo-file-formats/">logo files</a> and other media files are often the main culprits behind the slow <a target="_blank" href="https://www.freecodecamp.org/news/developers-guide-to-website-speed-optimization/">loading speed</a> of a website. This means that you also need to optimize them as well. There are numerous things you can do in this regard.</p>
<p>First of all – you should reduce the image size in terms of storage. It is generally recommended that each <a target="_blank" href="https://www.foregroundweb.com/image-size/">picture should be less than 500 KB in size</a>. But note that this size can vary depending on the use case.</p>
<p>It’s also a good idea to choose next-generation picture formats like WebP instead of typical ones like JPEG or PNG. When it comes to video files, it’s also helpful if you go with the embedded ones from platforms like YouTube.</p>
<p><strong>Now, let us explain all this with a proper example (Before &amp; After).</strong></p>
<p>Let’s say that a website uses a 2MB JPEG image for its blog post. Its optimization process will involve the following steps:</p>
<ul>
<li><p>Resize the image first. The recommended dimensions are 1200x800.</p>
</li>
<li><p>Compress the image size using image compression tools (we’ll discuss one such tool later in this article)</p>
</li>
<li><p>Now, convert the JPEG file into WebP format.</p>
</li>
<li><p>Add alternative text before publishing</p>
</li>
</ul>
<p><strong>After optimization:</strong></p>
<ul>
<li><p>The image file size will now be reduced to KBS somewhere around 120Kb.</p>
</li>
<li><p>Your website will experience better loading speed as well as an improved user experience.</p>
</li>
</ul>
<p>One more tip that you can consider is <a target="_blank" href="https://www.freecodecamp.org/news/how-lazy-loading-works-in-web-development/">lazy loading</a>. This means only loading the images and videos when they are about to be consumed.</p>
<p>By taking care of these few things, you can efficiently optimize images and media files to achieve faster loading speeds.</p>
<ol start="3">
<li><h3 id="heading-manage-plugins-amp-scripts">Manage Plugins &amp; Scripts:</h3>
</li>
</ol>
<p>Your website may contain unused plugins and scripts that can cause bloat. So, to remove the extra bits and bytes, it is essential to perform regular check-ins.</p>
<p>First, make sure you deactivate and delete all the plugins that aren’t needed. Then, start exploring more lightweight alternatives for plugins that you are actively using. If you find any, go for them and uninstall the bulky ones to improve performance and enhance security, especially for processes like identity verification. Ensure you’re using the latest, most optimized version..</p>
<p>For example, Revolution Slider is a heavy plugin. It loads large scripts and images on every page, even when not needed. This ultimately affects the overall website speed. Some of its lightweight alternatives that you might consider for this include <a target="_blank" href="https://smartslider3.com/">Smart Slider 3</a>, or any other CSS-based slider.</p>
<p>Next comes script management. Here you should first limit any third-party scripts, such as excessive code tracking, social media widgets, and embedded content. Apart from this, don’t forget to totally disable scripts on the pages where they aren’t required.</p>
<p>One useful example here is Google Analytics which loads tracking scripts on every page, increasing the request time. To fix this issue, you can use <a target="_blank" href="https://tagmanager.google.com/">Google Tag Manager</a> to load the scripts only when they are needed.</p>
<p>Additionally, you can use <a target="_blank" href="https://www.blaze.tech/post/no-code-automation-how-to-streamline-your-business-now">no-code workflow automation tools</a> like Zapier, Make, or Uncanny Automator which help streamline processes by reducing reliance on heavy plugins and scripts.</p>
<ol start="4">
<li><h3 id="heading-server-amp-hosting-upgrades">Server &amp; Hosting Upgrades:</h3>
</li>
</ol>
<p>This is the final strategy that you can consider. Your hosting provider plays a key role in deciding the loading speed of the website. So, it’s a good idea to upgrade your hosting plan and get it from a reputable and credible service.</p>
<p>Also, do not forget to enable server-side compression. Doing so will automatically reduce the file sizes before transmission. Optimizing database performance is equally crucial, as <a target="_blank" href="https://www.liquibase.com/resources/guides/database-observability">database observability enables database pipeline analytics</a>, helping to identify inefficiencies, reduce query execution time, and enhance overall site responsiveness.</p>
<p>Also, take steps to optimize the database queries. You can do this by removing unnecessary data while also caching data mechanisms. There are also specialized plugins available for this like <a target="_blank" href="https://wordpress.org/plugins/wp-optimize/">WP-Optimize</a>. It effectively cleans up all the unnecessary data saving valuable time and effort.</p>
<p>You should also start caching queries. Store all the frequent ones in memory. This will significantly reduce database load.</p>
<pre><code class="lang-sql"><span class="hljs-keyword">SELECT</span> * <span class="hljs-keyword">FROM</span> products <span class="hljs-keyword">WHERE</span> <span class="hljs-keyword">category</span> = <span class="hljs-string">'Laptops'</span> <span class="hljs-keyword">CACHE</span>;
</code></pre>
<p>This prevents the server from re-executing the same query repeatedly.</p>
<p>So, these are some of the proven strategies you can apply to eliminate additional bits &amp; bytes from the website to achieve faster loading.</p>
<h2 id="heading-tools-that-you-can-use-to-streamline-the-process">Tools That You Can Use to Streamline the Process</h2>
<p>To simplify the process of optimizing website loading speed, you can consider utilizing the following tools.</p>
<ol>
<li><h3 id="heading-minifierhttpswwwminifierorg"><a target="_blank" href="https://www.minifier.org/">Minifier</a></h3>
</li>
</ol>
<p>First of all, we have Minifier, a dedicated tool that is specifically designed to automate the code minification process with a single click. It is available for free and works for HTML, CSS, and JavaScript codes.</p>
<p>Besides this, the tool features a user-intuitive interface so that you can quickly navigate through it. The minifier is trained according to both development and minification to ensure maximum speed and accuracy in the output.</p>
<p>All you need to do is either paste or upload the code file into the tool, hit the “<strong>Minify</strong>” button, and get a condensed version. You can check out the below screenshot to get a better idea how it works.</p>
<p><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcu5gaAosAaUCZQ7oIp3J_m_CIEyAshp2Ob6rmguvQOQvxuuz6rXJ1QdO_FSD_McnO1S-fkqv38cY7B0e4s5xBtjNa78mVns2VZRe3iUemWxR-dKgct9-OJkb6YIO2fTkhB_W3If4DYj6hb2vnzknY?key=W-8S2j9mlTlf7KW39H_m9bHu" alt="Screenshot showing Minify result" width="600" height="400" loading="lazy"></p>
<p>Minify also offers a wide variety of other useful tools you can use if needed. Some notable options include JSON minifier and XML formatter, among others.</p>
<p>So now there is no need to spend time and effort on manually minifying your code for better loading speed. You can just use this tool and get the job done with a single click.</p>
<ol start="2">
<li><h3 id="heading-tinypnghttpstinypngcom"><a target="_blank" href="https://tinypng.com/">TinyPNG</a></h3>
</li>
</ol>
<p><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXckb9b-_Pfw-T4icivrTC6g_pnhjpu3BSK0s-7ussuhsRRY22qGNe8DAyUINv8GgGQ5DmY579muEPcGkCjRsbSZofP9XZ1y3xqPBYriFDyh_2vl6yWM4fNYBKaA7k5Jx05pRjjw3ShVU3tT3JjeHwM?key=W-8S2j9mlTlf7KW39H_m9bHu" alt="AD_4nXckb9b-_Pfw-T4icivrTC6g_pnhjpu3BSK0s-7ussuhsRRY22qGNe8DAyUINv8GgGQ5DmY579muEPcGkCjRsbSZofP9XZ1y3xqPBYriFDyh_2vl6yWM4fNYBKaA7k5Jx05pRjjw3ShVU3tT3JjeHwM?key=W-8S2j9mlTlf7KW39H_m9bHu" width="600" height="400" loading="lazy"></p>
<p>Many of you may have heard of or even used this tool. It is an image compression tool that will help you effectively reduce your image sizes for optimization. The good thing is that TinyPNG perfectly preserves the original quality of the picture (in terms of resolution) even after the compression.</p>
<p>All you need to do is upload the required photo from your local storage, and the tool will automatically provide a compressed version. Don’t worry about the file format, as TinyPNG supports JPG, PNG, JPEG, and many more.</p>
<p>The tool even provides the percentage of how much the uploaded image was compressed, like -51%, and so on. It also mentions the size of the compressed photo in terms of KBs. So, in case you are not satisfied with the file size, you can further compress it.</p>
<ol start="3">
<li><h3 id="heading-png-to-webp-converterhttpscloudconvertcompng-to-webp"><a target="_blank" href="https://cloudconvert.com/png-to-webp">PNG to WebP Converter</a>:</h3>
</li>
</ol>
<p><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcSaBUNNRRqk5A4EetHdg1CK1P6F-Ro213s3DnifuZZFF24BNJZHsP_qXjVe1rn72iPH2jZd707JRsOSIUe7PzEAH7jE0ccacHXaEbqJ0YDILtM4K4gF5IYao0wOpJ13jw-xNOzrKaJiRP926kjqQ?key=W-8S2j9mlTlf7KW39H_m9bHu" alt="AD_4nXcSaBUNNRRqk5A4EetHdg1CK1P6F-Ro213s3DnifuZZFF24BNJZHsP_qXjVe1rn72iPH2jZd707JRsOSIUe7PzEAH7jE0ccacHXaEbqJ0YDILtM4K4gF5IYao0wOpJ13jw-xNOzrKaJiRP926kjqQ?key=W-8S2j9mlTlf7KW39H_m9bHu" width="600" height="400" loading="lazy"></p>
<p>As I mentioned earlier, I recommend using next-gen image formats like WebP instead of older formats when possible. Usually, the widely used format is PNG, but to seamlessly convert into WebP, you can use this PNG to WebP converter.</p>
<p>It’s available for free and does not ask for registration/signup. Simply visit the page and start performing conversions. The conversion is performed without causing any damage to the image’s quality and formatting.</p>
<p>The tool also offers many extra features. For instance, you can adjust both the image’s width and height. You can also set image quality (WebP compression level) if required. And it doesn’t stop here – you can even select the right fit for the photo from the following options:</p>
<ul>
<li><p>Max</p>
</li>
<li><p>Crop</p>
</li>
<li><p>Scale</p>
</li>
</ul>
<ol start="4">
<li><h3 id="heading-google-pagespeed-insighthttpspagespeedwebdev"><a target="_blank" href="https://pagespeed.web.dev/">Google PageSpeed Insight</a></h3>
</li>
</ol>
<p>How can you enhance the loading speed of the website when you don’t even know which elements are causing issues? For this purpose, Google PageSpeed Insight is the best solution. It is developed and managed by Google.</p>
<p>The tool effectively crawls the given page link and highlights all the issues that are causing slow loading. It even provides four different scores (0-100) for evaluation. These include:</p>
<ul>
<li><p>Performance</p>
</li>
<li><p>Accessibility</p>
</li>
<li><p>Best Practices</p>
</li>
<li><p>SEO</p>
</li>
</ul>
<p><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXet-k73bv-y0HQXbGHfrcntmms8k_nQvcrrADNI3w9cBrFKGv9CAkMSEdOCWHFVyuRQxVXaUseYQxIa_2GA9Hl7TzDGSSO_vZqZliiX32ZNdkvoQZYhCf4i3PyKtGHOzk8pwqZ6O-gZRCwPC3gzBt0?key=W-8S2j9mlTlf7KW39H_m9bHu" alt="AD_4nXet-k73bv-y0HQXbGHfrcntmms8k_nQvcrrADNI3w9cBrFKGv9CAkMSEdOCWHFVyuRQxVXaUseYQxIa_2GA9Hl7TzDGSSO_vZqZliiX32ZNdkvoQZYhCf4i3PyKtGHOzk8pwqZ6O-gZRCwPC3gzBt0?key=W-8S2j9mlTlf7KW39H_m9bHu" width="600" height="400" loading="lazy"></p>
<p>The good thing is that Google PageSpeed Insights evaluates the page for both mobile and desktop users. The results are also provided separately. The areas of improvement are highlighted in red, along with the necessary instructions you can take. The good parts are marked with green.</p>
<p>By utilizing this tool, you can easily evaluate your website and then make efforts to improve the loading speed.</p>
<ol start="5">
<li><h3 id="heading-cloudflarehttpswwwcloudflarecom"><a target="_blank" href="https://www.cloudflare.com/">Cloudflare</a></h3>
</li>
</ol>
<p><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeKEUhCvUoLArPXA_KRMaH4ws28-YXc6OSzP9idKqis14maZynQIrYUoHaJWF1LJ20q7UcFjAhUGc7WRKpk1S37tkaanh5VRqguD2u7ICzp5eFY5e0mMNjZJU_yl-YCm2O1hdaq2gsnwpWJDbPMGGI?key=W-8S2j9mlTlf7KW39H_m9bHu" alt="AD_4nXeKEUhCvUoLArPXA_KRMaH4ws28-YXc6OSzP9idKqis14maZynQIrYUoHaJWF1LJ20q7UcFjAhUGc7WRKpk1S37tkaanh5VRqguD2u7ICzp5eFY5e0mMNjZJU_yl-YCm2O1hdaq2gsnwpWJDbPMGGI?key=W-8S2j9mlTlf7KW39H_m9bHu" width="600" height="400" loading="lazy"></p>
<p>Last but not least, Cloudflare is a good tool that helps enhance the loading speed of a website by using its global content delivery network (CDN). With this feature, it caches static content across different servers worldwide. This ultimately reduces the overall latency and improves loading speed for users in different locations.</p>
<p>Besides this, Cloudflare also offers a bunch of other features. For example, it automatically minifies HTML, CSS, and JavaScript files. It can even compress and convert images into next-gen formats, especially WebP.</p>
<p>It offers a robust DNS resolution that reduces lookup times and helps the page load faster. This feature also protects the site from DDoS attacks.</p>
<h2 id="heading-wrapping-up">Wrapping Up</h2>
<p>If you want to experience higher ranking and increased user engagement, then you need to optimize your website’s loading speed. The extra bits and bytes like code files, media, and so on can cause real hurdles – but don’t worry.</p>
<p>By using these strategies and tools, you’ll be able to speed up page loading in no time. I hope you found this article interesting and valuable.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ AWS EC2: How to Quickly Host Your Website with User Data Scripts ]]>
                </title>
                <description>
                    <![CDATA[ If you want to practice and improve your web hosting skills, this tutorial is for you. With AWS EC2 and a little magic called user data scripts, you’ll be running a stunning website with a CSS template in no time. And the best part? You don’t need to... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/aws-ec2-how-to-host-a-website-with-user-data-scripts/</link>
                <guid isPermaLink="false">67462204c9e1cbc5414b4e0c</guid>
                
                    <category>
                        <![CDATA[ AWS ]]>
                    </category>
                
                    <category>
                        <![CDATA[ ec2 ]]>
                    </category>
                
                    <category>
                        <![CDATA[ hosting ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Kedar Makode ]]>
                </dc:creator>
                <pubDate>Tue, 26 Nov 2024 19:31:16 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/upload/v1732639814571/62719c49-cd15-4f2c-9586-22a5a300bc4a.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>If you want to practice and improve your web hosting skills, this tutorial is for you. With AWS EC2 and a little magic called user data scripts, you’ll be running a stunning website with a CSS template in no time. And the best part? You don’t need to manually install everything – the user data script does all the heavy lifting for you.</p>
<p>Before getting started with this guide, make sure you've read through my <a target="_blank" href="https://www.freecodecamp.org/news/host-a-website-on-aws-ec2-using-a-css-template">previous tutorial</a> on AWS EC2. It covers the essentials of creating and configuring an EC2 instance. You'll learn how to navigate the AWS Management Console, select the right instance type, configure security groups, and more.</p>
<p>This foundational knowledge will make sure you're fully prepared to launch your website effortlessly with the help of user data scripts.</p>
<p>So, grab a coffee, and let’s dive into this fun and simple guide. By the end, you’ll be able to launch your own website without breaking a sweat.</p>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ul>
<li><p><a class="post-section-overview" href="#heading-what-well-cover">What We'll Cover</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-step-1-launch-your-ec2-instance">Step 1: Launch Your EC2 Instance</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-step-2-wait-the-script-did-everything-already">Step 2: Wait… The Script Did Everything Already?</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-step-3-access-your-website">Step 3: Access Your Website</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-wrapping-up">Wrapping Up</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-want-more">Want more?</a></p>
</li>
</ul>
<h2 id="heading-what-well-cover">What We’ll Cover:</h2>
<p>Today, we’re going to:</p>
<ul>
<li><p>Launch an EC2 instance (Don’t worry, it’s easier than it sounds).</p>
</li>
<li><p>Use a user data script to automate setting up a web server.</p>
</li>
<li><p>Download a CSS template and host it on your instance.</p>
</li>
</ul>
<p>You might be wondering: why a user data script? Imagine it as a to-do list for your EC2 instance. When the instance boots up, it runs through this list and sets everything up automatically. It’s like having a personal assistant that handles all the tedious setup tasks. Sounds good, right?</p>
<h3 id="heading-step-1-launch-your-ec2-instance">Step 1: Launch Your EC2 Instance</h3>
<p>First things first, head over to your AWS Management Console. This is where all the magic happens.</p>
<p>Log in to AWS and head to the AWS Console. If you don’t already have an account, don’t worry, you can just sign up – it's free for basic usage.</p>
<p>Now here are the steps you’ll follow to launch the instance:</p>
<ul>
<li><p>In the console, type <strong>EC2</strong> in the search bar and click on the EC2 service.</p>
</li>
<li><p>Click the big <strong>Launch Instance</strong> button.</p>
</li>
<li><p>Give your instance a cool <strong>name</strong> like "Webserver".</p>
</li>
<li><p><strong>Choose Your AMI</strong>: Select the Amazon Linux 2 AMI (free-tier eligible). It’s lightweight, fast, and perfect for our use case.</p>
</li>
<li><p><strong>Instance Type</strong>: Go for the t2.micro (it’s free for most use cases, and we love free things, right?).</p>
</li>
<li><p><strong>User Data Script</strong>: Now, this is where things get good. Scroll down to Advanced Details, and in the User Data field, paste in the following script. This script will handle everything from installing Apache to downloading and unzipping a fancy CSS template.</p>
</li>
<li><p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732640127024/ec187a49-61ac-4a98-82c1-c149bcf8ef91.png" alt="user data script" class="image--center mx-auto" width="600" height="400" loading="lazy"></p>
<pre><code class="lang-bash">  <span class="hljs-comment">#!/bin/bash</span>

  <span class="hljs-comment"># Update the instance and install necessary packages</span>
  yum update -y
  yum install -y httpd wget unzip

  <span class="hljs-comment"># Start Apache and enable it to start on boot</span>
  systemctl start httpd
  systemctl <span class="hljs-built_in">enable</span> httpd

  <span class="hljs-comment"># Navigate to the web root directory</span>
  <span class="hljs-built_in">cd</span> /var/www/html

  <span class="hljs-comment"># Download a CSS template directly</span>
  wget https://www.free-css.com/assets/files/free-css-templates/download/page284/built-better.zip

  <span class="hljs-comment"># Unzip the template and move the files to the web root</span>
  unzip built-better.zip -d /var/www/html/
  mv /var/www/html/html/* /var/www/html/

  <span class="hljs-comment"># Clean up unnecessary files</span>
  rm -r /var/www/html/html
  rm built-better.zip

  <span class="hljs-comment"># Restart Apache to apply changes</span>
  systemctl restart httpd
</code></pre>
<ul>
<li><strong>Configure Your Security Group</strong>: You want the world to be able to see your site, right? So, make sure to allow <strong>HTTP</strong> (port 80). This will let your website be accessible to anyone with the link.</li>
</ul>
</li>
</ul>
<ul>
<li><strong>Launch Your Instance</strong>: After double-checking everything, click <strong>Launch</strong>. AWS will ask you to choose a key pair (which you’ll need if you want to SSH into your instance later). If you don’t have one, create a new key pair.</li>
</ul>
<p>    Boom! Your EC2 instance is launching. Grab a snack, it’ll be ready in a few minutes.</p>
<h3 id="heading-step-2-waitthe-script-did-everything-already">Step 2: Wait…The Script Did Everything Already?</h3>
<p>Yes, that’s right! Thanks to the user data script, all the heavy lifting is done for you.</p>
<p>Here’s what just happened behind the scenes:</p>
<ul>
<li><p>Apache Web Server was installed and started.</p>
</li>
<li><p>A CSS template called “Built Better” was downloaded directly into the server.</p>
</li>
<li><p>The template was unzipped and placed in the web directory.</p>
</li>
</ul>
<p>All of this happened while you were sipping your coffee.</p>
<h3 id="heading-step-3-access-your-website">Step 3: Access Your Website</h3>
<p>The exciting part is finally here! Let’s see your website in action.</p>
<ul>
<li><p>Find Your Instance’s Public IP:</p>
<ul>
<li><p>Head to your EC2 Dashboard, and you’ll see your running instance.</p>
<p>  Copy the Public IPv4 Address.</p>
</li>
</ul>
</li>
<li><p>Open Your Browser:</p>
<ul>
<li><p>In the address bar, type: <code>http://your-public-ip</code> (replace <code>your-public-ip</code> with the one you just copied).</p>
</li>
<li><p>Hit enter, and… <strong>Voilà!</strong> Your website is live, looking all professional with the “Built Better” CSS template.</p>
</li>
</ul>
</li>
</ul>
<h2 id="heading-wrapping-up">Wrapping Up</h2>
<p>Let’s take a moment to appreciate what you’ve accomplished:</p>
<ul>
<li><p>Launched an EC2 instance ✔️</p>
</li>
<li><p>Automated the setup using a user data script ✔️</p>
</li>
<li><p>Hosted a slick website using a CSS template ✔️</p>
</li>
</ul>
<p>You’ve just dipped your toes into the world of AWS and cloud hosting. It’s not as intimidating as it sounds, right? If you enjoyed this, keep exploring AWS – the possibilities are endless. Until next time, happy coding and hosting!</p>
<h3 id="heading-want-more">Want more?</h3>
<p>Follow me on Twitter or connect on LinkedIn for more awesome cloud tips and tricks. I’m always sharing helpful content and would love to hear about your cloud journey!</p>
<p>You can follow me on</p>
<ul>
<li><p><a target="_blank" href="https://twitter.com/Kedar__98">Twitter</a></p>
</li>
<li><p><a target="_blank" href="https://www.linkedin.com/in/kedar-makode-9833321ab/?originalSubdomain=in">LinkedIn</a></p>
</li>
</ul>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
