InMotion Hosting Professional Email, powered by Titan, provides a reliable and professional solution for managing your business email. You can easily purchase and set up your email plan directly through your Account Management Panel (AMP).

Note: InMotion Hosting Professional Email is not available for temporary domains.

How to Purchase Professional Email in AMP

Follow these steps to purchase and activate your InMotion Hosting Professional Email plan:

1. Log in to AMP
   Go to the AMP login page and sign in with your account credentials.
2. Access the Marketplace
   In the main navigation menu, click on Marketplace.
3. Find Professional Email
   Under Email/Other, locate InMotion Hosting Email and click Add to Plan.
   
4. Choose Your Email Plan
   Under Add a New InMotion Hosting Email Plan, select your preferred email package by clicking the Choose Email button.
   
5. Configure Your Purchase
   At the checkout screen:
   – Select your domain (must be an active domain).
   – Choose your term length (billing cycle).
   – Specify the number of mailboxes you need.
   
6. Confirm Your Purchase
   Scroll down to the payment section:
   – Select your payment method.
   – Review the order agreement and check the “I AGREE” box.

Next Steps

Once your purchase is complete, your Professional Email plan will be active and ready to configure. You can begin creating mailboxes and setting up your email clients immediately.

For more guidance, see:

• Getting Started with Professional Email
• Managing Professional Email in AMP
• Setting Up DNS Records for Email (MX, SPF, DKIM, DMARC)

You’ve now successfully purchased your Professional Email plan and are ready to enjoy secure, professional communication with Titan-powered email!

One of the most common sources of site performance degradation is poor database optimization. While it is possible to optimize databases by manual inspection, this process may be prohibitively time consuming. To assist with this, MySQL Tuner was designed to make database optimization easier. In this guide, we will explore the basics of tuning MySQL databases with MySQL Tuner in order to optimize your MySQL service for faster queries and load times on your website. Please note that you will need to log into the command line interface as the root user to continue on with this tutorial.

Warning: We recommend only making changes if you have in-depth experience with MySQL services. Otherwise, we recommend contacting our Managed Hosting team or an experienced system administrator or database administrator for further assistance.

When Should You Optimize MySQL Yourself?

If you’re comfortable using the command line and have a working knowledge of MySQL performance metrics, tuning your database with MySQL Tuner can be a great DIY approach. 

However, if your site handles large traffic volumes, runs complex queries, or serves as a business-critical application, it’s best to involve a professional. A single mistake in configuration can lead to data loss, extended downtime, or corrupted tables.

How to Minimize Risk During Optimization

To reduce risk while tuning your MySQL settings:

• Make incremental changes : Adjust one setting at a time and monitor performance.
  
• Document all changes: Keep track of what was modified so you can revert if needed.
  
• Avoid peak traffic hours: Perform optimizations during off-peak times to avoid interrupting user experience.

Backup Before You Begin

Before making any changes to your MySQL configuration, it is critical to perform a full database backup. This ensures you can recover quickly in case something goes wrong. Use tools like mysqldump or automated backups available through your hosting control panel.

Diagnosing Database Performance Issues

Before diving into tuning, it’s important to confirm whether your database is truly causing performance problems. Here’s how to spot the signs and start troubleshooting:

Signs Your Database May Need Optimization:

• Pages take too long to load, especially dynamic content
  
• You notice high server resource usage (CPU or memory spikes)
  
• Database queries are timing out or failing under load
  

Quick Diagnostic Commands:

Run the following from the MySQL CLI to check on performance:

• SHOW PROCESSLIST; – See active queries and their states
  
• SHOW STATUS LIKE ‘Threads%’; – Review thread activity
  
• SHOW VARIABLES LIKE ‘query_cache%’; – Review caching setup
  

These commands offer a quick snapshot of what your MySQL server is doing in real time.

Enabling Slow Query Logging:

To find out which queries are dragging down performance, enable slow query logging:

SET GLOBAL slow_query_log = ‘ON’;

SET GLOBAL long_query_time = 1;

This logs any query taking longer than one second. You can then review the log (usually located in /var/lib/mysql/) to pinpoint which queries need to be optimized or rewritten.

MySQL Tuner

MySQL Tuner is a lightweight script written in Perl that helps analyze the performance of your MySQL or MariaDB database and recommends improvements. It’s commonly used by system administrators and developers to uncover performance bottlenecks and fix inefficiencies, all without having to comb through logs manually.

What Does MySQL Tuner Actually Do?

When you run MySQL Tuner, it performs a wide range of diagnostic checks, including:

• Uptime and performance history: Reviews how long the server has been running and analyzes trends over time
  
• Slow queries:  Flags slow-running SQL statements that may need optimization
  
• InnoDB and MyISAM stats:  Checks for table usage, read/write balance, and index efficiency
  
• Query cache performance:  Analyzes if query caching is working as intended or hurting performance
  
• Temporary table usage:  Highlights excessive use of temporary tables in RAM or on disk
  
• Connection and thread usage: Detects max connections and threading bottlenecks
  
• Security settings: Points out potentially risky configurations like remote root access or empty passwords
  
• Fragmented tables:  Identifies tables that need repairing or optimizing
  

What Does the Output Mean?

Once the scan is complete, MySQL Tuner presents the results in a readable format. The output is broken into different sections, such as, performance metrics, warnings, and recommendations.

Example:

Each line includes:

• A marker like [OK], [!!], or [–] to indicate if the value is ideal, suboptimal, or neutral
  
• A brief stat or percentage to give you context
  
• A suggestion when something looks off
  

How to Use the Recommendations?

Think of the recommendations as a to-do list, but one you should act on carefully:

• Start with the most critical alerts (marked with [!!])
  
• Research unfamiliar recommendations before applying them
  
• Only change server variables you understand, some tweaks might hurt performance if misapplied
  
• Use the suggestions to guide your my.cnf configuration updates
  

MySQL Tuner doesn’t make changes automatically, so you’re always in control. Run the script regularly, especially after major traffic changes or application updates, to keep your database tuned and healthy.

How to Use MySQL Tuner?

Follow these steps to download and run MySQL Tuner on your server:

1. Log in to your server via SSH as the root user.
2. Change to the /usr/src/ directory using the following command:
   cd /usr/src/ 
3. Download the mysqltuner.pl script using the wget command:
   wget https://raw.githubusercontent.com/major/MySQLTuner-perl/master/mysqltuner.pl
4. Run the downloaded script with the following command:

• perl mysqltuner.pl
• Once you run the script, MySQL Tuner will generate a detailed report that highlights current performance and suggests changes to your database configuration.

Key Configuration Areas & Safe Examples:

Below are some of the most common areas MySQL Tuner might flag, along with guidance on how to safely address them:

1. Innodb_buffer_pool_size: This controls how much RAM is allocated for InnoDB data and indexes.
   
   Recommended: Set this to 60–80% of available system memory for a dedicated database server.
   Innodb_buffer_pool_size = 2G 
2. Query_cache_size: Useful for read-heavy workloads (not recommended for InnoDB in high-traffic environments).
   Use only if you’re running mostly MyISAM tables. Set to 0 to disable if you’re using InnoDB.
   query_cache_type = 0

query_cache_size = 0

3. Max_connections: Defines how many simultaneous connections your server can handle.
   Safe default: 100–200 connections. Adjust based on your traffic patterns and available memory.
   
   max_connections = 200

Pro Tip: Test Before You Apply

Before updating your MySQL configuration file (my.cnf or my.ini), make sure to:

• Back up your current config
  
• Restart MySQL after changes
  
• Monitor performance closely after adjustments

If you’re unsure, our Managed Hosting team can review your server and safely apply these recommendations for you.

 Configuration Implementation

Running MySQL Tuner is only half the job. The real value comes from safely implementing its suggestions. Here’s how to bridge the gap between recommendations and real-world performance improvements:

1. Back Up Before You Begin

Before applying any configuration changes:

• Back up your current MySQL config file (usually my.cnf or my.ini)
  cp /etc/my.cnf /etc/my.cnf.bak
• Take a full database backup using tools like mysqldump or your hosting panel’s built-in backup system

This ensures you can revert quickly if something doesn’t go as planned.

2. Test Changes in a Staging Environment

If possible, test changes in a staging or development environment before applying them to your live server. This helps:

• Confirm performance improvements
• Catch issues that might not appear in the Tuner report
• Prevent downtime or data corruption in production

If a staging setup isn’t available, consider applying changes during off-peak hours and monitor closely.

3. Implement Suggestions One Step at a Time

Apply only one or two changes at a time, such as:

• Increasing innodb_buffer_pool_size
  
• Disabling query_cache if not needed
  
• Adjusting max_connections based on usage

After each change, restart MySQL and observe performance.

4. Measure Performance Improvements

After applying changes, use tools like:

• mysqladmin status: Check uptime, threads, queries/sec
  
• SHOW STATUS: Review key performance metrics
  
• top or htop:  Monitor CPU and memory usage
  
• Google PageSpeed Insights / GTmetrix: See if page load times improve

Compare your new stats with the original MySQL Tuner report to verify the impact.

Monitoring and Maintenance

Optimizing your MySQL database isn’t a one-time task. To keep your site running smoothly, it’s important to have a long-term plan for monitoring and maintaining database performance.

1. Set Up Ongoing Monitoring

Use monitoring tools to track performance in real time and catch issues early:

• MySQL Workbench Performance Dashboard
  
• Percona Monitoring and Management (PMM)
  
• Server logs + mysqladmin or SHOW STATUS
  
• Hosting control panel metrics (if available)
  

Set up alerts for:

• High CPU or memory usage
  
• Excessive disk I/O
  
• Long-running queries or connection spikes

2. Perform Regular Maintenance

Keep your database in shape with basic housekeeping tasks:

• Optimize tables regularly (especially if using MyISAM)

OPTIMIZE TABLE your_table_name;

• Update statistics and indexes to help the query planner
• Check for table corruption using:
  mysqlcheck -c database_name
• Purge unnecessary logs or data that slow down queries

These small efforts prevent larger problems down the road.

3. Know When to Re-Optimize

Run MySQL Tuner again when:

• You install major MySQL updates
  
• Your traffic increases significantly
  
• You notice slower page loads or higher server loads
  
• You’ve added or removed major plugins, extensions, or apps

Re-running MySQL Tuner every 3–6 months is a good rule of thumb for growing sites.

4. Prevent Future Performance Drops

Prevent issues before they begin:

• Limit poorly written queries and review slow query logs regularly
  
• Use indexing effectively—missing or unused indexes are a top cause of slowness
  
• Avoid storing unnecessary data in large tables
  
• Keep PHP, CMS, and MySQL updated to the latest stable versions

Experience the Power of a Dedicated Server

Know you will always be able to reach your customers when you need to with reliable and secure Dedicated Hosting. Get industry-leading hardware at an affordable dedicated server price.

DDoS Protection Free Backup Storage 

Query-level Optimization

Even with a well-tuned MySQL server, slow queries can still hurt performance. Query-level optimization focuses on improving how your database retrieves data, making your site faster and more efficient, especially for content-heavy platforms like WordPress.

Use EXPLAIN to Analyze Slow Queries

MySQL’s EXPLAIN command helps you see how MySQL executes a query, so you can identify inefficiencies:

EXPLAIN SELECT * FROM users WHERE email = ‘example@email.com’;

Look for:

• Full table scans means indexes aren’t being used
  
• High row counts indicates the query is pulling too much data
  
• “Using filesort” or “Using temporary” means common performance red flags

Use EXPLAIN to rewrite queries so they use indexes and return fewer rows when possible.

Common Query Optimization Techniques

Some quick improvements to watch for:

Avoid SELECT *: Only select the columns you need

SELECT name, email FROM users;

• Use LIMIT when possible: Especially helpful on large tables
  
• Add WHERE clauses: Reduce unnecessary data scanning
  
• Normalize data: Separate repeatable data into smaller, related tables

Index Creation & Management Basics

Indexes help MySQL find data faster, but they need to be used wisely:

Create indexes on columns used in WHERE, JOIN, and ORDER BY

CREATE INDEX idx_email ON users(email);

• Avoid over-indexing: Too many indexes slow down inserts and take up disk space
• Use SHOW INDEX FROM table_name; to see existing indexes

Review and update indexes periodically as your data grows.

WordPress-Specific Optimization Tips

If you’re running WordPress:

• Limit post revisions. Too many revisions bloat the wp_posts table
  define(‘WP_POST_REVISIONS’, 5);
• Clean up autoloaded data in wp_options table
  Use queries to check for oversized autoloaded options
• Use a caching plugin like W3 Total Cache or WP Super Cache
  This reduces database hits altogether
• Optimize WP_Query. Only request what’s needed, and use custom queries with care

cPanel or Control Web Panel Managed Server Unmetered Bandwidth

Final Thoughts

Congratulations, you are now familiar with tuning MySQL databases for fast queries and load times. 

Whether you’re running a personal site or managing a high-traffic platform, database optimization can make a noticeable difference in speed and stability. Use MySQL Tuner to enhance your website performance today!

Wondering what’s next? If you’re ready to go deeper with optimization:

• Apply MySQL Tuner suggestions slowly and carefully to track what works and build from there
• Re-run diagnostics regularly as your site evolves
• Explore query-level improvements and indexing strategies to fine-tune performance

If you’re dealing with complex configurations, high-traffic environments, or just want peace of mind, let us do the heavy lifting. Our experts will handle your MySQL tuning, backups, security, and performance optimization for you. Learn more about server management from our Dedicated Hosting Product Guide.

Laravel, a popular PHP framework, is known for its simplicity and elegance in web development. However, determining the exact Laravel version in use isn’t always as straightforward as it sounds, especially when juggling multiple environments, legacy codebases, or different deployment pipelines.

With each new release, Laravel introduces enhancements, bug fixes, and exciting features. 

Developers often face challenges when working across different environments (e.g; local, staging, or production) where version inconsistencies can lead to confusing bugs or deployment issues. Managing multiple projects or legacy codebases only adds to the complexity.

Hence, developers must know which version of Laravel they are working with, as this information can affect the compatibility of packages, libraries, and the overall stability of their applications. Failing to keep track of versions can also impact upgrade paths and security patches.

This article will explore various methods to determine the Laravel version installed on your system no matter how simple or complex your setup may be.

You may want to revisit The Laravel Directory Structure for an overview of the key directories and their roles within a Laravel project.

Using the Laravel Artisan Command

One of the most straightforward ways to check the Laravel version is by using the Laravel Artisan command-line tool. Here’s how you can do it:

Using your terminal or command prompt, navigate to your Laravel project’s root directory and run the following command:

php artisan --version

php artisan --version

Use this command when you quickly need to verify which version of Laravel your project is running, especially before installing packages, applying updates, or deploying code to another environment. This command will display the Laravel version of your project.

For example, if you’re integrating a new package that only supports Laravel 10 and above, running php artisan –version lets you confirm compatibility upfront and avoid runtime issues later. It’s also a useful check after cloning a project from GitHub or switching between branches that might use different Laravel versions.

Laravel Framework 10.3.0

Laravel Framework 10.3.0

If you’re using Laravel 9.21 or later, you can also use the command:

php artisan about

php artisan about

This provides a more comprehensive overview of your application’s environment, including the Laravel version, PHP version, environment configuration, cache settings, and more. It’s especially helpful when diagnosing issues or verifying consistency across environments.

Using these commands helps ensure you know exactly what version you’re working with, which is essential for package compatibility and debugging.

Checking the Laravel Framework Application File

Laravel stores information about its version in a file Application.php within the framework’s core directory. You can use the cat command to view the contents of this file.

Navigate to your Laravel project’s root directory. Use the cat command to display the Laravel version:

cat vendor/laravel/framework/src/Illuminate/Foundation/Application.php | grep "const VERSION"

cat vendor/laravel/framework/src/Illuminate/Foundation/Application.php | grep "const VERSION"

This command will output the Laravel version to the console.

It’s especially useful in situations where the Artisan CLI isn’t available. Such as inside minimal Docker containers, broken environments, or CI/CD pipelines where dependencies haven’t fully loaded.

For example, if your application is throwing version-related errors during automated testing and php artisan is failing to run, you can use this file-level method to quickly confirm whether a version mismatch is the root cause. It also helps when auditing legacy codebases or scripts without spinning up the full application.

const VERSION = '10.3.0';

const VERSION = '10.3.0';

Checking the Version Constraints in Composer.json File

Another way to determine the Laravel version is by inspecting the composer.json file in your Laravel project’s root directory. Composer uses the composer.json file to specify project dependencies.

Note that this file doesn’t show the exact version installed. It shows the version constraints defined for Laravel as a dependency.

Navigate to your Laravel project’s root directory. Open the composer.json file, look for the “require” section, and find the entry for Laravel which specifies a version range (e.g., “laravel/framework”: “^10.0”) rather than the precise version currently in use.

   "require": { "php": "^8.1", "laravel/framework": "^10.0", }

   "require": { "php": "^8.1", "laravel/framework": "^10.0", }

In this case, ^10.0 indicates that the project is compatible with Laravel 10.0 and any future minor updates (e.g., 10.1, 10.2), but it does not confirm the exact version currently installed.

Use this method when you need a quick reference to see what Laravel version range the project is expected to work with, especially before pulling changes from a team member or deploying to a new environment.

For example, if you’re debugging a feature that behaves differently across Laravel versions, seeing a constraint like ^10.0 tells you the project isn’t supposed to run Laravel 11. However, to confirm the exact installed version, you’d still need to check composer.lock or run an Artisan command.

Composer.lock Method

Add: composer.lock method – this is the most reliable way to find exact installed versions and is completely missing from your article.

Laravel Version Troubleshooting

Add: Troubleshooting section addressing:

• Why different methods show different versions
• When to use each method
• Common command failures and solutions

Checking the Laravel Version via composer.lock (The Most Reliable Method)

While the composer.json file shows version constraints, thecomposer.lock file is the most reliable place to find the exact Laravel version currently installed in your project. This file records the specific versions of every dependency after Composer completes installation or updates.

When to use it:

Use this method when you need to confirm the precise Laravel version running in your environment, such as during deployment, debugging, or when managing multiple developers’ machines to ensure consistency.

Why it matters:

Using only composer.json  may lead to assumptions about installed versions, especially when version constraints allow minor or patch-level upgrades. The composer.lock file, however, shows the resolved version that’s actually in use, eliminating guesswork and avoiding potential incompatibilities.

Version constraints in composer.json allow for flexibility, but the composer.lock locks your project to exact dependency versions, preventing unexpected upgrades or incompatibilities.

Here’s how to check:

Open the composer.lock file in your project’s root directory and search for laravel/framework. You’ll find an entry like this:

{"name": "laravel/framework", "version": "v10.3.0", ...}

{"name": "laravel/framework", "version": "v10.3.0", ...}

Imagine your CI/CD pipeline fails because it’s running a different Laravel version than your local environment. Checking composer.lock confirms exactly which version Composer installed, allowing you to diagnose and resolve the mismatch quickly.

Laravel Version Troubleshooting

Managing Laravel versions across environments can be confusing because different methods may show different results. Here’s why, when to use each, and common troubleshooting tips.

Why different methods show different versions:

• php artisan –version and php artisan about report the version your application is currently running.
  
• Composer.json lists version constraints, not actual installed versions.
  
• Composer.lock shows the exact installed versions, but if outdated, it might not reflect your live environment.

Use Artisan commands for quick runtime checks, especially in active environments.

• Inspect composer.json when reviewing compatibility requirements or before installing/upgrading dependencies.
  
• Check composer.lock to confirm the exact installed versions, especially when troubleshooting dependency issues.

Common command failures and solutions:

• If php artisan commands fail, ensure dependencies are installed by running composer.install or composer.update.
  
• In broken or minimal environments (e.g., Docker containers), checking the Application.php file version constant or composer.lock might be the only option.
  
• Cache or config issues can cause wrong version info; try clearing caches with php artisan cache:clear or restarting the server.
  
  A developer pulls a project from a repository and runs php artisan –version, but it fails due to missing dependencies. Instead of guessing, they check composer.lock to find the exact Laravel version and run composer install to sync dependencies, resolving the issue quickly.

Conclusion:

Knowing which version of Laravel is installed in your project is crucial for maintaining compatibility with packages and libraries, and keeping your application up-to-date with the latest features and security patches. By using the Laravel Artisan command, inspecting the Application.php file, or checking the composer.json file, you can easily determine the Laravel version you are working with. This information will help you make informed decisions when developing and maintaining your Laravel applications.

Automation is transforming how you run your business, and platforms like n8n are at the forefront of this shift. Whether you’re prototyping a new idea, building a minimum viable product (MVP), or connecting services for large-scale, mission-critical workflows, n8n’s open-source, no-code platform empowers you to create seamless automation. From crafting viral video content to managing massive outbound messaging campaigns, n8n’s flexibility makes it a go-to tool for solutions engineers and vibe coders alike. By self-hosting n8n on InMotion Hosting’s Virtual Private Server (VPS) plans, which support Docker, you gain full control over your workflows, data privacy, and customization without the recurring costs of cloud-based alternatives.

In this guide, you’ll learn how to self-host n8n using Docker on InMotion Hosting’s VPS plans. We’ll walk you through the setup process step-by-step, highlight common issues users face when self-hosting n8n, and provide practical workarounds tailored to InMotion Hosting’s infrastructure. By the end, you’ll have a secure, fully functional n8n instance ready to automate your workflows.

Why Self-Host n8n Instead of Using Cloud Solutions

n8n Cloud imposes significant limitations that can stunt your automation growth. Their Starter plan restricts you to just 2,500 workflow executions per month with only 5 active workflows, while their Pro plan caps you at 10,000 executions with 15 active workflows. For businesses running complex automation campaigns, these limits become bottlenecks quickly.

InMotion Hosting’s VPS Hosting plans eliminate these artificial constraints entirely. Your only limits are the server resources you choose, giving you the freedom to run unlimited workflows with unlimited executions. This translates to substantial cost savings for high-volume operations.

Consider a business running automated outbound messaging campaigns. With n8n Cloud’s Pro plan at $50 monthly, you’re capped at 10,000 executions. If your campaign generates 15,000 message sends per month, you’d need to upgrade to Enterprise pricing. With InMotion’s VPS plans starting at competitive rates, you get unlimited executions plus full control over your data and infrastructure.

The technical advantages extend beyond cost. Self-hosting provides complete customization freedom, allowing you to install custom nodes, modify configurations, and integrate with internal systems that cloud solutions can’t access. You maintain data sovereignty, crucial for businesses handling sensitive information or operating under strict compliance requirements.

Pre-Installation Planning and Requirements

Before diving into the technical setup, proper planning prevents the common pitfalls that derail many n8n self-hosting attempts. Based on community feedback and our experience supporting customers, most deployment failures stem from inadequate preparation rather than technical complexity.

Prerequisites for Self-Hosting n8n

Before you begin, ensure your InMotion Hosting VPS meets the minimum requirements for running n8n:

• Operating System: Ubuntu 20.04 or 22.04
• Hardware: At least 4 vCPU and 8GB RAM for basic setups; 8 vCPU and 16GB RAM recommended for production environments.
• Docker: Pre-installed on InMotion Hosting’s VPS plans, but you’ll need to verify it’s active.
• Domain Name (Optional): A domain (e.g., n8n.yourdomain.com) for easier access and SSL setup.
• SSH Access: Access to your VPS via SSH (default port 22 on InMotion Hosting servers).
• Basic Tools: Familiarity with SSH (via Terminal on Mac/Linux or PuTTY on Windows) and basic Linux commands.

InMotion Hosting’s VPS plans are Docker compatible, eliminating one of the most common setup hurdles. The minimum requirements for a stable n8n deployment include 2GB RAM, though we recommend starting with 4GB. CPU requirements are modest – even a single-core VPS can handle moderate automation loads, but multi-core configurations provide better performance for concurrent workflow executions.

Storage needs vary dramatically based on your workflow complexity and data retention requirements. Plan for at least 10GB for the base installation, but factor in database growth if you’re storing execution history or handling file operations. InMotion’s VPS plans offer scalable storage options, allowing you to expand as your automation needs grow.

Network considerations matter more than most realize. n8n workflows often involve API calls, webhook receivers, and file transfers. Ensure your VPS plan includes sufficient bandwidth for your expected traffic patterns. InMotion’s network infrastructure provides reliable connectivity essential for webhook-dependent workflows.

If you don’t yet have a VPS, InMotion Hosting offers plans starting with 4 vCPU for small projects, with higher-tier options available for more demanding workflows. Dedicated Servers are also available with Docker support for enterprise-scale deployments.

Security Planning and SSH Configuration

InMotion Hosting VPS servers use port 22 as the default SSH port, which is open by default. While this simplifies initial access, security best practices recommend changing to a non-standard port to mitigate automated attacks. This change requires opening the new port in your firewall (such as APF or CSF), editing /etc/ssh/sshd_config to specify the new port, and restarting the SSH service for changes to take effect.

Document your security configurations during setup. Many users struggle later when they forget custom SSH ports or firewall rules, leading to lockouts during maintenance windows. Create a secure note with your server access details, custom ports, and emergency access procedures.

Plan your SSL certificate strategy early. n8n requires HTTPS for production use, and webhook integrations demand valid certificates. Whether you choose Let’s Encrypt automated certificates or custom SSL implementations, factor this into your initial setup timeline.

Step-by-Step Guide to Self-Hosting n8n with Docker

Follow these detailed steps to set up n8n on your InMotion Hosting VPS using Docker. This guide assumes you’re using an Ubuntu-based VPS with Docker pre-installed.

Step 1: Connect to Your VPS

1. Access Your VPS via SSH: Log in to your InMotion Hosting account and navigate to the VPS dashboard in cPanel or AMP. Find your server’s IP address and SSH credentials.
   • Open a terminal (Mac/Linux) or PuTTY (Windows).
   • Run: ssh root@your_server_ip (replace your_server_ip with your VPS IP).
   • Enter your root password when prompted.
2. Update Your System: Ensure your server is up to date to avoid compatibility issues.
   • Run: apt update && apt upgrade -y
   • This updates package lists and installs the latest security patches.

Step 2: Verify Docker Installation

InMotion Hosting’s VPS plans come with Docker pre-installed, but you should confirm it’s active.

1. Check Docker Version: Run docker --version to verify Docker is installed.
   • Expected output: Docker version 20.x.x or similar.
2. Start Docker Service: If Docker isn’t running, start it with:
   • systemctl start docker
   • Enable it to run on boot: systemctl enable docker
3. Test Docker: Run docker run hello-world to confirm Docker is functioning. You should see a confirmation message.

Step 3: Install n8n Using Docker

n8n recommends using Docker for self-hosted deployments due to its simplicity and portability. We’ll use Docker Compose for persistent data storage and easier configuration.

1. Install Docker Compose:
   • Check if Docker Compose is installed: docker-compose --version
   • If not installed, install it: apt install docker-compose -y
2. Create a Docker Compose File:
   • Create a directory for n8n: mkdir ~/n8n && cd ~/n8n
   • Create a file named docker-compose.yml: nano docker-compose.yml
   • Paste the following configuration (from n8n’s official documentation):

version: "3"
services:
  n8n:
    image: n8nio/n8n
    ports:
      - "5678:5678"
    environment:
      - N8N_BASIC_AUTH_ACTIVE=true
      - N8N_BASIC_AUTH_USER=your_username
      - N8N_BASIC_AUTH_PASSWORD=your_password
      - N8N_HOST=yourdomain.com
      - N8N_PORT=5678
      - WEBHOOK_URL=https://yourdomain.com/
      - GENERIC_TIMEZONE=UTC
    volumes:
      - ~/.n8n:/home/node/.n8n

version: "3"
services:
  n8n:
    image: n8nio/n8n
    ports:
      - "5678:5678"
    environment:
      - N8N_BASIC_AUTH_ACTIVE=true
      - N8N_BASIC_AUTH_USER=your_username
      - N8N_BASIC_AUTH_PASSWORD=your_password
      - N8N_HOST=yourdomain.com
      - N8N_PORT=5678
      - WEBHOOK_URL=https://yourdomain.com/
      - GENERIC_TIMEZONE=UTC
    volumes:
      - ~/.n8n:/home/node/.n8n

• Replace your_username, your_password, and yourdomain.com with your desired credentials and domain (or server IP if no domain is used).
• Save and exit: Press Ctrl+O, Enter, then Ctrl+X.

3. Set File Permissions:
   • Ensure the .n8n directory has correct permissions: chown -R 1000:1000 ~/.n8n && chmod -R 755 ~/.n8n
4. Start n8n:
   • Run: docker-compose up -d
   • This starts n8n in detached mode. Verify it’s running: docker ps

Step 4: Access the n8n Dashboard

1. Open n8n in Your Browser:
   • Navigate to http://your_server_ip:5678 or https://yourdomain.com if you’ve set up a domain and SSL.
   • Log in with the username and password defined in the docker-compose.yml file.
2. Complete Setup:
   • Follow the on-screen instructions to create an n8n owner account.
   • You’ll land on the n8n dashboard, where you can start building workflows.

Step 5: Secure Your n8n Instance

Security is critical when self-hosting n8n, as misconfigurations can expose your workflows to the internet. InMotion Hosting’s VPS servers use port 22 for SSH by default, but you’ll need to secure both SSH and n8n.

1. Change the Default SSH Port:
   • Open the SSH configuration file: nano /etc/ssh/sshd_config
   • Find the line #Port 22 and change it to a non-standard port (e.g., Port 2222).
   • Save and exit.
   • Open the new port in the firewall:
     ufw allow 2222/tcp
ufw deny 22
ufw enable
   • Restart the SSH service: systemctl restart sshd
2. Set Up SSL for n8n:
   • Obtain an SSL certificate using Let’s Encrypt:
     apt install certbot python3-certbot-nginx -y
certbot --nginx -d yourdomain.com
   • Update the docker-compose.yml file to use HTTPS by setting WEBHOOK_URL=https://yourdomain.com/.
   • Restart n8n: docker-compose down && docker-compose up -d
3. Restrict n8n Access:
   • Limit access to n8n by binding it to a private network or specific IP:
     • Edit docker-compose.yml to add network_mode: host and bind to 127.0.0.1:5678.
     • Use a reverse proxy like Nginx to manage external access securely.

Complete Docker Compose Configuration

Create your docker-compose.yml file with the following production-ready configuration.

This configuration addresses several common deployment failures. The health check ensures PostgreSQL is ready before n8n attempts connections. Traefik handles SSL certificate automation, eliminating manual certificate management. Volume mounts provide data persistence across container restarts.

version: '3.8'

services:
  traefik:
    image: traefik:v2.9
    restart: unless-stopped
    command:
      - --api=true
      - --api.insecure=true
      - --providers.docker=true
      - --providers.docker.exposedbydefault=false
      - --entrypoints.websecure.address=:443
      - --certificatesresolvers.mytlschallenge.acme.tlschallenge=true
      - --certificatesresolvers.mytlschallenge.acme.email=${EMAIL}
      - --certificatesresolvers.mytlschallenge.acme.storage=/letsencrypt/acme.json
    ports:
      - 443:443
      - 80:80
    volumes:
      - traefik_data:/letsencrypt
      - /var/run/docker.sock:/var/run/docker.sock:ro

  n8n:
    image: n8nio/n8n:latest
    restart: unless-stopped
    environment:
      - GENERIC_TIMEZONE=${GENERIC_TIMEZONE}
      - TZ=${GENERIC_TIMEZONE}
      - N8N_HOST=${SUBDOMAIN}.${DOMAIN_NAME}
      - N8N_PORT=443
      - N8N_PROTOCOL=https
      - NODE_ENV=production
      - WEBHOOK_URL=https://${SUBDOMAIN}.${DOMAIN_NAME}/
      - N8N_BASIC_AUTH_ACTIVE=${N8N_BASIC_AUTH_ACTIVE}
      - N8N_BASIC_AUTH_USER=${N8N_BASIC_AUTH_USER}
      - N8N_BASIC_AUTH_PASSWORD=${N8N_BASIC_AUTH_PASSWORD}
      - DB_TYPE=${DB_TYPE}
      - DB_POSTGRESDB_DATABASE=${DB_POSTGRESDB_DATABASE}
      - DB_POSTGRESDB_HOST=${DB_POSTGRESDB_HOST}
      - DB_POSTGRESDB_PORT=${DB_POSTGRESDB_PORT}
      - DB_POSTGRESDB_USER=${DB_POSTGRESDB_USER}
      - DB_POSTGRESDB_PASSWORD=${DB_POSTGRESDB_PASSWORD}
    volumes:
      - n8n_data:/home/node/.n8n
      - ./local-files:/files
    labels:
      - traefik.enable=true
      - traefik.http.routers.n8n.rule=Host(`${SUBDOMAIN}.${DOMAIN_NAME}`)
      - traefik.http.routers.n8n.tls=true
      - traefik.http.routers.n8n.entrypoints=websecure
      - traefik.http.routers.n8n.tls.certresolver=mytlschallenge
    depends_on:
      - db
      - traefik

  db:
    image: postgres:13
    restart: unless-stopped
    environment:
      - POSTGRES_USER=${DB_POSTGRESDB_USER}
      - POSTGRES_PASSWORD=${DB_POSTGRESDB_PASSWORD}
      - POSTGRES_DB=${DB_POSTGRESDB_DATABASE}
    volumes:
      - db_data:/var/lib/postgresql/data
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U ${DB_POSTGRESDB_USER} -d ${DB_POSTGRESDB_DATABASE}"]
      interval: 10s
      timeout: 5s
      retries: 5

volumes:
  traefik_data:
  n8n_data:
  db_data:

version: '3.8'

services:
  traefik:
    image: traefik:v2.9
    restart: unless-stopped
    command:
      - --api=true
      - --api.insecure=true
      - --providers.docker=true
      - --providers.docker.exposedbydefault=false
      - --entrypoints.websecure.address=:443
      - --certificatesresolvers.mytlschallenge.acme.tlschallenge=true
      - --certificatesresolvers.mytlschallenge.acme.email=${EMAIL}
      - --certificatesresolvers.mytlschallenge.acme.storage=/letsencrypt/acme.json
    ports:
      - 443:443
      - 80:80
    volumes:
      - traefik_data:/letsencrypt
      - /var/run/docker.sock:/var/run/docker.sock:ro

  n8n:
    image: n8nio/n8n:latest
    restart: unless-stopped
    environment:
      - GENERIC_TIMEZONE=${GENERIC_TIMEZONE}
      - TZ=${GENERIC_TIMEZONE}
      - N8N_HOST=${SUBDOMAIN}.${DOMAIN_NAME}
      - N8N_PORT=443
      - N8N_PROTOCOL=https
      - NODE_ENV=production
      - WEBHOOK_URL=https://${SUBDOMAIN}.${DOMAIN_NAME}/
      - N8N_BASIC_AUTH_ACTIVE=${N8N_BASIC_AUTH_ACTIVE}
      - N8N_BASIC_AUTH_USER=${N8N_BASIC_AUTH_USER}
      - N8N_BASIC_AUTH_PASSWORD=${N8N_BASIC_AUTH_PASSWORD}
      - DB_TYPE=${DB_TYPE}
      - DB_POSTGRESDB_DATABASE=${DB_POSTGRESDB_DATABASE}
      - DB_POSTGRESDB_HOST=${DB_POSTGRESDB_HOST}
      - DB_POSTGRESDB_PORT=${DB_POSTGRESDB_PORT}
      - DB_POSTGRESDB_USER=${DB_POSTGRESDB_USER}
      - DB_POSTGRESDB_PASSWORD=${DB_POSTGRESDB_PASSWORD}
    volumes:
      - n8n_data:/home/node/.n8n
      - ./local-files:/files
    labels:
      - traefik.enable=true
      - traefik.http.routers.n8n.rule=Host(`${SUBDOMAIN}.${DOMAIN_NAME}`)
      - traefik.http.routers.n8n.tls=true
      - traefik.http.routers.n8n.entrypoints=websecure
      - traefik.http.routers.n8n.tls.certresolver=mytlschallenge
    depends_on:
      - db
      - traefik

  db:
    image: postgres:13
    restart: unless-stopped
    environment:
      - POSTGRES_USER=${DB_POSTGRESDB_USER}
      - POSTGRES_PASSWORD=${DB_POSTGRESDB_PASSWORD}
      - POSTGRES_DB=${DB_POSTGRESDB_DATABASE}
    volumes:
      - db_data:/var/lib/postgresql/data
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U ${DB_POSTGRESDB_USER} -d ${DB_POSTGRESDB_DATABASE}"]
      interval: 10s
      timeout: 5s
      retries: 5

volumes:
  traefik_data:
  n8n_data:
  db_data:

Common Issues and Workarounds

Self-hosting n8n can present challenges, especially for users new to server management. Based on community feedback and web research, here are common issues and workarounds tailored to InMotion Hosting’s VPS plans:

1. Steep Learning Curve for Server Setup:
   • Issue: Users often struggle with command-line interfaces, Docker setup, and server configuration due to limited technical expertise.
   • Workaround: InMotion Hosting’s VPS plans simplify this with pre-installed Docker. Use the one-click Docker Compose setup above to avoid manual Node.js installations. InMotion Hosting’s support team can assist with basic VPS troubleshooting, reducing the learning curve.
2. Security Risks from Exposed Ports:
   • Issue: By default, n8n runs on port 5678 without authentication, potentially exposing your instance to attackers if your VPS has a public IP.
   • Workaround: Enable basic authentication in the docker-compose.yml file as shown above. Change the SSH port and use InMotion Hosting’s firewall (via ufw) to restrict access to trusted IPs. Set up a reverse proxy with NGINX and SSL to encrypt traffic.
3. Performance Bottlenecks with Growing Workflows:
   • Issue: As workflows scale, a basic VPS may struggle with CPU or memory limitations, causing slowdowns or crashes.
   • Workaround: Start with InMotion Hosting’s 4 vCPU plan. You can also configure PostgreSQL for increased connection pooling and memory allocation. Add these parameters to your database configuration:

db:
  image: postgres:13
  command: postgres -c shared_preload_libraries=pg_stat_statements -c pg_stat_statements.track=all -c max_connections=200
  environment:
    - POSTGRES_USER=${DB_POSTGRESDB_USER}
    - POSTGRES_PASSWORD=${DB_POSTGRESDB_PASSWORD}
    - POSTGRES_DB=${DB_POSTGRESDB_DATABASE}

db:
  image: postgres:13
  command: postgres -c shared_preload_libraries=pg_stat_statements -c pg_stat_statements.track=all -c max_connections=200
  environment:
    - POSTGRES_USER=${DB_POSTGRESDB_USER}
    - POSTGRES_PASSWORD=${DB_POSTGRESDB_PASSWORD}
    - POSTGRES_DB=${DB_POSTGRESDB_DATABASE}

4. Lack of Collaboration Features:
   • Issue: The n8n Community Edition lacks built-in collaboration tools, making it hard for teams to co-edit workflows.
   • Workaround: Use InMotion Hosting’s VPS to host a Git repository for manual version control. Share workflow JSON files among team members via secure channels. For advanced features, consider n8n’s Enterprise Edition on a Dedicated Server.
5. Maintenance Overhead:
   • Issue: Keeping n8n, Docker, and the OS updated requires ongoing effort, which can be time-consuming.
   • Workaround: Automate updates using a cron job:
     crontab -e 0 2 * * * apt update && apt upgrade -y && docker-compose -f ~/n8n/docker-compose.yml pull && docker-compose -f ~/n8n/docker-compose.yml up -d
     This runs daily updates at 2 AM. InMotion Hosting’s 99.9% uptime guarantee ensures minimal disruption during maintenance.

Benefits of Self-Hosting n8n with InMotion Hosting

By self-hosting n8n on InMotion Hosting’s VPS, you unlock several advantages:

• Cost Savings: Pay for powerful yet flexible VPS hosting and run unlimited workflows, unlike cloud plans with per-execution fees.
• Data Control: Keep sensitive data on your server, meeting compliance needs for industries like healthcare or finance.
• Customization: Build custom nodes to integrate with internal systems or APIs, leveraging n8n’s extensibility.
• Performance: InMotion Hosting’s high-performance CPUs and SSD storage ensure smooth workflow execution, even for complex tasks like AI-driven content creation or messaging campaigns.

Wrap Up

With n8n running on your InMotion Hosting VPS, you’re ready to automate tasks like syncing databases, managing social media, or building AI-powered workflows. Explore n8n’s node-based interface to connect over 400 applications, from Google Sheets to Slack. If you hit roadblocks, InMotion Hosting’s support team and n8n’s community forums are valuable resources.

To get started, sign up for an InMotion Hosting VPS Hosting plan, follow the steps above, and begin automating your workflows today. See how InMotion’s infrastructure provides the flexibility and performance your organization needs to automate efficiently and scale effectively.

Frequently Asked Questions

How much does it cost to self-host n8n compared to n8n Cloud?

Self-hosting n8n on InMotion’s VPS plans typically costs significantly less for high-volume operations. n8n Cloud’s Pro plan costs $50 monthly for 10,000 executions and 15 active workflows. With unlimited executions on a VPS, businesses running 20,000+ monthly executions can save hundreds of dollars while gaining complete control over their infrastructure.

Can I run multiple n8n instances on one VPS?

Yes, you can run multiple n8n instances on a single InMotion Hosting VPS by using different ports or domains for each instance. Create separate Docker Compose files (e.g., docker-compose-instance1.yml, docker-compose-instance2.yml) with unique port mappings (e.g., 5678:5678 for one, 5679:5679 for another). Ensure your VPS has enough resources. InMotion Hosting’s support can help verify resource allocation to prevent conflicts.

What if I encounter Docker-related errors during setup?

If Docker fails to start or n8n doesn’t run, check the Docker service status: systemctl status docker. Ensure Docker Compose is installed (docker-compose --version). If the n8n container crashes, view logs with docker logs <container_id> (find the container ID with docker ps -a). Common issues include incorrect permissions on the ~/.n8n directory or port conflicts. Fix permissions with chown -R 1000:1000 ~/.n8n and verify port 5678 is free with netstat -tuln | grep 5678. InMotion Hosting’s support team can assist with Docker troubleshooting.

How do I back up my n8n workflows?

To back up your n8n workflows, export them as JSON files from the n8n dashboard (Workflows > Download). Store these files securely on your InMotion Hosting VPS or an external service like Google Drive. For persistent data, the ~/.n8n directory (mapped in the Docker Compose file) contains your database and configurations. Back it up regularly with:

tar -czf n8n_backup_$(date +%F).tar.gz ~/.n8n

tar -czf n8n_backup_$(date +%F).tar.gz ~/.n8n

Copy the backup to a secure location using scp or InMotion Hosting’s file manager. Automate backups with a cron job for consistency.

How often should I update my self-hosted n8n installation?

n8n releases new versions weekly, but you don’t need to update immediately. Establish a monthly update schedule for minor versions and test updates in a staging environment before applying to production. Monitor the n8n community forums and GitHub releases for security updates that require immediate attention.

How do I scale my n8n deployment as my automation needs grow?

InMotion’s VPS plans support vertical scaling by adding CPU, RAM, and storage resources without service interruption. For extreme scale requirements, implement n8n’s queue mode with multiple worker containers. This horizontal scaling approach distributes workflow execution across multiple processes, supporting virtually unlimited automation capacity.

Want to rank higher in Google search results? This comprehensive SEO checklist covers every critical element you need to dominate search rankings in 2025. From technical foundations to content strategy, we’ll walk you through proven tactics that actually move the needle.

Search engine optimization isn’t about quick fixes or magic bullets. It’s about systematically addressing the factors that Google values most. You’ll learn how to audit your current site, fix critical issues, and implement a sustainable SEO strategy that delivers long-term results.

With this comprehensive SEO checklist, you’ll learn how to:

• Build a rock-solid technical foundation that search engines love
• Create content that ranks and converts
• Secure high-quality backlinks that boost your authority
• Track your progress and make data-driven decisions

Let’s jump right in!

SEO Foundation Setup

Before diving into content creation or link building, you need to establish the fundamental infrastructure that makes everything else possible. These one-time setup tasks create the foundation for all your future SEO efforts.

1. Set Up Essential SEO Tools

Your SEO success depends on having the right tools to monitor performance and identify opportunities. Start with these free essentials:

Google Search Console is your direct line to Google’s view of your website. It shows you which keywords drive traffic, identifies crawl errors, and alerts you to manual penalties. Connect it to your site by adding the HTML tag to your header or uploading the verification file to your root directory.

Google Analytics 4 tracks user behavior and traffic sources. You’ll see which pages bring the most visitors, how long they stay, and which content converts best. Set up goals to track conversions and use the data to inform your content strategy.

Bing Webmaster Tools shouldn’t be overlooked. While Bing has smaller market share, it often converts better for certain industries. The setup process mirrors Google Search Console and takes just a few minutes.

For WordPress sites, install a comprehensive SEO plugin like Yoast or RankMath. These plugins handle technical SEO elements like XML sitemaps, meta tag optimization, and structured data markup. They also provide real-time content analysis as you write.

2. Configure Your Site’s Technical Foundation

Technical SEO creates the framework that allows search engines to crawl, understand, and rank your content effectively.

HTTPS Implementation is non-negotiable in 2025. Google considers HTTPS a ranking factor, and browsers flag non-secure sites as dangerous. Most hosting providers offer free SSL certificates through Let’s Encrypt. Look for the padlock icon in your browser’s address bar to confirm proper implementation.

XML Sitemap Creation tells search engines which pages to crawl and index. WordPress SEO plugins generate these automatically, but you can also create them manually using tools like Screaming Frog. Submit your sitemap to Google Search Console and include the location in your robots.txt file.

Robots.txt Optimization controls which parts of your site search engines can access. Create a clean robots.txt file that blocks low-value pages like admin areas while allowing access to important content. Include your sitemap location and avoid accidentally blocking critical pages.

URL Structure Optimization improves both user experience and search engine understanding. Use descriptive, keyword-rich URLs that clearly indicate page content. For WordPress sites, change the permalink structure from the default “?p=123” format to “Post name” in Settings > Permalinks.

Hosting Infrastructure Selection forms the foundation of your entire SEO strategy. Your hosting environment directly impacts Core Web Vitals, server response times, and search engine crawling efficiency. Poor hosting can undermine even the best content and optimization efforts, while high-performance hosting creates competitive advantages that are increasingly crucial in 2025.

Modern search engines prioritize technical performance signals that only quality hosting can deliver. Key hosting factors that affect SEO include server uptime (aim for 99.99% guarantees), NVMe storage for faster data retrieval, sufficient RAM for handling traffic spikes, and strategic server locations that reduce Time To First Byte (TTFB) globally. Additionally, hosting providers that understand SEO provide essential features like full .htaccess access, advanced caching mechanisms, Web Application Firewalls for security, and dedicated IP addresses that maintain trust signals with search engines.

The choice between shared, VPS, and dedicated server hosting significantly impacts your SEO potential. Shared hosting often creates resource competition that degrades Core Web Vitals scores, while VPS and dedicated solutions provide the isolated resources and server-level control needed for technical SEO optimization. As InMotion Hosting’s SEO specialists note, “hosting that can render pages quickly is no longer optional for competitive rankings” in the AI-driven search landscape of 2025.

3. Ensure Mobile-First Excellence

Google switched to mobile-first indexing, meaning it primarily uses the mobile version of your site for ranking decisions. Test your site’s mobile usability in Google Search Console and address any issues immediately.

Key mobile optimization factors include:

• Responsive design that adapts to all screen sizes
• Fast loading times on mobile connections
• Touch-friendly navigation and buttons
• Readable text without zooming
• Properly sized images and media

Use Google’s Mobile-Friendly Test tool to identify specific issues and Chrome’s DevTools to preview how your site appears on different devices.

Keyword Research and Strategy

Effective keyword research forms the backbone of successful SEO. You need to understand what your audience searches for and create content that matches their intent.

4. Identify Your Target Market and Search Intent

Before researching keywords, define your ideal customer. What problems do they face? What language do they use? How do they search for solutions?

Search intent falls into four categories:

• Informational: Users seeking knowledge (“how to optimize images”)
• Navigational: Users looking for specific sites (“InMotion Hosting login”)
• Transactional: Users ready to buy (“buy WordPress hosting”)
• Commercial: Users researching before purchasing (“best web hosting 2025”)

Analyze top-ranking pages for your target keywords to understand what type of content Google favors. If product pages dominate, create commercial content. If blog posts rank highest, focus on informational content.

5. Discover Long-Tail Keywords with High Potential

Long-tail keywords are longer, more specific phrases that typically have lower competition but higher conversion rates. They’re easier to rank for and often indicate stronger purchase intent.

Use Google’s autocomplete feature to find related searches. Start typing your main keyword and note the suggestions. These represent actual user queries with decent search volume.

The “People Also Ask” section in search results reveals additional long-tail opportunities. These questions represent real user intent and often make excellent content topics.

Tools like Semrush’s Keyword Magic Tool or Ahrefs’ Keywords Explorer can uncover thousands of long-tail variations. Filter by search volume and keyword difficulty to find the sweet spot between traffic potential and ranking feasibility.

6. Analyze Competitor Keywords

Your competitors have already done keyword research. Learn from their successes and identify gaps in their strategy.

Use competitive analysis tools to see which keywords drive traffic to competitor sites. Look for:

• High-volume keywords they rank for but you don’t
• Keywords where they rank poorly despite relevance
• Content gaps in their keyword coverage
• Seasonal trends in their keyword performance

This analysis reveals opportunities to create better content around proven keywords and identify underserved topics in your niche.

Technical SEO Essentials

Technical SEO ensures search engines can crawl, index, and understand your content. Even the best content won’t rank if technical issues prevent proper indexing.

7. Optimize Site Speed and Core Web Vitals

Page speed directly impacts both user experience and search rankings. Google’s Core Web Vitals measure three key performance metrics:

Largest Contentful Paint (LCP) measures loading performance. Aim for under 2.5 seconds. Optimize by:

• Compressing images and using next-gen formats like WebP
• Minimizing CSS and JavaScript files
• Using a content delivery network (CDN)
• Choosing optimized hosting with SSD storage

First Input Delay (FID) measures interactivity. Target under 100 milliseconds by:

• Reducing JavaScript execution time
• Removing unused plugins and scripts
• Using efficient coding practices
• Implementing lazy loading for images

Cumulative Layout Shift (CLS) measures visual stability. Keep it under 0.1 by:

• Setting explicit dimensions for images and videos
• Avoiding dynamically injected content
• Using web fonts properly
• Reserving space for ads and embeds

Use Google PageSpeed Insights to identify specific optimization opportunities and track improvements over time.

8. Fix Crawl Errors and Indexing Issues

Search engines must be able to access and understand your content. Common crawl errors include:

404 Errors occur when pages can’t be found. Use Google Search Console to identify broken links and either fix them or redirect them to relevant pages. Internal link audits help prevent future 404 errors.

Redirect Chains slow down crawling and can cause indexing issues. Use tools like Screaming Frog to identify redirect chains and update them to point directly to final destinations.

Duplicate Content confuses search engines and dilutes ranking signals. Implement canonical tags to indicate the preferred version of duplicate content. For WordPress sites, ensure category and tag pages don’t create unnecessary duplication.

Blocked Resources prevent proper page rendering. Check that CSS, JavaScript, and image files aren’t blocked by robots.txt. Use Google Search Console’s “Fetch as Google” feature to see how search engines view your pages.

9. Implement Structured Data Markup

Structured data helps search engines understand your content’s context and can trigger rich snippets in search results.

Schema.org Markup provides standardized vocabulary for describing content. Common schema types include:

• Organization markup for company information
• Article markup for blog posts and news
• Product markup for e-commerce items
• Review markup for ratings and testimonials
• FAQ markup for question-and-answer content

Most SEO plugins can generate basic schema markup automatically. For advanced implementation, use Google’s Structured Data Markup Helper or Schema.org documentation.

Rich Snippets can dramatically improve click-through rates. Recipe markup shows cooking time and ratings. Review markup displays star ratings. Event markup shows dates and locations. Product markup includes prices and availability.

Test your structured data using Google’s Rich Results Test tool to ensure proper implementation and eligibility for rich snippets.

Preparing for AI-Driven Search

The rise of AI-powered search tools like ChatGPT, Claude, and Gemini is changing how content gets discovered and consumed. These systems crawl websites differently than traditional search engines, and understanding their behavior is crucial for 2025 SEO success.

9.1. Understanding AI SEO Crawlers

AI systems are already crawling websites for multiple purposes:

• Training data collection for improving language models
• Real-time information gathering for answering current queries
• Parallel page crawls when users request research on specific topics
• Specific content requests for summarization and analysis

These crawlers convert your web pages into machine-readable formats, typically Markdown, which allows AI systems to process and understand your content more effectively. The crawling patterns are more intensive than traditional search engines, often making rapid parallel requests to gather comprehensive information quickly.

9.2. Optimize Your Robots.txt for AI Crawlers

Your robots.txt file controls which parts of your site AI crawlers can access. Major AI providers like OpenAI and Anthropic respect robots.txt directives, making this file crucial for managing AI access to your content.

Key AI User-Agents to Consider:

• OpenAI-GPT (OpenAI’s crawler)
• Claude-Web (Anthropic’s crawler)
• Google-Extended (Google’s AI training crawler)
• Bard-Google (Google’s AI assistant crawler)

Sample robots.txt configuration:

User-agent: *
Allow: /
Sitemap: https://yoursite.com/sitemap.xml

User-agent: OpenAI-GPT
Allow: /blog/
Allow: /resources/
Disallow: /admin/
Disallow: /private/

User-agent: Claude-Web
Allow: /
Disallow: /checkout/
Disallow: /account/

If you want your content included in AI training and real-time responses, ensure your robots.txt allows these crawlers access to your valuable content while protecting sensitive areas.

9.3. Sitemap.xml for AI Discovery

AI crawlers heavily rely on sitemap.xml files to discover and index your content efficiently. Unlike traditional search engines that crawl links, AI systems often start with your sitemap to understand your site’s complete structure.

AI-Optimized Sitemap Best Practices:

• Include all important pages you want AI systems to know about
• Use priority tags to indicate your most valuable content
• Include lastmod dates to help AI crawlers identify updated content
• Add multiple sitemaps for different content types (posts, pages, products)
• Ensure your sitemap is referenced in your robots.txt file

Example sitemap structure for AI crawlers:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yoursite.com/ultimate-guide-topic</loc>
    <lastmod>2025-01-15</lastmod>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://yoursite.com/comprehensive-resource</loc>
    <lastmod>2025-01-10</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

9.4. The Emerging llms.txt Standard

A new standard called llms.txt is emerging specifically for AI crawler guidance. While still experimental, forward-thinking websites are implementing this file to provide specific instructions for AI systems.

What llms.txt contains:

• Specific permissions for AI training data usage
• Guidelines for how AI systems should attribute your content
• Instructions for handling different types of content
• Preferred crawling frequency and methods

Sample llms.txt file:

# LLMs.txt - AI Crawler Guidelines
# This file provides guidance for AI systems crawling this website

# Training Data Usage
Allow: /blog/
Allow: /resources/
Allow: /guides/
Disallow: /customer-data/
Disallow: /private/

# Attribution Requirements
Attribution: Required for all content
Contact: seo@yoursite.com
License: CC BY-SA 4.0

# Crawling Preferences
Crawl-delay: 2
Preferred-format: markdown

While not all AI crawlers respect llms.txt yet, implementing it shows you’re prepared for the future of AI-driven search and content discovery.

9.5. Preparing Content for AI Consumption

AI systems process content differently than human readers. Optimizing your content structure for AI consumption can improve your visibility in AI-powered search results.

AI-Friendly Content Structure:

• Use clear, descriptive headings that indicate content topics
• Include comprehensive information that answers complete questions
• Structure content logically with proper heading hierarchy
• Use bullet points and numbered lists for easy parsing
• Include relevant facts, statistics, and citations
• Write in clear, conversational language that AI can easily understand

Markdown-Ready Content: Since AI crawlers convert your content to Markdown, consider how your content will appear in this format.

• Tables should be simple and well-structured
• Images should have descriptive alt text
• Links should be contextually relevant
• Code blocks should be properly formatted
• Lists should be logically organized

9.6. Monitor AI Crawler Activity

Track how AI crawlers interact with your site to understand their behavior and optimize accordingly.

Monitoring AI Crawler Traffic:

• Check server logs for AI crawler user agents
• Monitor bandwidth usage from AI crawler requests
• Track which pages AI crawlers visit most frequently
• Identify crawling patterns and peak activity times
• Set up alerts for unusual crawler behavior

Tools for AI Crawler Analysis:

• Server log analysis tools
• Google Analytics for referral traffic from AI platforms
• Custom dashboards for AI crawler monitoring
• InMotion Hosting’s AI SEO Helper for comprehensive AI readiness assessment

Understanding and preparing for AI-driven search isn’t just about the future—it’s about capturing traffic and opportunities that exist today. Businesses are already seeing sales from users who discover their content through AI-powered research tools.

Content Creation and Optimization

Content quality remains the strongest ranking factor. You need to create comprehensive, valuable content that serves user intent better than competing pages.

10. Write Long-Form, In-Depth Content

Google rewards thorough, comprehensive content that fully addresses user queries. Research shows that longer content tends to rank higher and earn more backlinks.

Aim for at least 2,000 words for competitive topics. This isn’t about padding content with fluff, it’s about providing complete, valuable information that eliminates the need to visit other sites.

Structure long-form content with:

• Clear, logical headings and subheadings
• Short paragraphs for easy scanning
• Bullet points and numbered lists
• Relevant images and visual elements
• Internal links to related content

Use tools like Surfer SEO or Clearscope to analyze top-ranking pages and identify topics you should cover to compete effectively.

11. Focus on Content Readability

Google’s algorithms increasingly favor content that’s easy to read and understand. Write for your audience, not search engines.

Sentence Structure should be clear and concise. Use short sentences when possible and vary sentence length for better flow. Avoid jargon unless your audience expects it.

Paragraph Length should be kept short for web reading. Aim for 2-3 sentences per paragraph. Long paragraphs look overwhelming on mobile devices and increase bounce rates.

Transition Words help readers follow your logic and improve content flow. Use words like “however,”, “therefore”, “additionally”, and “meanwhile” to connect ideas smoothly.

Reading Level should match your audience’s education level. Tools like Hemingway Editor can help you simplify complex sentences and improve readability scores.

12. Optimize Title Tags and Meta Descriptions

Title tags and meta descriptions are your first opportunity to attract clicks from search results.

Title Tag Optimization:

• Include your primary keyword naturally
• Keep titles under 60 characters to avoid truncation
• Make titles compelling and click-worthy
• Use numbers and power words when appropriate
• Include your brand name for recognition

Meta Description Best Practices:

• Write compelling descriptions under 160 characters
• Include your primary keyword
• Use action words and emotional triggers
• Provide clear value propositions
• Include calls-to-action when relevant

While meta descriptions don’t directly impact rankings, they significantly affect click-through rates, which can indirectly influence rankings.

13. Use Header Tags Strategically

Header tags (H1, H2, H3) help search engines understand your content structure and make it easier for users to scan.

H1 Tags should be used once per page and include your primary keyword. Make them descriptive and compelling as they’re often the first thing users see.

H2 Tags break your content into main sections. Use them for primary subtopics and include related keywords naturally. Each H2 should introduce a distinct concept or section.

H3 Tags and Beyond organize subsections under H2s. Use them hierarchically. H3s should fall under H2s, H4s under H3s, H5s under H4s, and finally H5s under H6s.

Good header structure improves user experience and can help you win featured snippets and other SERP features.

14. Optimize Images for SEO

Images can drive significant traffic through Google Images and improve user engagement on your pages.

Image Optimization Checklist:

• Compress images without losing quality
• Use descriptive, keyword-rich file names
• Write detailed alt text for accessibility
• Include images in your XML sitemap
• Use responsive image techniques
• Choose appropriate image formats (WebP for photos, SVG for graphics)

Alt Text Best Practices:

• Describe the image content accurately
• Include relevant keywords naturally
• Keep descriptions under 125 characters
• Don’t start with “image of” or “picture of”
• Be specific and descriptive

Well-optimized images improve page speed, accessibility, and can appear in image search results, driving additional traffic to your site.

Link Building and Authority

Backlinks remain one of Google’s strongest ranking factors. Quality links from authoritative sites signal trust and expertise to search engines.

15. Build High-Quality Backlinks

Focus on earning links from relevant, authoritative sites in your industry. Quality matters far more than quantity.

Guest Posting on reputable sites in your niche can earn valuable backlinks and expose your brand to new audiences. Research sites that accept guest posts and create valuable content that their audience will appreciate.

Resource Page Link Building involves finding pages that list helpful resources and requesting inclusion. Search for terms like “helpful resources”, “useful tools”, or “recommended reading” in your industry.

Broken Link Building helps webmasters fix broken links while earning backlinks. Use tools like Ahrefs or Broken Link Checker to find broken links on relevant sites, then suggest your content as a replacement.

Digital PR involves creating newsworthy content or conducting studies that journalists want to cover. This can earn high-authority links from news sites and industry publications.

16. Optimize Internal Linking

Internal links help distribute authority throughout your site and improve user navigation.

Internal Link Strategy:

• Link from high-authority pages to important target pages
• Use descriptive, keyword-rich anchor text
• Link to related content naturally within paragraphs
• Create hub pages that link to multiple related articles
• Use a logical site structure with clear navigation

Anchor Text Best Practices:

• Use varied, natural anchor text
• Include target keywords in some anchor text
• Use branded terms and generic phrases too
• Avoid over-optimization with exact-match keywords
• Make anchor text descriptive and helpful

Regular internal link audits help identify opportunities to better distribute authority and improve site navigation.

17. Monitor and Disavow Toxic Links

Not all backlinks help your SEO. Toxic links from spammy or irrelevant sites can harm your rankings.

Toxic Link Identification:

• Links from obviously spammy sites
• Links with over-optimized anchor text
• Links from unrelated industries
• Links from sites with thin content
• Links from sites with security issues

Use Google Search Console and tools like Semrush’s Backlink Audit to identify potentially harmful links. If you find toxic links, try contacting the site owner to request removal. If that fails, use Google’s Disavow Tool to tell Google to ignore those links.

Local SEO Optimization

For businesses serving local markets, local SEO is crucial for visibility in “near me” searches and Google Maps results.

18. Claim and Optimize Your Google Business Profile

Your Google Business Profile is often the first impression local customers have of your business.

Profile Optimization:

• Complete all profile sections thoroughly
• Use accurate business information
• Add high-quality photos regularly
• Encourage and respond to customer reviews
• Post updates and offers regularly
• Choose relevant business categories

Review Management:

• Respond to all reviews professionally
• Address negative reviews constructively
• Encourage satisfied customers to leave reviews
• Monitor review sites beyond Google
• Use reviews to improve your business

19. Build Local Citations and Links

Local citations (mentions of your business name, address, and phone number) help establish local relevance and authority.

Citation Building:

• List your business in major directories (Yelp, Yellow Pages, etc.)
• Submit to industry-specific directories
• Ensure NAP (Name, Address, Phone) consistency across all listings
• Include your business in local chamber of commerce websites
• Get listed in local news and blog sites

Local Link Building:

• Sponsor local events or organizations
• Partner with other local businesses
• Participate in local business associations
• Create locally-focused content
• Engage with local journalists and bloggers

WordPress-Specific SEO

WordPress powers over 40% of the web, and specific optimizations can give you significant advantages.

20. Choose an SEO-Friendly WordPress Theme

Your theme choice impacts site speed, mobile responsiveness, and technical SEO.

Theme Selection Criteria:

• Fast loading times and clean code
• Mobile-responsive design
• Regular updates and good support
• Compatibility with major SEO plugins
• Schema markup integration
• Customization options without bloat

Popular SEO-friendly themes include Astra, GeneratePress, and Neve. Avoid themes with excessive features you don’t need, as they can slow down your site.

21. Optimize WordPress for Performance

WordPress sites need specific optimizations to perform well in search results.

Performance Optimization:

• Use a quality hosting provider with optimized servers
• Install a caching plugin like W3 Total Cache or WP Super Cache
• Optimize your WordPress database regularly
• Use a content delivery network (CDN)
• Minimize plugin usage and remove unused plugins
• Optimize images with compression plugins

WordPress SEO Plugins:

• Yoast SEO or RankMath for comprehensive SEO features
• Redirection for managing 301 redirects
• WP Smush for image optimization
• UpdraftPlus for regular backups
• Wordfence for security

22. Leverage WordPress Content Features

WordPress offers built-in features that can boost your SEO when used properly.

Categories and Tags:

• Use categories for broad topic organization
• Use tags for specific subtopics
• Avoid duplicate or thin category/tag pages
• Create valuable category descriptions
• Use breadcrumbs for navigation

Custom Post Types:

• Create custom post types for different content types
• Use custom fields for structured data
• Implement custom taxonomies for better organization
• Create custom templates for different post types

Tracking and Analytics

You can’t improve what you don’t measure. Proper tracking helps you understand what’s working and what needs adjustment.

23. Set Up Comprehensive Analytics

Beyond basic traffic metrics, track SEO-specific data that reveals the health of your search presence.

Google Analytics 4 Setup:

• Configure conversion tracking for key actions
• Set up enhanced ecommerce tracking if applicable
• Create custom dashboards for SEO metrics
• Set up alerts for significant traffic changes
• Track user behavior and engagement metrics

Google Search Console Monitoring:

• Monitor average position and click-through rates
• Track impressions and clicks for top keywords
• Identify crawl errors and fix them promptly
• Monitor manual actions and penalties
• Track mobile usability issues

24. Create SEO Reporting Dashboards

Regular reporting helps you spot trends and make data-driven decisions.

Key Metrics to Track:

• Organic traffic growth
• Keyword ranking positions
• Click-through rates from search results
• Conversion rates from organic traffic
• Backlink acquisition and quality
• Page speed and technical health scores

Reporting Tools:

• Google Data Studio for custom dashboards
• SEMrush or Ahrefs for keyword tracking
• Google Analytics for traffic analysis
• Google Search Console for search performance
• Custom spreadsheets for consolidated reporting

Advanced SEO Techniques

Once you’ve mastered the fundamentals, these advanced techniques can give you a competitive edge.

25. Implement Advanced Schema Markup

Beyond basic schema, advanced markup can trigger rich features in search results.

Advanced Schema Types:

• FAQ schema for featured snippets
• How-to schema for step-by-step content
• Video schema for video content
• Event schema for time-sensitive content
• Job posting schema for recruitment pages

Schema Implementation:

• Use JSON-LD format for cleaner implementation
• Test all schema with Google’s Rich Results Test
• Monitor performance in Google Search Console
• Keep schema updated with content changes
• Follow schema.org guidelines strictly

26. Optimize for Voice Search

Voice search is growing rapidly, requiring optimization for conversational queries.

Voice Search Optimization:

• Target long-tail, conversational keywords
• Create FAQ sections for common questions
• Use natural language in your content
• Optimize for local voice searches
• Ensure fast page loading for voice results

Featured Snippet Optimization:

• Structure content to answer specific questions
• Use bullet points and numbered lists
• Include clear, concise answers
• Optimize for question-based queries
• Monitor featured snippet performance

27. Create Content Clusters

Topic clusters help establish topical authority and improve internal linking.

Cluster Strategy:

• Identify broad topics relevant to your audience
• Create comprehensive pillar pages for each topic
• Write supporting content that links to pillar pages
• Use consistent internal linking patterns
• Monitor cluster performance and expand successful topics

Content Organization:

• Use clear URL structures for clusters
• Implement breadcrumb navigation
• Create topic-specific landing pages
• Use consistent tagging and categorization
• Plan content calendars around cluster development

Common SEO Mistakes to Avoid

Learning from common mistakes can save you time and prevent ranking penalties.

28. Avoid These Critical SEO Errors

Keyword Stuffing hurts more than it helps. Use keywords naturally and focus on semantic variations rather than exact repetition.

Duplicate Content confuses search engines and dilutes your authority. Use canonical tags and 301 redirects to consolidate similar pages.

Ignoring Mobile Users can devastate your rankings. Ensure your site works perfectly on all devices and screen sizes.

Neglecting Page Speed frustrates users and hurts rankings. Regularly audit and optimize your site’s performance.

Buying Low-Quality Links can result in penalties. Focus on earning links through valuable content and legitimate outreach.

29. Stay Updated with SEO Changes

Search algorithms evolve constantly. Stay informed about updates that might affect your strategy.

SEO News Sources:

• Google Search Central blog
• Search Engine Land
• Moz Blog
• Ahrefs Blog
• SEMrush Blog

Algorithm Update Monitoring:

• Track ranking changes around known updates
• Monitor traffic fluctuations
• Adjust strategies based on confirmed changes
• Test new features as they’re released
• Participate in SEO communities for insights

Conclusion

SEO success in 2025 requires a comprehensive approach that addresses technical foundations, content quality, user experience, and ongoing optimization. This checklist provides a roadmap for building sustainable search visibility, but remember that SEO is a marathon, not a sprint.

Start with the foundational elements like technical setup, keyword research, and content creation. These create the framework for everything else. Then gradually implement advanced techniques as your SEO knowledge and results improve.

The key is consistency. Regular audits, content updates, and performance monitoring will keep your SEO strategy aligned with search engine changes and user expectations. Focus on creating genuine value for your audience, and the rankings will follow.

For businesses serious about SEO success, partnering with a hosting provider that prioritizes performance can make a significant difference. Fast, reliable hosting creates the technical foundation that makes all other SEO efforts more effective.

Ready to take your SEO to the next level? Start with our comprehensive high-performance hosting solutions designed for speed, security, and search engine success.

SEO Success Made Simple

Don’t let technical complexities slow down your SEO progress. InMotion Hosting’s high-performance servers include built-in performance features, security measures, and expert support to help your site rank higher and load faster.

Built for SEO Success:

• Lightning-fast SSD storage
• Free SSL certificates
• Automatic backups
• 99.9% uptime guarantee
• Expert human support

Start Your SEO Journey Today

InMotion Hosting’s UltraStack ONE for React provides a streamlined path for deploying React applications built with AI-powered development tools like Lovable. This guide will walk you through the complete process of connecting your Lovable project to GitHub and deploying it to your UltraStack ONE for React VPS.

Before You Get Started (Prerequisites and Considerations)

Before beginning this deployment process, ensure you have the following resources ready. For UltraStack ONE for React, you must contact us for the Beta prior to September:

• A completed React application built in Lovable
• A GitHub account with repository access
• An active UltraStack ONE for React VPS (2GB/2vCPU minimum for development, 4GB/4vCPU recommended for production)
• SSH access to your UltraStack ONE VPS
• Basic familiarity with command line operations

Important Note About UltraStack ONE for React Release

UltraStack ONE for React is scheduled to release in September 2025. This specialized VPS solution is purpose-built for React applications and includes pre-configured server software tailored specifically for React deployment workflows.

Understanding UltraStack ONE for React

UltraStack ONE for React is InMotion Hosting’s purpose-built Virtual Private Server running on our Highly Available NVMe-based cloud infrastructure. This VPS comes pre-configured with all the essential server software needed for React applications, including npm for building applications and NGINX with optimized max_connections settings to serve your application efficiently.

The server configuration includes proper URL routing to work seamlessly with React Router, eliminating common URL link headaches. Additionally, your VPS includes a stateful backend data storage solution powered by PostgreSQL, configured for high performance with connection pooling optimized for Node.js server applications handling inbound API calls from your frontend.

VPS Resource Recommendations

Your UltraStack ONE for React VPS capabilities scale with the allocated RAM and vCPUs. A 2GB/2vCPU VPS can support pretty serious traffic levels and provides an excellent starting point for development and testing environments. However, for production deployments, we recommend a 4GB/4vCPU configuration to ensure good performance under real-world traffic conditions.

Unlike traditional hosting solutions, UltraStack ONE for React excludes unnecessary software like Apache, focusing exclusively on the tools and services your React application needs. This approach reduces overhead and potential security vulnerabilities while maintaining top performance per dollar spent. Larger VPSes are still very reasonable so if it is a large scale use case, just get something in the 8GB/8vCPU or 12GB/12vCPU to start.

Step 1: Connecting Lovable to GitHub

The first step in your deployment journey involves establishing a connection between your Lovable project and GitHub. This integration provides version control, backup capabilities, and enables automated deployment workflows.

Initiating the GitHub Connection

In the Lovable editor, click on GitHub → Connect to GitHub (usually found in the top-right corner of the project editor). This will begin the authorization process.

You’ll be redirected to GitHub to authorize the Lovable GitHub App. Sign in to GitHub if prompted. When asked to grant access, choose either All repositories or Only select repositories. For security purposes, you may prefer to grant access only to specific repositories, though allowing all repositories provides more flexibility for future projects.

Selecting Your GitHub Account

If your GitHub user belongs to organizations, you may need to confirm which GitHub account or organization to install the Lovable app to. You can create the project’s repo under your personal GitHub or any organization where you have permission.

Remember that you can only connect one GitHub account per Lovable account at a time. If you need to use an organization’s GitHub account, ensure you have admin access to allow repository creation.

Creating the Repository

Once GitHub is connected, return to your Lovable project. Click the Create Repository button (located in the top-right of the Lovable editor interface). Lovable will then create a new GitHub repository for this project and push the current project code to that repo.

This initial push may take a few seconds to complete. After this step, your Lovable project’s code will be accessible on GitHub, providing the foundation for your deployment workflow.

Verifying the Connection

Navigate to GitHub and go to your account (or org) – you should see the new repository with your project’s name. It will contain all the code of your Lovable app. In the Lovable editor, you should also see confirmation that the repository has been linked successfully.

Step 2: Understanding GitHub and Lovable Synchronization

Once connected, your Lovable project and GitHub repository maintain real-time synchronization. When you commit and push code to the default branch on GitHub, those commits will show up in Lovable almost automatically. Lovable’s integration listens for changes – whenever you push to GitHub, Lovable pulls the latest commit into the project.

Similarly, if you make changes in Lovable (for example, editing code via Lovable’s Dev Mode or having the AI generate new code), those changes are also saved to the Git repository backing your project. Lovable will push these commits to GitHub automatically, updating the repository.

This bidirectional synchronization ensures that your code remains consistent across both platforms without manual intervention.

Step 3: Accessing Your UltraStack ONE VPS via SSH

To deploy your React application, you’ll need SSH access to your UltraStack ONE VPS. When running a website or server, SSH can save you time by allowing you to view, manage, and edit files from the command line interface (CLI).

Generating and Adding SSH Keys

Generate and add the SSH Key to your server through InMotion Central. This process creates a secure authentication method that eliminates the need for password-based logins.

Connecting to Your Server

Log into InMotion Central, open your Project, then click Manage Environment. You can then copy your hostname or IP address to use to connect.

Here’s what it would look like to connect using either the hostname or IP address:

# Connect with hostname
ssh root@vps####.inmotionhosting.com

# Connect with IP address  
ssh root@192.168.1.100

# Connect with hostname
ssh root@vps####.inmotionhosting.com

# Connect with IP address  
ssh root@192.168.1.100

Replace the placeholder values with your actual server details provided in InMotion Central.

Step 4: Preparing Your UltraStack ONE VPS for React Deployment

Your UltraStack ONE for React VPS comes pre-configured with the necessary software stack, but you’ll need to prepare it for your specific application deployment.

Understanding the Pre-configured Environment

Your VPS includes npm for building React applications and NGINX configured specifically for React applications. The NGINX configuration includes proper URL routing that works seamlessly with React Router, eliminating common single-page application deployment issues.

Configuring NGINX for High API Connections

UltraStack ONE for React includes NGINX configured with high max_connections settings to handle substantial API traffic. The default configuration is optimized for React applications that make frequent API calls to backend services.

The NGINX configuration includes:

• Optimized worker processes and connections
• Proper proxy settings for API endpoints
• Static file serving optimization for React build assets
• Compression settings for improved performance

Accessing NGINX Configuration

Below is the location of your site’s NGINX configuration file. Be sure to replace vps#### with your actual VPS server number: /etc/nginx/conf.d/vps####.inmotionhosting.com.conf

You can view and modify this configuration file as needed for your specific application requirements.

Step 5: Understanding PostgreSQL and Node.js Connection Pooling

Your UltraStack ONE for React VPS includes PostgreSQL and a Node.js install configured with connection pooling for optimal performance. Understanding why connection pooling is crucial will help you build more efficient applications.

Why Connection Pooling Matters

Connecting a new client to the PostgreSQL server requires a handshake which can take 20-30 milliseconds. During this time passwords are negotiated, SSL may be established, and configuration information is shared with the client and server. Incurring this time delay every time we want to execute a query would substantially slow down our application.

Additionally, the PostgreSQL server can only handle a limited number of clients at a time. Depending on resources like available memory of your PostgreSQL server you may even crash the server if you connect too many clients.

Implementing Connection Pooling in Your Node.js Backend

Your UltraStack ONE for React VPS includes a recommended node-postgres (thanks node-postgres!) implemented pre-configured connection pool. When building your backend API endpoints, use the pool pattern for database connections:

import pg from 'pg'
const { Pool } = pg
const pool = new Pool({
  user: 'your_database_user',
  host: 'localhost',
  database: 'your_database_name',
  password: 'your_database_password',
  port: 5432,
  max: 20, // Maximum number of connections
  idleTimeoutMillis: 30000,
  connectionTimeoutMillis: 2000,
})

// Single query method (preferred for most cases)
const getUserById = async (id) => {
  const res = await pool.query('SELECT * FROM users WHERE id = $1', [id])
  return res.rows[0]
}

import pg from 'pg'
const { Pool } = pg
const pool = new Pool({
  user: 'your_database_user',
  host: 'localhost',
  database: 'your_database_name',
  password: 'your_database_password',
  port: 5432,
  max: 20, // Maximum number of connections
  idleTimeoutMillis: 30000,
  connectionTimeoutMillis: 2000,
})

// Single query method (preferred for most cases)
const getUserById = async (id) => {
  const res = await pool.query('SELECT * FROM users WHERE id = $1', [id])
  return res.rows[0]
}

If you don’t need a transaction or you just need to run a single query, the pool has a convenience method to run a query on any available client in the pool. This is the preferred way to query with node-postgres if you can as it removes the risk of leaking a client.

Step 6: Setting Up GitHub Actions for Automated Deployment

UltraStack ONE for React specifically supports GitHub Actions for easy CI/CD pipelines. This automation will deploy your React application whenever you push changes to your main branch.

Creating the GitHub Actions Workflow

In your GitHub repository, create a .github/workflows/deploy.yml file:

name: Deploy to UltraStack ONE for React

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '18'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Build React application
      run: npm run build
      
    - name: Deploy to UltraStack ONE VPS
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        key: ${{ secrets.SSH_KEY }}
        port: 22
        source: "build/*"
        target: "/var/www/html"
        rm: true

name: Deploy to UltraStack ONE for React

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '18'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Build React application
      run: npm run build
      
    - name: Deploy to UltraStack ONE VPS
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        key: ${{ secrets.SSH_KEY }}
        port: 22
        source: "build/*"
        target: "/var/www/html"
        rm: true

Configuring GitHub Secrets

In your GitHub repository settings, add the following secrets:

• HOST: Your UltraStack ONE VPS hostname or IP address
• USERNAME: root (or your configured user)
• SSH_KEY: Your private SSH key content

Step 7: Deploying Your React Application

Manual Deployment Process

For your initial deployment or when you need direct control, you can deploy manually:

1. Clone your repository on the VPS:

cd /var/www
git clone https://github.com/yourusername/your-repo.git
cd your-repo

cd /var/www
git clone https://github.com/yourusername/your-repo.git
cd your-repo

2. Install dependencies:

npm install

npm install

3. Build your React application:

npm run build

npm run build

4. Copy build files to web directory:

cp -r build/* /var/www/html/

cp -r build/* /var/www/html/

5. Restart NGINX:

systemctl restart nginx

systemctl restart nginx

Automated Deployment via GitHub Actions

Once you’ve configured GitHub Actions, deployment becomes automatic. Simply push changes to your main branch, and the workflow will:

• Build your React application
• Transfer the build files to your VPS
• Update the web directory with new content

Step 8: Configuring Your Backend API

Your UltraStack ONE for React VPS includes Node.js and is configured to handle API requests. Create your backend API endpoints to serve your React application.

Sample API Structure

Create an api directory in your project:

// api/server.js
import express from 'express'
import pg from 'pg'
const { Pool } = pg
const app = express()
const port = 3001

// Database connection pool
const pool = new Pool({
  user: 'postgres',
  host: 'localhost',
  database: 'your_app_db',
  password: 'your_password',
  port: 5432,
})

app.use(express.json())

// Sample API endpoint
app.get('/api/users', async (req, res) => {
  try {
    const result = await pool.query('SELECT * FROM users')
    res.json(result.rows)
  } catch (err) {
    console.error(err)
    res.status(500).json({ error: 'Internal server error' })
  }
})

app.listen(port, () => {
  console.log(`API server running on port ${port}`)
})

// api/server.js
import express from 'express'
import pg from 'pg'
const { Pool } = pg
const app = express()
const port = 3001

// Database connection pool
const pool = new Pool({
  user: 'postgres',
  host: 'localhost',
  database: 'your_app_db',
  password: 'your_password',
  port: 5432,
})

app.use(express.json())

// Sample API endpoint
app.get('/api/users', async (req, res) => {
  try {
    const result = await pool.query('SELECT * FROM users')
    res.json(result.rows)
  } catch (err) {
    console.error(err)
    res.status(500).json({ error: 'Internal server error' })
  }
})

app.listen(port, () => {
  console.log(`API server running on port ${port}`)
})

Managing Your Node.js API Service

Note the below may change prior to release!

You can manage your Node.js API service using systemctl commands:

# Start your API service
systemctl start your-api-service

# Stop your API service
systemctl stop your-api-service

# Restart your API service
systemctl restart your-api-service

# Check service status
systemctl status your-api-service

# Start your API service
systemctl start your-api-service

# Stop your API service
systemctl stop your-api-service

# Restart your API service
systemctl restart your-api-service

# Check service status
systemctl status your-api-service

Step 9: Testing Your Deployment

After deployment, verify your React application is working correctly:

1. Access your application via your VPS hostname or IP address
2. Test React Router functionality by navigating to different routes
3. Verify API connectivity by checking that your frontend can communicate with your backend
4. Monitor server logs to ensure no errors are occurring

Monitoring Application Performance

We expect to add more visual monitoring during the release or just after.

You can view various log files to monitor your application:

# View NGINX access logs
tail -f /var/log/nginx/access.log

# View NGINX error logs
tail -f /var/log/nginx/error.log

# View your application logs
tail -f /var/log/your-app/app.log

# View NGINX access logs
tail -f /var/log/nginx/access.log

# View NGINX error logs
tail -f /var/log/nginx/error.log

# View your application logs
tail -f /var/log/your-app/app.log

Step 10: Ongoing Maintenance and Updates

Updating Your Application

With GitHub Actions configured, updates are streamlined:

1. Make changes in Lovable or directly in your GitHub repository
2. Push changes to the main branch
3. GitHub Actions automatically builds and deploys the updated version

Database Management

Your PostgreSQL database requires periodic maintenance:

• Monitor connection pool usage
• Optimize queries for better performance
• Regular backup procedures
• Update database schema as your application evolves

Security Considerations

Maintain security best practices:

• Keep your SSH keys secure
• Regularly update your GitHub secrets
• Monitor access logs for suspicious activity
• Keep your VPS software updated

Troubleshooting Common Issues

Build Failures

If your React build fails:

1. Check that all dependencies are properly listed in package.json
2. Verify that your build scripts are correctly configured
3. Review GitHub Actions logs for specific error messages

Connection Issues

If you experience database connection problems:

1. Verify your connection pool configuration
2. Check that PostgreSQL is running: systemctl status postgresql
3. Review database logs for connection errors

NGINX Configuration Problems

If your React Router isn’t working properly:

1. Verify that your NGINX configuration includes proper fallback rules
2. Check that your build files are in the correct directory
3. Restart NGINX after configuration changes

Conclusion

Deploying your Lovable-created React application to UltraStack ONE for React provides a powerful, scalable foundation for your web application. The combination of Lovable’s AI-powered development capabilities, GitHub’s version control and automation features, and InMotion Hosting’s optimized React hosting environment creates an efficient development and deployment workflow.

Your UltraStack ONE for React VPS provides all the necessary infrastructure components, from the optimized NGINX configuration to the PostgreSQL database with connection pooling. This specialized hosting solution eliminates common deployment challenges while providing the performance and scalability your React application needs.

By following this guide, you’ve established a professional deployment pipeline that supports both rapid development through Lovable and reliable production hosting through UltraStack ONE for React. This foundation will serve your project well as it grows and evolves.

Remember that UltraStack ONE for React is specifically designed to support React applications, providing the exact server configuration and software stack your application needs without unnecessary overhead. This focused approach delivers optimal performance while simplifying the deployment and maintenance process.

With your deployment pipeline in place, you can focus on building great user experiences with Lovable while having confidence in your application’s hosting foundation. The automated deployment process ensures that your latest changes are always reflected in your production environment, enabling rapid iteration and continuous improvement.

Running an outdated PHP version on your website is like leaving your front door unlocked in a high-crime neighborhood. You’re not just risking a break-in, you’re practically inviting it. If you’re still running PHP 7.4 or earlier, you’re sitting on a ticking time bomb that could explode at any moment, taking your website, customer data, and business reputation with it.

The harsh reality? 35.68% of PHP teams are still using PHP 7.4 in their applications, despite the fact that PHP 7.4 reached end of life on November 28, 2022. That means more than one in three websites are running on completely unsupported code that hackers actively target.

Your website’s PHP version affects everything from security and performance to your ability to use modern web development tools. When you fall behind on PHP updates, you’re not just missing out on new features, you’re actively putting your business at risk.

With this comprehensive guide, you’ll learn:

• Why outdated PHP versions create serious security vulnerabilities
• How to identify your current PHP version and assess your risk
• Step-by-step instructions for upgrading safely using InMotion Hosting’s tools
• Best practices for maintaining current PHP versions going forward

Let’s get right into it!

The Critical Security Risks of Outdated PHP

Known Vulnerabilities Keep Piling Up

PHP remains one of the most targeted technologies, consistently ranking among the top software projects by CVE count. When PHP versions reach end-of-life, they stop receiving security patches entirely. That means every new vulnerability discovered becomes a permanent weak point in your system.

Consider what happened in 2024 alone. Several PHP 7.4 vulnerabilities have been discovered, including critical remote code execution flaws that allow attackers to completely take over your server. CVE-2024-4577, classified as critical severity, gives attackers the ability to execute arbitrary code on Windows-based PHP installations.

The longer you stay on an unsupported version, the more vulnerabilities accumulate. It’s not just one or two security holes, it’s dozens of unpatched weaknesses that criminals can exploit.

Your Data and Customer Information Are at Risk

A single weak point — like a poorly handled file upload or unsanitized user input — can result in full server compromise, data theft, or malware injection. PHP applications often handle sensitive customer information, payment details, and business data. When your PHP version has known security holes, you’re essentially giving hackers a roadmap to your most valuable assets.

The damage goes beyond your immediate website. Because PHP apps often run with elevated privileges, the damage can quickly spread across your infrastructure. A breach in one PHP application can become a gateway to your entire network.

Compliance and Legal Consequences

Many businesses must meet specific compliance standards like PCI DSS for payment processing or GDPR for data protection. Running outdated, vulnerable software can put you in violation of these requirements, leading to hefty fines and legal complications.

Insurance companies are also getting stricter about cybersecurity practices. Some cyber liability policies now explicitly exclude coverage for breaches that occur due to running outdated, unsupported software.

Understanding PHP’s Support Timeline

How PHP Support Actually Works

Each release branch of PHP is fully supported for two years from its initial stable release. During this period, bugs and security issues that have been reported are fixed and are released in regular point releases.

After this two year period of active support, each branch is then supported for two additional years for critical security issues only. This means you get four total years of some level of support, but the last two years only cover the most severe security problems.

Once the four years of support are completed, the branch reaches its end of life and is no longer supported. At that point, you’re completely on your own.

Current PHP Version Status

Here’s where things stand right now:

Actively Supported Versions:

• PHP 8.4 is a feature-rich PHP version that brings support for property hooks, asymmetric visibility support in classes, database driver-specific PDO classes, Lazy objects, a HTML5 support in the DOM extension.
• PHP 8.3 is the latest stable PHP version, bringing typed class constants, Granular DateTime Exceptions, fallback value support for PHP INI Environment Variable syntax, and more.
• PHP 8.2 is the latest PHP version which brings readonly classes, DNF types, null, false, and true types, sensitive parameter redaction support, a new random extension.

End-of-Life Versions You Should Avoid:

• Support for PHP 7 has been discontinued since November 28, 2022.
• Support for PHP 5 has been discontinued since December 31, 2018.
• Support for PHP 4 has been discontinued since August 7, 2008.

If you’re running any version of PHP 7 or older, you’re operating without a safety net.

Performance and Feature Benefits of Modern PHP

Significant Speed Improvements

Newer PHP versions aren’t just about security, they deliver substantial performance gains that directly impact your website’s speed and user experience. PHP 8.0, on the 25th year of PHP history, brings several important features such as Union Types, JIT, Constructor Property Promotion, Match Syntax, Named Parameters, and several more performance, syntax, and quality-of-life improvements.

The Just-In-Time (JIT) compiler in PHP 8.0 and later can dramatically speed up certain types of operations, particularly for CPU-intensive tasks. For many websites, this translates to faster page load times and better server resource utilization.

Modern Language Features That Matter

PHP 8.1, released in 2021, brings major new features such as Enums, Fibers, never return type, Intersection Types, and readonly properties. These aren’t just developer conveniences, they enable more robust, maintainable code that’s less prone to bugs.

PHP 7.4 brings typed properties, underscore numeric separator, and other minor improvements to PHP. Heredoc/nowdoc syntax improvements and a bunch of legacy code deprecations. Even if you’re “only” upgrading from PHP 7.3 to 7.4, you’re gaining valuable improvements.

Better Development Tools and Ecosystem Support

Modern PHP versions work better with contemporary development tools, frameworks, and libraries. Many popular WordPress plugins and themes now require PHP 8.0 or later. If you’re stuck on an older version, you’re locked out of using the latest and most secure extensions for your site.

How to Check Your Current PHP Version

Before you can upgrade, you need to know exactly what version you’re running. Here are several methods to check your PHP version:

Method 1: Create a PHPinfo Page

A phpinfo page shows you all of your php environment settings. This is the most comprehensive way to see your PHP configuration.

1. Log into your cPanel.
2. In the Files section of your cPanel, open the File Manager option.
3. Navigate to the directory you are working with. This is important because each folder can actually be set to have different PHP settings. In this example, we are viewing the PHP settings for our main domain, so we are navigating to the “public_html” folder.
4. In the top menu, click +File option to create a new file.
5. When prompted for the file name, enter phpinfo.php.
6. Find the phpinfo.php file in your list of files (it should have automatically updated). Right-click on it and choose Edit.
7. Enter the following code into the phpinfo.php file: <? phpinfo(); ?>.
8. Then click Save Changes.

Now visit https://yourdomain.com/phpinfo.php in your browser to see your complete PHP configuration.

Important Security Note: Your phpinfo page has many PHP settings that you don’t want to broadcast to the world. When you’re finished using the file, be sure to delete it.

Method 2: Use cPanel’s MultiPHP Manager

With just a few clicks, you can switch between different versions and even use different versions across sites in the same cPanel. The MultiPHP Manager also shows you which version each domain is currently using.

1. Login to cPanel.
2. Click the MultiPHP Manager link in the Software section of cPanel.
3. You’ll see a list of all your domains and their current PHP versions.

How to Upgrade Your PHP Version Safely

Pre-Upgrade Preparation

Before making any changes, we highly recommend performing a full backup first. This gives you a rollback option if something goes wrong during the upgrade process.

Document your current settings using the PHPinfo page you created earlier. Take screenshots or save the output so you can reference your previous configuration if needed.

Test your website’s functionality in a staging environment if possible. Many hosting providers, including InMotion Hosting, offer staging areas where you can safely test changes before applying them to your live site.

Step-by-Step PHP Version Upgrade Process

InMotion Hosting offers a variety of features and tools to support PHP development, such as support for multiple PHP versions. The hosting platform currently supports PHP versions 7.4, 8.0, 8.1, 8.2, and 8.3, giving you flexibility in your upgrade path.

Here’s how to upgrade your PHP version using InMotion Hosting’s tools:

1. Access the MultiPHP Manager
   • Login to cPanel.
   • Click the MultiPHP Manager link in the Software section of cPanel.
   • Be sure to click on MultiPHP Manager and not MultiPHP INI Editor. The INI Editor is a different piece of software that helps you fine tune your PHP settings on individual sites.
2. Select Your Domain
   • Check the box for the site or sites you wish to update.
   • You can upgrade multiple sites at once or handle them individually.
3. Choose Your New PHP Version
   • Select the desired PHP Version from the drop-down menu.
   • Start with the next logical version. If you’re on 7.4, try 8.0 first rather than jumping to 8.3.
4. Apply the Changes
   • Click the Apply button.
   • The change takes effect immediately.
5. Test Your Website
   • Once the PHP version has been changed, be sure to verify that your sites and applications are working as intended.
   • Check your website’s front-end, admin area, contact forms, and any custom functionality.

Fine-Tuning PHP Settings After Upgrade

After upgrading your PHP version, you may need to adjust specific PHP settings to match your website’s requirements. The MultiPHP INI Editor in cPanel lets you make configuration changes to your PHP settings.

Using Basic Mode:

1. In the Software section, click on MultiPHP INI Editor.
2. Under Configure PHP INI basic settings click the dropdown menu that says — Select a location —
3. Select the domain you would like to make changes to.
4. Adjust common settings like memory_limit, max_execution_time, or upload_max_filesize.
5. When finished making changes, click Apply.

Using Editor Mode for Advanced Changes:

1. In the top-left hand section of the MultiPHP INI Editor page, click on Editor Mode.
2. Select the domain you would like to make changes to.
3. Add custom PHP configuration directives directly.
4. When finished making changes, click Save.

Common Upgrade Challenges and Solutions

Deprecated Function Errors

When you upgrade PHP versions, some older functions may no longer work. You’ll typically see errors mentioning “deprecated” or “removed” functions.

Solution: Review your error logs to identify problematic code. Many deprecated functions have direct replacements. For example, the old mysql_* functions were replaced with mysqli_* or PDO alternatives.

Plugin and Theme Compatibility Issues

WordPress plugins and themes may not be compatible with newer PHP versions, especially if they haven’t been updated recently.

Solution: Before upgrading, check with your plugin and theme developers to confirm compatibility. Update all plugins and themes to their latest versions before changing your PHP version.

Increased Memory Usage

Newer PHP versions sometimes use more memory than older ones, which can cause out-of-memory errors on sites with tight resource limits.

Solution: Monitor your resource usage after upgrading and increase memory limits if necessary using the MultiPHP INI Editor. For websites with consistently high resource demands or multiple PHP applications, consider upgrading to VPS Hosting where you have dedicated resources and full control over PHP configurations.

Session and Cookie Handling Changes

PHP 8.0 and later versions have stricter requirements for session and cookie handling, which can break some older applications.

Solution: Update your session handling code to use proper parameter formatting and ensure cookies are set with appropriate security flags.

Maintaining Current PHP Versions

Set Up Monitoring and Alerts

Don’t wait for problems to surface. Set up monitoring to track your PHP version status and get alerts when security updates are available. Many hosting control panels, including cPanel, provide update notifications.

Regular Update Schedule

Establish a routine for checking and applying PHP updates. Consider scheduling updates during low-traffic periods and always test in a staging environment first.

Our SysAdmins install the latest versions of PHP on our Shared, Reseller, and cPanel-based WordPress servers after testing and troubleshooting. The ‘default’ version of PHP for newly created sites is often one or two versions behind for the sake of stability, but feel free to update to the latest version as soon as it is available!

Development Best Practices

Utilize tools like PHPStan, SonarQube (for static analysis features), or RIPS Code Analysis to examine your PHP code without execution. These tools identify unsafe functions, insecure coding patterns, and potential misconfigurations.

Run composer audit regularly to check your project’s dependencies for known security vulnerabilities in the PHP packages you are using.

Professional Support Options

If managing PHP upgrades feels overwhelming, consider professional assistance. InMotion Hosting’s Technical Support Team can help you seamlessly transition to the latest PHP versions. Our expert team of sysadmins and hosting experts will guide you through the entire upgrade process, ensuring your applications remain protected and fully compatible.

For mission-critical applications or high-traffic websites, VPS Hosting provides the dedicated resources and administrative control needed to maintain optimal PHP performance and security. With VPS Hosting, you can implement custom monitoring, automated updates, and advanced security configurations.

The Business Case for Staying Current

Reduced Security Costs

The cost of preventing security breaches is always lower than the cost of recovering from them. Maintaining current PHP versions is one of the most cost-effective security measures you can implement.

Improved Performance and User Experience

Faster websites lead to better user engagement, higher conversion rates, and improved search engine rankings. The performance improvements in modern PHP versions directly translate to business benefits.

Future-Proofing Your Technology Stack

Running an EOL PHP version means spending time on things like building or backporting patches for security issues and bugs. For supported PHP versions, this isn’t an issue, and allows teams to better focus on improving the security, performance, or functionality of your application.

Competitive Advantage

While 35.68% of PHP teams are still using PHP 7.4, staying current puts you ahead of more than one-third of your competitors who are still running vulnerable, outdated code.

Take Action Today

Your website’s PHP version isn’t just a technical detail, it’s a critical business decision that affects your security, performance, and competitive position. Every day you delay upgrading is another day your website remains vulnerable to known exploits.

Start by checking your current PHP version using the methods outlined above. If you’re running anything older than PHP 8.1, make upgrading your top priority. If you’re on PHP 7.4 or earlier, treat this as an emergency, you’re running code that’s been unsupported for years.

InMotion Hosting’s UltraStack infrastructure offers PHP accelerators and caching tools that optimize the performance of PHP-based websites and applications. Combined with the latest PHP versions, this gives you a powerful foundation for a fast, secure website.

Don’t let outdated PHP versions put your business at risk. The tools and knowledge are available, now you just need to act on them.

Ready to upgrade your PHP version safely and efficiently? InMotion Hosting’s PHP management tools make the process straightforward, even for non-technical users. Start protecting your website today.

You’ve built an incredible React web app using Lovable’s AI-powered development platform, and now you’re ready to deploy it to your InMotion Hosting shared hosting . This comprehensive guide walks you through the entire process of connecting Lovable to GitHub and deploying your application to any cPanel-based InMotion Hosting server environment using Git version control.

InMotion Hosting’s Shared Hosting, VPS, and Dedicated Server accounts fully support GitHub Actions and remote Git repositories, making it straightforward to deploy your Lovable-created React applications. You’ll learn how to set up the complete pipeline from Lovable’s development environment to your live website, including database migration if your app uses Supabase.

With this guide, you’ll be able to:

• Connect your Lovable project to GitHub for version control
• Set up Git repositories in your InMotion cPanel account
• Configure automatic deployments using GitHub Actions
• Migrate from Supabase to PostgreSQL on InMotion if needed
• Manage ongoing updates and deployments

Let’s get started with the technical setup.

Understanding the Deployment Architecture

Before diving into the setup process, it’s important to understand how the pieces fit together. Lovable creates React applications that run in the browser, but they need to be built and deployed to a web server to be accessible to your users.

Your deployment pipeline will look like this: You develop in Lovable → Changes sync to GitHub → GitHub Actions builds your app → Built files deploy to your InMotion hosting account → Your website goes live.

This architecture gives you the best of both worlds: rapid development with Lovable’s AI assistance and the reliability of professional hosting with InMotion. You maintain full control over your code through GitHub while leveraging automated deployment processes.

InMotion’s Shared Hosting servers run on AlmaLinux 8, which provides excellent compatibility with modern web applications. The platform supports Node.js applications, PostgreSQL databases, and SSH access (on port 2222), giving you everything needed for React app deployment.

Setting Up Lovable GitHub Integration

The first step in your deployment pipeline is connecting Lovable to GitHub. This creates a bridge between your AI-powered development environment and the version control system that will manage your code.

Initial GitHub Connection

Start by linking your Lovable account to GitHub. In your Lovable project editor, look for the GitHub option in the top-right corner and click “Connect to GitHub.” This initiates the authorization process that allows Lovable to create and manage repositories on your behalf.

When GitHub opens, you’ll be asked to authorize the Lovable GitHub App. Sign in to your GitHub account if you haven’t already. You’ll see options to grant access to all repositories or only select repositories. For simplicity, granting access to all repositories works well, but you can be selective if you prefer to limit access.

If you belong to GitHub organizations, you’ll need to choose which account or organization should host your project’s repository. Make sure you have admin permissions in any organization you select, as Lovable needs to create repositories and manage commits.

Creating Your Project Repository

Once GitHub authorization is complete, return to your Lovable project. Click the “Create Repository” button, which should now be visible in the GitHub section of your project interface. Lovable will create a new GitHub repository specifically for your project and perform the initial code push.

This process typically takes a few seconds to complete. Lovable is transferring all your project files, including your React components, configuration files, and any assets you’ve created. Once finished, you’ll see a confirmation message and a link to view your repository on GitHub.

Navigate to your GitHub account to verify the repository creation. You should see a new repository with your project name containing all the code from your Lovable application. This repository will serve as the central hub for your code, connecting Lovable’s development environment to your InMotion hosting account.

Understanding Lovable’s Sync Behavior

Lovable maintains real-time synchronization between your project and GitHub, but this sync operates specifically with your repository’s default branch (typically “main” or “master”). When you make changes in Lovable, they’re automatically committed and pushed to this default branch within seconds.

Similarly, if you push changes to the default branch from your local development environment or directly through GitHub’s interface, Lovable will pull these changes and reflect them in your project editor almost immediately. This bidirectional sync ensures that your code stays consistent whether you’re working in Lovable or using traditional development tools.

However, Lovable only tracks the default branch. If you create feature branches or work on separate branches in GitHub, those changes won’t appear in Lovable until they’re merged into the default branch. This is important to remember when setting up your deployment workflow.

Configuring Git in Your InMotion cPanel Account

With your Lovable project connected to GitHub, the next step is setting up Git Version Control in your InMotion Hosting account with cPanel. This creates the destination for your deployed code and establishes the connection between GitHub and your web server.

Accessing Git Version Control

1. Log into your InMotion cPanel account by navigating to https://yourdomain.com/cpanel or using the cPanel login link in your Account Management Panel.
2. Navigate to the Files section in your cPanel dashboard. You’ll see several file management options listed in a grid or menu format.
3. Click on “Git Version Control” which should appear as an icon with a Git logo. This opens InMotion’s Git management interface where you can create and manage repositories directly on your hosting account.
   
   
4. Review the initial screen. If this is your first time using Git in cPanel, you’ll be prompted to create a repository immediately and can skip to the next section. Otherwise, you’ll see a list of existing repositories (if any) and a blue “Create” button to add new ones.

Creating Your Deployment Repository

1. Click the “Create” button to start setting up your deployment repository. This opens a form with several configuration options.
   
   
2. Enable repository cloning by toggling ON the “Clone a Repository” option. You’ll see the form change to show fields for cloning an existing repository instead of creating a new empty one.
   
   
3. Get your GitHub repository’s clone URL by opening your GitHub repository in a new browser tab. Click the green “Code” button and you’ll see options for HTTPS, SSH, and GitHub CLI. Copy the HTTPS URL (it will look like https://github.com/yourusername/your-repo-name.git).
4. Enter the clone URL in the “Clone URL” field in cPanel. Paste the HTTPS URL you copied from GitHub. For shared hosting, the HTTPS URL typically works best initially, though you can switch to SSH later for automated deployments.
5. Set the repository path to specify where your website files will live on the server. Choose one of these options:
   • For your main domain: public_html/your-app-name
   • For a subdomain: public_html/subdomain-name/your-app-name
   • For a subdirectory: public_html/directory-name/your-app-name
6. Provide a repository name that will appear in your cPanel interface. Choose something descriptive like “Lovable React App” or “My Production Website” so you can easily identify it later.
7. Click “Create” at the bottom of the form. cPanel will now clone your GitHub repository to your hosting account. This process typically takes 30-60 seconds depending on your repository size.
8. Wait for the confirmation message that says “Repository created successfully” or similar. You’ll then see your new repository listed in the Git Version Control interface.

Configuring SSH Access for Shared Hosting

1. Generate an SSH key pair on your local machine if you don’t already have one. Open your terminal or command prompt and run:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

2. You’ll see prompts like this:

Generating public/private rsa key pair.
Enter file in which to save the key (/home/yourusername/.ssh/id_rsa): [Press Enter]
Enter passphrase (empty for no passphrase): [Enter a passphrase or press Enter]
Enter same passphrase again: [Repeat passphrase or press Enter]

Generating public/private rsa key pair.
Enter file in which to save the key (/home/yourusername/.ssh/id_rsa): [Press Enter]
Enter passphrase (empty for no passphrase): [Enter a passphrase or press Enter]
Enter same passphrase again: [Repeat passphrase or press Enter]

3. View your public key by running:

cat ~/.ssh/id_rsa.pub

cat ~/.ssh/id_rsa.pub

4. This will display your public key, which looks like:

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQC7... your_email@example.com

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQC7... your_email@example.com

5. Copy the entire public key including the ssh-rsa at the beginning and your email at the end.
6. Add the SSH key to your cPanel account by navigating to “SSH Access” → “Manage SSH Keys” in your cPanel dashboard.
7. Click “Import Key” and paste your public key into the text field. Give it a descriptive name like “My Development Machine” and click “Import.”
8. Authorize the key by clicking “Manage” next to your newly imported key, then clicking “Authorize.” You’ll see a confirmation that the key is now authorized.
9. Test your SSH connection from your local machine. InMotion’s shared hosting environments must use port 2222:

ssh -p 2222 yourusername@yourdomain.com

ssh -p 2222 yourusername@yourdomain.com

10. If successful, you’ll see:

The authenticity of host '[yourdomain.com]:2222 ([IP_ADDRESS]:2222)' can't be established.

RSA key fingerprint is SHA256:...

Are you sure you want to continue connecting (yes/no)? yes

Warning: Permanently added '[yourdomain.com]:2222' (RSA) to the list of known hosts.

Welcome to yourdomain.com!

[yourusername@server ~]$

The authenticity of host '[yourdomain.com]:2222 ([IP_ADDRESS]:2222)' can't be established.

RSA key fingerprint is SHA256:...

Are you sure you want to continue connecting (yes/no)? yes

Warning: Permanently added '[yourdomain.com]:2222' (RSA) to the list of known hosts.

Welcome to yourdomain.com!

[yourusername@server ~]$

11. Remember the SSH connection format for InMotion shared hosting:

ssh://yourusername@yourdomain.com:2222/home/yourusername/repository-path

ssh://yourusername@yourdomain.com:2222/home/yourusername/repository-path

Testing Your Repository Connection

Once your repository is created in cPanel, test the connection by making a small change to your GitHub repository. You can edit a file directly on GitHub or push a change from your local development environment. The change should appear in your cPanel Git interface within a few minutes.

If changes aren’t syncing properly, check your repository settings in cPanel. Ensure the clone URL is correct and that you have the necessary permissions. You may need to update your repository credentials or re-authenticate with GitHub.

Setting Up PostgreSQL Database (If Needed)

Many Lovable projects use Supabase for their database needs during development. When deploying to InMotion Hosting, you’ll want to migrate to a PostgreSQL database hosted on your account for better performance and control.

Creating a PostgreSQL Database

1. Access the PostgreSQL Databases section in your cPanel by navigating to the “Databases” section and clicking on “PostgreSQL Databases.” You’ll see a management interface for creating and managing PostgreSQL databases.
2. Create your database by following these detailed steps:
   • Locate the “Create New Database” section at the top of the page
   • Enter a descriptive database name in the “Database Name” field. Choose something that relates to your project, such as lovable_app_prod, react_webapp_db, or myproject_main
   • Note the full database name that will be created. InMotion automatically prefixes your database name with your cPanel username, so lovable_app_prod becomes username_lovable_app_prod
   • Click “Create Database” and wait for the system to process your request.
3. Confirm database creation by looking for the success message that reads “Added the database username_lovable_app_prod” (or your chosen name). This confirms that your database has been created successfully.
4. Click “Go Back” to return to the PostgreSQL Databases main page, where you’ll now see your new database listed in the “Current Databases” section.

Creating Database Users and Permissions

1. Create a database user by scrolling down to the “PostgreSQL Users” section:
   • Enter a username in the “Username” field. Choose something descriptive like lovable_app_user or webapp_user
   • Generate a strong password by clicking the “Password Generator” button, or create your own secure password with at least 12 characters including uppercase, lowercase, numbers, and symbols
   • Confirm your password by entering it again in the “Password (Again)” field
   • Click “Create User” to create the database user account
2. Record your database credentials immediately after creation. You’ll need these for your application configuration:

Database Host: localhost (or your domain name)
Database Port: 2222
Database Name: username_lovable_app_prod
Database Username: username_lovable_app_user
Database Password: [the password you created]

Database Host: localhost (or your domain name)
Database Port: 2222
Database Name: username_lovable_app_prod
Database Username: username_lovable_app_user
Database Password: [the password you created]

3. Grant permissions to your user by scrolling to the “Add User to Database” section:
   • Select your database user from the “User” dropdown menu
   • Select your database from the “Database” dropdown menu
   • Click “Add” to proceed to the permissions screen
4. Set user permissions on the permissions page:
   • Check “ALL PRIVILEGES” to grant full access to your database user. This allows your application to create tables, insert data, update records, and delete data as needed
   • Review the individual permissions if you prefer granular control. For most React applications, you’ll need SELECT, INSERT, UPDATE, DELETE, CREATE, and DROP permissions
   • Click “Make Changes” to save the permissions
5. Verify user access by testing the database connection. You can do this through cPanel’s phpPgAdmin interface:
   • Navigate to phpPgAdmin in the “Databases” section of cPanel
   • Log in using your database credentials
   • Select your database from the left sidebar
   • Run a test query like SELECT version(); to confirm connectivity

Updating Your Application Configuration

1. Locate your application’s database configuration which is typically found in one of these files:
   • .env or .env.local (environment variables)
   • config/database.js (configuration file)
   • src/lib/database.js (database connection module)
2. Replace Supabase configuration with your InMotion PostgreSQL details. Change from:

// Old Supabase configuration
const supabaseUrl = 'https://your-project.supabase.co'
const supabaseKey = 'your-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)

// Old Supabase configuration
const supabaseUrl = 'https://your-project.supabase.co'
const supabaseKey = 'your-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)

3. To PostgreSQL configuration:

// New PostgreSQL configuration
const databaseConfig = {
  host: 'localhost', // or your domain name
  port: 2222,
  database: 'username_lovable_app_prod',
  user: 'username_lovable_app_user',
  password: 'your_secure_password',
  ssl: false // InMotion's shared hosting typically doesn't require SSL for local connections
}

// New PostgreSQL configuration
const databaseConfig = {
  host: 'localhost', // or your domain name
  port: 2222,
  database: 'username_lovable_app_prod',
  user: 'username_lovable_app_user',
  password: 'your_secure_password',
  ssl: false // InMotion's shared hosting typically doesn't require SSL for local connections
}

4. Update environment variables if your application uses them. Create or modify your .env.production file:

# Database Configuration
REACT_APP_DB_HOST=localhost
REACT_APP_DB_PORT=2222
REACT_APP_DB_NAME=username_lovable_app_prod
REACT_APP_DB_USER=username_lovable_app_user
REACT_APP_DB_PASSWORD=your_secure_password

# Application Configuration
REACT_APP_NODE_ENV=production
REACT_APP_API_URL=https://yourdomain.com/api

# Database Configuration
REACT_APP_DB_HOST=localhost
REACT_APP_DB_PORT=2222
REACT_APP_DB_NAME=username_lovable_app_prod
REACT_APP_DB_USER=username_lovable_app_user
REACT_APP_DB_PASSWORD=your_secure_password

# Application Configuration
REACT_APP_NODE_ENV=production
REACT_APP_API_URL=https://yourdomain.com/api

5. Test your database connection locally before deploying:

# Install a PostgreSQL client for testing
npm install pg

# Create a test connection script
node -e "
const { Client } = require('pg');
const client = new Client({
  host: 'yourdomain.com',
  port: 2222,
  database: 'username_lovable_app_prod',
  user: 'username_lovable_app_user',
  password: 'your_secure_password'
});
client.connect()
  .then(() => console.log('Database connection successful!'))
  .catch(err => console.error('Database connection failed:', err))
  .finally(() => client.end());
"

# Install a PostgreSQL client for testing
npm install pg

# Create a test connection script
node -e "
const { Client } = require('pg');
const client = new Client({
  host: 'yourdomain.com',
  port: 2222,
  database: 'username_lovable_app_prod',
  user: 'username_lovable_app_user',
  password: 'your_secure_password'
});
client.connect()
  .then(() => console.log('Database connection successful!'))
  .catch(err => console.error('Database connection failed:', err))
  .finally(() => client.end());
"

6. Commit your configuration changes to your GitHub repository:

git add .env.production
git add src/config/database.js  # or your specific config file
git commit -m "Update database configuration for InMotion PostgreSQL"
git push origin main

git add .env.production
git add src/config/database.js  # or your specific config file
git commit -m "Update database configuration for InMotion PostgreSQL"
git push origin main

7. Verify the changes by checking your GitHub repository to ensure the updated configuration files are committed and will be included in your next deployment.

Configuring GitHub Actions for Deployment

GitHub Actions provides the automation that makes your deployment pipeline work seamlessly. You’ll create a workflow that builds your React application and deploys it to your InMotion hosting account whenever you push changes to your main branch.

Creating Your Workflow File

1. Navigate to your GitHub repository in your web browser and ensure you’re viewing the main branch.
2. Create the workflows directory by clicking on “Create new file” in your repository’s main page.
3. Type the file path .github/workflows/deploy.yml in the file name field. GitHub will automatically create the necessary directories when you include the forward slashes.
4. Add your workflow configuration by copying and pasting the following complete YAML configuration:

name: Deploy Lovable React App to InMotion Hosting
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
    - name: Setup Node.js environment
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
    - name: Install dependencies
      run: |
        echo "Installing npm dependencies..."
        npm ci
        echo "Dependencies installed successfully"
    - name: Build React application
      run: |
        echo "Building React application for production..."
        npm run build
        echo "Build completed successfully"
        ls -la build/
    - name: Setup SSH key for deployment
      run: |
        echo "Setting up SSH key..."
        mkdir -p ~/.ssh
        echo "${{ secrets.SSH_KEY }}" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan -p 2222 ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts
        echo "SSH key configured successfully"
    - name: Deploy to InMotion Hosting
      run: |
        echo "Starting deployment to InMotion Hosting..."
        rsync -avz --delete --progress \
          -e "ssh -p 2222 -o StrictHostKeyChecking=no" \
          build/ \
          ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:${{ secrets.SSH_PATH }}
        echo "Deployment completed successfully"
    - name: Verify deployment
      run: |
        echo "Verifying deployment..."
        ssh -p 2222 ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }} "ls -la ${{ secrets.SSH_PATH }}"
        echo "Deployment verification completed"

name: Deploy Lovable React App to InMotion Hosting
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
    - name: Setup Node.js environment
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
    - name: Install dependencies
      run: |
        echo "Installing npm dependencies..."
        npm ci
        echo "Dependencies installed successfully"
    - name: Build React application
      run: |
        echo "Building React application for production..."
        npm run build
        echo "Build completed successfully"
        ls -la build/
    - name: Setup SSH key for deployment
      run: |
        echo "Setting up SSH key..."
        mkdir -p ~/.ssh
        echo "${{ secrets.SSH_KEY }}" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan -p 2222 ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts
        echo "SSH key configured successfully"
    - name: Deploy to InMotion Hosting
      run: |
        echo "Starting deployment to InMotion Hosting..."
        rsync -avz --delete --progress \
          -e "ssh -p 2222 -o StrictHostKeyChecking=no" \
          build/ \
          ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:${{ secrets.SSH_PATH }}
        echo "Deployment completed successfully"
    - name: Verify deployment
      run: |
        echo "Verifying deployment..."
        ssh -p 2222 ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }} "ls -la ${{ secrets.SSH_PATH }}"
        echo "Deployment verification completed"

5. Review the workflow configuration to understand what each step does:
   • Checkout code: Downloads your repository code to the GitHub Actions runner
   • Setup Node.js: Installs Node.js version 18 with npm caching for faster builds
   • Install dependencies: Runs npm ci to install your project dependencies
   • Build React application: Creates the production build of your React app
   • Setup SSH key: Configures SSH authentication for secure deployment
   • Deploy to InMotion: Uses rsync to transfer files to your hosting account
   • Verify deployment: Confirms that files were transferred successfully
6. Commit the workflow file by scrolling to the bottom of the page, adding a commit message like “Add GitHub Actions deployment workflow“, and clicking “Commit new file.”

Setting Up Deployment Secrets

1. Navigate to your repository settings by clicking on the “Settings” tab in your GitHub repository.
2. Access the secrets section by clicking on “Secrets and variables” in the left sidebar, then selecting “Actions.“
3. Add your InMotion hosting secrets by clicking “New repository secret” for each of the following: INMOTION_HOST Secret:
   • Name: INMOTION_HOST
   • Value: yourdomain.com (replace with your actual domain)
   • Click “Add secret“
4. INMOTION_USERNAME Secret:
   • Name: INMOTION_USERNAME
   • Value: your_cpanel_username (found in your cPanel login details)
   • Click “Add secret“
5. INMOTION_SSH_KEY Secret:
   • Name: INMOTION_SSH_KEY
   • Value: Your private SSH key content (run cat ~/.ssh/id_rsa on your local machine to view it)
   • The key should start with —–BEGIN OPENSSH PRIVATE KEY—– and end with —–END OPENSSH PRIVATE KEY—–
   • Click “Add secret“
6. INMOTION_PATH Secret:
   • Name: INMOTION_PATH
   • Value: /home/yourusername/public_html/your-app-directory (replace with your actual path)
   • Click “Add secret“
7. Verify all secrets are added by checking that you see all four secrets listed in your repository secrets page.

Implementing the Deployment Step

1. Understand the rsync command used in the deployment step:

rsync -avz --delete --progress \
  -e "ssh -p 2222 -o StrictHostKeyChecking=no" \
  build/ \
username@yourdomain.com:/home/username/public_html/your-app/

rsync -avz --delete --progress \
  -e "ssh -p 2222 -o StrictHostKeyChecking=no" \
  build/ \
username@yourdomain.com:/home/username/public_html/your-app/

2. Break down the rsync options:
   • -a: Archive mode (preserves permissions, timestamps, etc.)
   • -v: Verbose output (shows files being transferred)
   • -z: Compress data during transfer (faster over network)
   • --delete: Remove files on destination that don’t exist in source
   • --progress: Show transfer progress
   • -e "ssh -p 2222": Use SSH on port 2222 for transfer
   • -o StrictHostKeyChecking=no: Skip SSH host key verification
3. Customize the deployment path by updating the INMOTION_PATH secret to match your specific hosting setup:
   • Main domain: /home/yourusername/public_html
   • Subdomain: /home/yourusername/public_html/subdomain
   • Subdirectory: /home/yourusername/public_html/directory

Testing Your Deployment Workflow

1. Make a test change to your repository by editing a file (like updating the README.md or making a small change to your React app).
2. Commit and push the change to your main branch:

git add .
git commit -m "Test deployment workflow"
git push origin main

git add .
git commit -m "Test deployment workflow"
git push origin main

3. Monitor the workflow execution by navigating to the “Actions” tab in your GitHub repository. You should see a new workflow run starting with the name “Deploy Lovable React App to InMotion Hosting.”
4. Click on the workflow run to see detailed logs. You’ll see output like:

Run npm ci

Installing npm dependencies...

npm WARN prepare removing existing node_modules

added 1234 packages in 45s

Dependencies installed successfully

Run npm run build

Building React application for production...

> my-app@0.1.0 build

> react-scripts build

Creating an optimized production build...

Compiled successfully.

File sizes after gzip:

  123.45 KB  build/static/js/main.abc123.js
  12.34 KB   build/static/css/main.def456.css

Build completed successfully

Run npm ci

Installing npm dependencies...

npm WARN prepare removing existing node_modules

added 1234 packages in 45s

Dependencies installed successfully

Run npm run build

Building React application for production...

> my-app@0.1.0 build

> react-scripts build

Creating an optimized production build...

Compiled successfully.

File sizes after gzip:

  123.45 KB  build/static/js/main.abc123.js
  12.34 KB   build/static/css/main.def456.css

Build completed successfully

5. Check the deployment step output for successful file transfer:

Run rsync -avz --delete --progress...

Starting deployment to InMotion Hosting...

building file list ... done

./

asset-manifest.json
       1,234 100%    0.00kB/s    0:00:00 (xfr#1, to-chk=25/27)

favicon.ico
       3,456 100%    3.29MB/s    0:00:00 (xfr#2, to-chk=24/27)

index.html
       2,345 100%    2.24MB/s    0:00:00 (xfr#3, to-chk=23/27)

sent 567,890 bytes  received 1,234 bytes  379,416.00 bytes/sec

total size is 567,890  speedup is 1.00

Deployment completed successfully

Run rsync -avz --delete --progress...

Starting deployment to InMotion Hosting...

building file list ... done

./

asset-manifest.json
       1,234 100%    0.00kB/s    0:00:00 (xfr#1, to-chk=25/27)

favicon.ico
       3,456 100%    3.29MB/s    0:00:00 (xfr#2, to-chk=24/27)

index.html
       2,345 100%    2.24MB/s    0:00:00 (xfr#3, to-chk=23/27)

sent 567,890 bytes  received 1,234 bytes  379,416.00 bytes/sec

total size is 567,890  speedup is 1.00

Deployment completed successfully

6. Verify deployment success by checking that your website is accessible at your domain and that all functionality works correctly.
7. Troubleshoot any failures by examining the error logs in the GitHub Actions interface. Common issues and their solutions:
   • SSH connection failures: Check your SSH key format and ensure it’s properly formatted in the secret
   • Permission denied errors: Verify your SSH key is authorized in cPanel
   • Build failures: Check your package.json for missing dependencies
   • Rsync errors: Confirm your deployment path is correct in the INMOTION_PATH secret

Managing the Lovable to Main Branch Workflow

Lovable typically creates its own branch for development work, separate from your main branch. To deploy changes from Lovable to your live website, you’ll need to merge these changes into your main branch, which then triggers your deployment workflow.

Understanding Branch Structure

When Lovable connects to GitHub, it often creates a branch called “lovable” or similar for its development work. This keeps Lovable’s AI-generated changes separate from your main branch until you’re ready to deploy them. Your GitHub Actions workflow is configured to deploy only from the main branch, so you control when changes go live.

This branching strategy gives you the opportunity to review Lovable’s changes before they’re deployed to your live website. You can test functionality, make additional modifications, or even revert changes if needed.

Manual Merge Process

1. Check your repository’s branch structure by navigating to your GitHub repository homepage and clicking on the branch dropdown (usually shows “main” by default). You should see your main branch and the Lovable development branch (often named “lovable” or similar).
2. Review recent commits on the Lovable branch:
   • Click on the Lovable branch to switch to it
   • Examine recent commits by clicking on the commit history. You’ll see entries like:

Update component styling and layout
Add new user authentication features  
Fix database connection issues
Implement responsive design improvements

Update component styling and layout
Add new user authentication features  
Fix database connection issues
Implement responsive design improvements

• Review the changes by clicking on individual commits to see what code was modified

3. Create a pull request to merge Lovable changes into your main branch:
   • Click “Pull requests” in the top navigation of your repository
   • Click “New pull request” (green button on the right)
   • Set the base branch to “main” using the dropdown on the left
   • Set the compare branch to your Lovable branch using the dropdown on the right
   • Review the pull request preview which shows you:

Able to merge. These branches can be automatically merged.
Showing 15 changed files with 234 additions and 67 deletions.

Able to merge. These branches can be automatically merged.
Showing 15 changed files with 234 additions and 67 deletions.

4. Examine the code changes in detail:
   • Scroll through the “Files changed” tab to see exactly what modifications were made
   • Look for critical changes like:
     • Database configuration updates
     • New component additions
     • Styling modifications
     • API endpoint changes
   • Add comments on specific lines if you notice issues that need attention
5. Add a descriptive pull request title and description:
   • Title example: “Deploy latest Lovable updates – authentication and UI improvements”
   • Description example:

This PR includes the following updates from Lovable:

- New user authentication system
- Improved responsive design
- Database connection optimizations
- UI component updates

Ready for production deployment.

This PR includes the following updates from Lovable:

- New user authentication system
- Improved responsive design
- Database connection optimizations
- UI component updates

Ready for production deployment.

6. Merge the pull request once you’re satisfied with the changes:
   • Click “Merge pull request” (green button)
   • Choose your merge strategy:
     • Create a merge commit: Preserves the branch history
     • Squash and merge: Combines all commits into one clean commit
     • Rebase and merge: Replays commits without creating a merge commit
   • Click “Confirm merge” to complete the process
7. Monitor the automatic deployment that triggers after merging:
   • Navigate to the “Actions” tab immediately after merging
   • Click on the latest workflow run that should be starting
   • Watch the deployment progress in real-time:

Checkout code
Setup Node.js environment  
Install dependencies
Build React application
Setup SSH key for deployment
Deploy to InMotion Hosting

Checkout code
Setup Node.js environment  
Install dependencies
Build React application
Setup SSH key for deployment
Deploy to InMotion Hosting

8. Verify deployment success by checking your live website:
   • Visit your domain in a web browser
   • Test key functionality that was updated
   • Check browser console for any JavaScript errors
   • Test on mobile devices if responsive changes were made

Alternative: Command Line Merge Process

If you prefer working from the command line, you can merge branches locally:

1. Clone your repository if you haven’t already:

git clone https://github.com/yourusername/your-repo-name.git
cd your-repo-name

git clone https://github.com/yourusername/your-repo-name.git
cd your-repo-name

2. Fetch all branches from your remote repository:

git fetch origin

git fetch origin

3. List all branches to see your available branches:

git branch -a

git branch -a

4. Output:

* main
  remotes/origin/main
  remotes/origin/lovable

* main
  remotes/origin/main
  remotes/origin/lovable

5. Switch to your main branch:

git checkout main

git checkout main

6. Pull the latest changes from the remote main branch:

git pull origin main

git pull origin main

7. Merge the Lovable branch into main:

git merge origin/lovable

git merge origin/lovable

8. If the merge is successful, you’ll see:

Auto-merging src/components/UserProfile.js
Auto-merging src/styles/main.css
Merge made by the 'recursive' strategy.
15 files changed, 234 insertions(+), 67 deletions(-)
create mode 100644 src/components/NewFeature.js

Auto-merging src/components/UserProfile.js
Auto-merging src/styles/main.css
Merge made by the 'recursive' strategy.
15 files changed, 234 insertions(+), 67 deletions(-)
create mode 100644 src/components/NewFeature.js

9. Push the merged changes to trigger deployment:

it push origin main

it push origin main

10. Handle merge conflicts if they occur:

# If you see a message like:
# Auto-merging src/config/database.js
# CONFLICT (content): Merge conflict in src/config/database.js
# Automatic merge failed; fix conflicts and then commit the result.
# Edit the conflicted files to resolve conflicts
nano src/config/database.js

# Look for conflict markers and resolve them:
# <<<<<<< HEAD
# Your current code
# =======
# Lovable's code
# >>>>>>> origin/lovable
# After resolving conflicts, add the files
git add src/config/database.js

# Complete the merge
git commit -m "Merge lovable branch with conflict resolution"

# Push the changes
git push origin main

# If you see a message like:
# Auto-merging src/config/database.js
# CONFLICT (content): Merge conflict in src/config/database.js
# Automatic merge failed; fix conflicts and then commit the result.
# Edit the conflicted files to resolve conflicts
nano src/config/database.js

# Look for conflict markers and resolve them:
# <<<<<<< HEAD
# Your current code
# =======
# Lovable's code
# >>>>>>> origin/lovable
# After resolving conflicts, add the files
git add src/config/database.js

# Complete the merge
git commit -m "Merge lovable branch with conflict resolution"

# Push the changes
git push origin main

Setting Up Automated Merges (Optional)

For a more streamlined workflow, you can configure automatic merging from the Lovable branch to main under certain conditions. This requires setting up additional GitHub Actions workflows that monitor the Lovable branch and create pull requests automatically.

However, this approach requires careful consideration. Automatic merges mean that Lovable’s changes deploy immediately without human review. This can be convenient for solo developers but may not be appropriate for applications where code review is important.

If you choose to implement automatic merges, consider adding automated testing to your workflow. This ensures that code changes pass basic functionality tests before being deployed to your live website.

Configuring Your React App for Production

Your React application needs specific configuration adjustments to work correctly in the InMotion hosting environment. These changes ensure that your app loads properly, handles routing correctly, and connects to your production database.

Building for Production

React applications need to be built for production to achieve optimal performance and compatibility. Your GitHub Actions workflow handles this through the npm run build command, which creates optimized, minified files ready for deployment.

Verify that your package.json file includes the correct build script. Most React applications use react-scripts build or a similar command. If your Lovable project uses a different build system, adjust your workflow accordingly.

The build process creates a build directory containing all the files needed for your live website. These files are what get deployed to your InMotion hosting account, not your source code. This means your live website contains only the compiled, optimized version of your application.

Handling Client-Side Routing

If your React application uses client-side routing (React Router), you’ll need to configure your web server to handle route requests correctly. When users navigate to different pages in your app, the web server needs to serve your React application instead of trying to find physical files.

Create a .htaccess file in your project’s public directory with the following content:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

This configuration tells Apache to serve your index.html file for any request that doesn’t match an existing file. This allows React Router to handle navigation on the client side while ensuring that direct links to your app’s routes work correctly.

Environment Variables and Configuration

Your production application needs a different configuration than your development environment. Database connections, API endpoints, and other settings should be optimized for your InMotion hosting environment.

React applications typically use environment variables for configuration. Create a .env.production file in your project root with production-specific settings. These variables will be used automatically when your application is built for production.

Common production environment variables include:

• Database connection strings
• API endpoint URLs
• Feature flags or configuration options
• Third-party service keys

Remember that React environment variables must be prefixed with REACT_APP_ to be available in your application code. Variables without this prefix are not included in the production build.

Optimizing Performance

InMotion’s shared hosting environment performs well, but you can optimize your React application for even better performance. Enable gzip compression by adding appropriate headers to your .htaccess file:

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

This configuration compresses your application files before serving them to users, reducing load times and bandwidth usage.

Troubleshooting Common Deployment Issues

Even with careful setup, you might encounter issues during deployment. Here are the most common problems and their detailed solutions.

Build Failures

1. Identify build failure symptoms by checking your GitHub Actions workflow logs. You’ll see error messages like:

Run npm run build
Building React application for production...

> my-app@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.
Module not found: Can't resolve 'some-missing-package' in '/home/runner/work/my-app/my-app/src'

Run npm run build
Building React application for production...

> my-app@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.
Module not found: Can't resolve 'some-missing-package' in '/home/runner/work/my-app/my-app/src'

2. Check for missing dependencies by comparing your local package.json with your repository:

# On your local machine, list all installed packages
npm list --depth=0

# Compare with your package.json dependencies
cat package.json | grep -A 20 '"dependencies"'

# On your local machine, list all installed packages
npm list --depth=0

# Compare with your package.json dependencies
cat package.json | grep -A 20 '"dependencies"'

3. Fix missing dependencies by installing them locally and updating your repository:

# Install missing packages
npm install missing-package-name

# Verify the package.json is updated
git diff package.json

# Commit the changes
git add package.json package-lock.json
git commit -m "Add missing dependencies"
git push origin main

# Install missing packages
npm install missing-package-name

# Verify the package.json is updated
git diff package.json

# Commit the changes
git add package.json package-lock.json
git commit -m "Add missing dependencies"
git push origin main

4. Resolve Node.js version conflicts by checking your local Node.js version:

# Check your local Node.js version
node --version

# Output: v18.17.0
# Update your GitHub Actions workflow to match
# Edit .github/workflows/deploy.yml and change:
node-version: '18'  # Match your local version

# Check your local Node.js version
node --version

# Output: v18.17.0
# Update your GitHub Actions workflow to match
# Edit .github/workflows/deploy.yml and change:
node-version: '18'  # Match your local version

5. Test the build locally before pushing to GitHub:

# Clean install dependencies
rm -rf node_modules package-lock.json
npm install

# Run the build command
npm run build

# Check if build directory is created
ls -la build/

# Clean install dependencies
rm -rf node_modules package-lock.json
npm install

# Run the build command
npm run build

# Check if build directory is created
ls -la build/

Deployment Connection Issues

1. Diagnose SSH connection problems by testing your connection manually:

# Test SSH connection to your InMotion account
ssh -p 2222 yourusername@yourdomain.com

# Test SSH connection to your InMotion account
ssh -p 2222 yourusername@yourdomain.com

2. SSH error – Connection refused:

ssh: connect to host yourdomain.com port 2222: Connection refused

ssh: connect to host yourdomain.com port 2222: Connection refused

Solution: Verify your domain name and ensure SSH is enabled in cPanel. 

3. SSH error – Permission denied:

yourusername@yourdomain.com: Permission denied (publickey).

yourusername@yourdomain.com: Permission denied (publickey).

Solution: Check your SSH key configuration:

# Verify your SSH key exists
ls -la ~/.ssh/id_rsa*

# Check your SSH key is properly formatted
head -1 ~/.ssh/id_rsa

# Should show: -----BEGIN OPENSSH PRIVATE KEY-----

# Test SSH key authentication
ssh -p 2222 -i ~/.ssh/id_rsa yourusername@yourdomain.com

# Verify your SSH key exists
ls -la ~/.ssh/id_rsa*

# Check your SSH key is properly formatted
head -1 ~/.ssh/id_rsa

# Should show: -----BEGIN OPENSSH PRIVATE KEY-----

# Test SSH key authentication
ssh -p 2222 -i ~/.ssh/id_rsa yourusername@yourdomain.com

4. Fix GitHub Actions SSH key issues:

# On your local machine, display your private key
cat ~/.ssh/id_rsa

# Copy the ENTIRE key including the BEGIN and END lines
# Update your GitHub secret INMOTION_SSH_KEY with this content

# On your local machine, display your private key
cat ~/.ssh/id_rsa

# Copy the ENTIRE key including the BEGIN and END lines
# Update your GitHub secret INMOTION_SSH_KEY with this content

5. Verify rsync command syntax by testing it manually:

# Test the rsync command from your local machine
rsync -avz --dry-run --delete \
  -e "ssh -p 2222 -o StrictHostKeyChecking=no" \
  ./build/ \

yourusername@yourdomain.com:/home/yourusername/public_html/your-app/

Expected output:
building file list ... done

./
index.html
static/
static/css/
static/css/main.abc123.css
static/js/
static/js/main.def456.js

sent 1,234 bytes  received 56 bytes  516.00 bytes/sec

total size is 567,890  speedup is 440.38 (DRY RUN)

# Test the rsync command from your local machine
rsync -avz --dry-run --delete \
  -e "ssh -p 2222 -o StrictHostKeyChecking=no" \
  ./build/ \

yourusername@yourdomain.com:/home/yourusername/public_html/your-app/

Expected output:
building file list ... done

./
index.html
static/
static/css/
static/css/main.abc123.css
static/js/
static/js/main.def456.js

sent 1,234 bytes  received 56 bytes  516.00 bytes/sec

total size is 567,890  speedup is 440.38 (DRY RUN)

File Permission Problems

1. Check file permissions on your hosting account:

# SSH into your InMotion account
ssh -p 2222 yourusername@yourdomain.com

# Check permissions on your web directory
ls -la /home/yourusername/public_html/your-app/

# SSH into your InMotion account
ssh -p 2222 yourusername@yourdomain.com

# Check permissions on your web directory
ls -la /home/yourusername/public_html/your-app/

Expected output:

drwxr-xr-x  3 yourusername yourusername  4096 Oct 15 10:30 .
drwxr-xr-x  8 yourusername yourusername  4096 Oct 15 10:25 ..
-rw-r--r--  1 yourusername yourusername  1234 Oct 15 10:30 index.html
drwxr-xr-x  2 yourusername yourusername  4096 Oct 15 10:30 static

drwxr-xr-x  3 yourusername yourusername  4096 Oct 15 10:30 .
drwxr-xr-x  8 yourusername yourusername  4096 Oct 15 10:25 ..
-rw-r--r--  1 yourusername yourusername  1234 Oct 15 10:30 index.html
drwxr-xr-x  2 yourusername yourusername  4096 Oct 15 10:30 static

2. Fix incorrect file permissions:

# Set correct permissions for directories (755)
find /home/yourusername/public_html/your-app/ -type d -exec chmod 755 {} \;

# Set correct permissions for files (644)
find /home/yourusername/public_html/your-app/ -type f -exec chmod 644 {} \;

# Verify permissions are correct
ls -la /home/yourusername/public_html/your-app/

# Set correct permissions for directories (755)
find /home/yourusername/public_html/your-app/ -type d -exec chmod 755 {} \;

# Set correct permissions for files (644)
find /home/yourusername/public_html/your-app/ -type f -exec chmod 644 {} \;

# Verify permissions are correct
ls -la /home/yourusername/public_html/your-app/

3. Update your GitHub Actions workflow to set permissions automatically:

- name: Deploy to InMotion Hosting

  run: |

    echo "Starting deployment to InMotion Hosting..."

    rsync -avz --delete --progress \

      --chmod=D755,F644 \

      -e "ssh -p 2222 -o StrictHostKeyChecking=no" \

      build/ \

      ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:${{ secrets.SSH_PATH }}

    echo "Deployment completed successfully"

- name: Deploy to InMotion Hosting

  run: |

    echo "Starting deployment to InMotion Hosting..."

    rsync -avz --delete --progress \

      --chmod=D755,F644 \

      -e "ssh -p 2222 -o StrictHostKeyChecking=no" \

      build/ \

      ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:${{ secrets.SSH_PATH }}

    echo "Deployment completed successfully"

Database Connection Errors

1. Test database connectivity from your hosting account:

# SSH into your InMotion account
ssh -p 2222 yourusername@yourdomain.com

# Test PostgreSQL connection
psql -h localhost -p 2222 -U yourusername_dbuser -d yourusername_dbname

# SSH into your InMotion account
ssh -p 2222 yourusername@yourdomain.com

# Test PostgreSQL connection
psql -h localhost -p 2222 -U yourusername_dbuser -d yourusername_dbname

Successful connection output:

Password for user yourusername_dbuser: [enter your password]

psql (13.7)

Type "help" for help.

yourusername_dbname=> SELECT version();

version

----------------------------------------------------------------------------------------------------

PostgreSQL 13.7 on x86_64-pc-linux-gnu, compiled by gcc (GCC) 8.5.0 20210514 (Red Hat 8.5.0-4)

(1 row)

yourusername_dbname=> \q

Password for user yourusername_dbuser: [enter your password]

psql (13.7)

Type "help" for help.

yourusername_dbname=> SELECT version();

version

----------------------------------------------------------------------------------------------------

PostgreSQL 13.7 on x86_64-pc-linux-gnu, compiled by gcc (GCC) 8.5.0 20210514 (Red Hat 8.5.0-4)

(1 row)

yourusername_dbname=> \q

2. Database Error – Connection refused:

psql: error: connection to server at "localhost" (127.0.0.1), port 2222 failed: Connection refused

psql: error: connection to server at "localhost" (127.0.0.1), port 2222 failed: Connection refused

Solution: Check that PostgreSQL is running and your database exists in cPanel.

3. Database Error – Authentication failed:

psql: error: connection to server at "localhost" (127.0.0.1), port 2222 failed: FATAL: password authentication failed for user "yourusername_dbuser"

psql: error: connection to server at "localhost" (127.0.0.1), port 2222 failed: FATAL: password authentication failed for user "yourusername_dbuser"

Solution: Verify your database username and password in cPanel.

4. Test database connection from your application:

# Create a test script on your hosting account
cat > test_db_connection.php << 'EOF'

<?php
$host = 'localhost';
$port = '2222';
$dbname = 'yourusername_dbname';
$user = 'yourusername_dbuser';
$password = 'your_password';
$dsn = "pgsql:host=$host;port=$port;dbname=$dbname";

try {
    $pdo = new PDO($dsn, $user, $password);
    echo "Database connection successful!\n";
    $stmt = $pdo->query('SELECT version()');
    $version = $stmt->fetchColumn();
    echo "PostgreSQL version: $version\n";

} catch (PDOException $e) {
    echo "Database connection failed: " . $e->getMessage() . "\n";
}
?>

EOF

# Run the test script
php test_db_connection.php

# Create a test script on your hosting account
cat > test_db_connection.php << 'EOF'

<?php
$host = 'localhost';
$port = '2222';
$dbname = 'yourusername_dbname';
$user = 'yourusername_dbuser';
$password = 'your_password';
$dsn = "pgsql:host=$host;port=$port;dbname=$dbname";

try {
    $pdo = new PDO($dsn, $user, $password);
    echo "Database connection successful!\n";
    $stmt = $pdo->query('SELECT version()');
    $version = $stmt->fetchColumn();
    echo "PostgreSQL version: $version\n";

} catch (PDOException $e) {
    echo "Database connection failed: " . $e->getMessage() . "\n";
}
?>

EOF

# Run the test script
php test_db_connection.php

5. Update your application’s database configuration with the correct connection parameters:

// In your React app's environment variables

REACT_APP_DB_HOST=localhost
REACT_APP_DB_PORT=2222
REACT_APP_DB_NAME=yourusername_dbname
REACT_APP_DB_USER=yourusername_dbuser
REACT_APP_DB_PASSWORD=your_secure_password

// Test the connection in your application

console.log('Database config:', {
  host: process.env.REACT_APP_DB_HOST,
  port: process.env.REACT_APP_DB_PORT,
  database: process.env.REACT_APP_DB_NAME,
  user: process.env.REACT_APP_DB_USER
});

// In your React app's environment variables

REACT_APP_DB_HOST=localhost
REACT_APP_DB_PORT=2222
REACT_APP_DB_NAME=yourusername_dbname
REACT_APP_DB_USER=yourusername_dbuser
REACT_APP_DB_PASSWORD=your_secure_password

// Test the connection in your application

console.log('Database config:', {
  host: process.env.REACT_APP_DB_HOST,
  port: process.env.REACT_APP_DB_PORT,
  database: process.env.REACT_APP_DB_NAME,
  user: process.env.REACT_APP_DB_USER
});

Advanced Troubleshooting Commands

1. Monitor your deployment in real-time:

# Watch GitHub Actions workflow progress
# (Install GitHub CLI: https://cli.github.com/)
gh run watch

# View detailed logs
gh run view --log

# Watch GitHub Actions workflow progress
# (Install GitHub CLI: https://cli.github.com/)
gh run watch

# View detailed logs
gh run view --log

2. Debug SSH connection issues:

# Test SSH connection with verbose output
ssh -p 2222 -v yourusername@yourdomain.com

# Test SSH key specifically
ssh -p 2222 -i ~/.ssh/id_rsa -v yourusername@yourdomain.com

# Test SSH connection with verbose output
ssh -p 2222 -v yourusername@yourdomain.com

# Test SSH key specifically
ssh -p 2222 -i ~/.ssh/id_rsa -v yourusername@yourdomain.com

3. Verify your deployed files:

# SSH into your hosting account
ssh -p 2222 yourusername@yourdomain.com

# Check deployed files
ls -la /home/yourusername/public_html/your-app/

# Verify file contents
head -10 /home/yourusername/public_html/your-app/index.html

# Check file timestamps
find /home/yourusername/public_html/your-app/ -type f -exec ls -la {} \;

# SSH into your hosting account
ssh -p 2222 yourusername@yourdomain.com

# Check deployed files
ls -la /home/yourusername/public_html/your-app/

# Verify file contents
head -10 /home/yourusername/public_html/your-app/index.html

# Check file timestamps
find /home/yourusername/public_html/your-app/ -type f -exec ls -la {} \;

Updating Your Deployed Application

Once your initial deployment is complete, you’ll need to manage ongoing updates as you continue developing your application in Lovable. This process becomes routine once you understand the workflow.

Development Workflow

Your typical development cycle will involve making changes in Lovable, which automatically sync to your Lovable branch on GitHub. When you’re ready to deploy updates, you’ll merge the Lovable branch into your main branch, triggering an automatic deployment.

Monitor your GitHub repository to see when Lovable pushes new changes. You’ll receive notifications about commits, and you can review the changes before deciding to deploy them.

Consider implementing a staging environment where you can test changes before deploying to your live website. This gives you an additional layer of quality control and helps catch issues before they affect your users.

Rollback Procedures

If a deployment causes issues on your live website, you need a quick way to revert to a previous version. GitHub maintains a complete history of your code, making rollbacks straightforward.

To rollback, identify the last known good commit in your main branch. Create a new branch from this commit, then merge it back into main. This will trigger a new deployment with your previous code.

Alternatively, you can revert specific commits using GitHub’s interface. Navigate to the problematic commit and click “Revert” to create a new commit that undoes the changes.

Monitoring Deployments

Keep track of your deployments by monitoring the GitHub Actions workflow results. Failed deployments should be investigated immediately to prevent your website from becoming out of sync with your code.

Set up notifications for workflow failures so you’re alerted when deployments don’t complete successfully. GitHub can send email notifications or integrate with Slack and other communication tools.

Consider adding health checks to your deployment workflow. These can verify that your website is accessible and functioning correctly after each deployment.

High-Level Process Summary

Here’s the complete process for deploying updates to your Lovable application:

Initial Setup (One-Time Configuration)

1. Connect Lovable to GitHub:
   • Access your Lovable project editor
   • Click “GitHub” → “Connect to GitHub” in the top-right corner
   • Authorize the Lovable GitHub App with appropriate permissions
   • Select your GitHub account or organization
   • Click “Create Repository” to establish the connection
   • Verify the repository appears in your GitHub account
2. Configure InMotion cPanel Git Repository:
   • Log into your InMotion cPanel account
   • Navigate to “Files” → “Git Version Control”
   • Click “Create” and toggle “Clone a Repository”
   • Enter your GitHub repository’s HTTPS clone URL
   • Set repository path (e.g., public_html/your-app-name)
   • Provide a descriptive repository name
   • Click “Create” and wait for completion
3. Set up SSH authentication:
   • Generate SSH key pair on your local machine: ssh-keygen -t rsa -b 4096
   • Copy your public key: cat ~/.ssh/id_rsa.pub
   • Add the public key to cPanel under “SSH Access” → “Manage SSH Keys”
   • Test SSH connection: ssh -p 2222 yourusername@yourdomain.com
4. Create PostgreSQL database (if needed):
   • Navigate to “Databases” → “PostgreSQL Databases” in cPanel
   • Create new database with descriptive name
   • Create database user with strong password
   • Grant all privileges to the user for the database
   • Update your application’s database configuration
5. Configure GitHub Actions workflow:
   • Create .github/workflows/deploy.yml in your repository
   • Set up the complete workflow with build and deployment steps
   • Configure repository secrets in GitHub Settings:
     • INMOTION_HOST: Your domain name
     • INMOTION_USERNAME: Your cPanel username
     • INMOTION_SSH_KEY: Your private SSH key content
     • INMOTION_PATH: Path to your web directory
6. Test the complete pipeline:
   • Make a test commit to your main branch
   • Monitor the GitHub Actions workflow execution
   • Verify files are deployed correctly to your hosting account
   • Test your live website functionality

Regular Update Process

1. Develop in Lovable:
   • Use Lovable’s AI-powered development environment to make changes
   • Add new features, fix bugs, or modify your application
   • Lovable automatically commits changes to your GitHub repository’s development branch
2. Monitor GitHub repository:
   • Check your GitHub repository for new commits from Lovable
   • Review commit messages to understand what changes were made
   • Example commit messages you might see:

feat: Add user profile management interface
fix: Resolve database connection timeout issues  
style: Update responsive design for mobile devices
refactor: Improve component organization and structure

feat: Add user profile management interface
fix: Resolve database connection timeout issues  
style: Update responsive design for mobile devices
refactor: Improve component organization and structure

3. Review changes before deployment:
   • Navigate to your repository and switch to the Lovable branch
   • Click on recent commits to see detailed code changes
   • Look for potential issues or conflicts
   • Consider testing changes in a staging environment if available
4. Create and review pull request:
   • Click “Pull requests” → “New pull request”
   • Set base branch to “main” and compare branch to your Lovable branch
   • Review the “Files changed” tab to see all modifications
   • Add descriptive title and comments
   • Example pull request descriptions:

Deploy Update: User Authentication & UI Improvements

Changes include:
- New user login/registration system
- Improved dashboard layout
- Mobile-responsive navigation
- Database query optimizations

Tested functionality:
- User registration flow
- Login/logout process
- Dashboard responsiveness
- Database connections

Deploy Update: User Authentication & UI Improvements

Changes include:
- New user login/registration system
- Improved dashboard layout
- Mobile-responsive navigation
- Database query optimizations

Tested functionality:
- User registration flow
- Login/logout process
- Dashboard responsiveness
- Database connections

5. Merge and deploy:
   • Click “Merge pull request” after review
   • Choose merge strategy (merge commit, squash, or rebase)
   • Click “Confirm merge” to complete the process
   • GitHub Actions automatically triggers deployment workflow
6. Monitor deployment progress:
   • Navigate to “Actions” tab immediately after merging
   • Click on the latest workflow run
   • Watch each step complete:

Checkout code (15s)
Setup Node.js environment (22s)
Install dependencies (1m 34s)
Build React application (2m 12s)
Setup SSH key for deployment (8s)
Deploy to InMotion Hosting (1m 45s)
Verify deployment (12s)

Checkout code (15s)
Setup Node.js environment (22s)
Install dependencies (1m 34s)
Build React application (2m 12s)
Setup SSH key for deployment (8s)
Deploy to InMotion Hosting (1m 45s)
Verify deployment (12s)

7. Verify deployment success:
   • Visit your live website URL
   • Test all updated functionality
   • Check browser console for JavaScript errors
   • Test responsive design on different devices
   • Verify database connections are working
8. Handle deployment failures (if they occur):
   • Check GitHub Actions logs for error messages
   • Common issues and quick fixes:
     • Build failures: Check package.json dependencies
     • SSH connection issues: Verify SSH keys and port 2222
     • Permission errors: Check file permissions in deployment script
     • Database errors: Verify connection parameters

Emergency Rollback Process

1. Identify the issue:
   • Determine if the problem is with the latest deployment
   • Check error logs and user reports
   • Access your website to confirm the issue
2. Perform quick rollback:
   • Navigate to your GitHub repository
   • Go to “Actions” tab and find the last successful deployment
   • Click on “Re-run jobs” to redeploy the previous working version
   • Alternatively, revert the problematic commit:

git log --oneline  # Find the commit to revert
git revert abc123  # Revert the specific commit
git push origin main  # Push the revert commit

git log --oneline  # Find the commit to revert
git revert abc123  # Revert the specific commit
git push origin main  # Push the revert commit

3. Verify rollback success:
   • Check that your website is functioning correctly
   • Test critical functionality
   • Monitor for any remaining issues

Ongoing Maintenance Commands

1. Check deployment status:

# SSH into your hosting account
ssh -p 2222 yourusername@yourdomain.com

# Check recent deployments
ls -la /home/yourusername/public_html/your-app/

# View file timestamps to confirm latest deployment
find /home/yourusername/public_html/your-app/ -type f -exec ls -la {} \; | head -10

# SSH into your hosting account
ssh -p 2222 yourusername@yourdomain.com

# Check recent deployments
ls -la /home/yourusername/public_html/your-app/

# View file timestamps to confirm latest deployment
find /home/yourusername/public_html/your-app/ -type f -exec ls -la {} \; | head -10

2. Monitor GitHub Actions usage:
   • Check your GitHub Actions usage in repository settings
   • Review workflow run history for patterns
   • Optimize workflows if needed to reduce build times
3. Database maintenance:

# Connect to your PostgreSQL database
psql -h localhost -p 2222 -U yourusername_dbuser -d yourusername_dbname

# Check database size and health
SELECT pg_size_pretty(pg_database_size('yourusername_dbname'));

# View active connections
SELECT * FROM pg_stat_activity WHERE datname = 'yourusername_dbname';

# Connect to your PostgreSQL database
psql -h localhost -p 2222 -U yourusername_dbuser -d yourusername_dbname

# Check database size and health
SELECT pg_size_pretty(pg_database_size('yourusername_dbname'));

# View active connections
SELECT * FROM pg_stat_activity WHERE datname = 'yourusername_dbname';

4. Update dependencies periodically:

# In your local development environment
npm outdated  # Check for outdated packages
npm update    # Update to latest compatible versions
npm audit     # Check for security vulnerabilities
npm audit fix # Fix security issues automatically

# In your local development environment
npm outdated  # Check for outdated packages
npm update    # Update to latest compatible versions
npm audit     # Check for security vulnerabilities
npm audit fix # Fix security issues automatically

Performance Optimization Checklist

1. Monitor website performance:
   • Use Google PageSpeed Insights to test your site
   • Check Core Web Vitals metrics
   • Monitor loading times after each deployment
2. Optimize build process:
   • Enable npm cache in GitHub Actions (already configured in the workflow)
   • Consider using build caching for faster deployments
   • Optimize image assets and file sizes
3. Database optimization:
   • Review database query performance
   • Add indexes for frequently queried fields
   • Monitor database connection pool usage

Conclusion and Next Steps

You’ve successfully created a robust deployment pipeline that connects Lovable’s AI-powered development environment with professional hosting through InMotion Hosting. This setup gives you the benefits of rapid development while maintaining the reliability and control needed for production applications.

Your deployment workflow now automatically syncs changes from Lovable to GitHub, builds your React application for production, and deploys updates to your InMotion Hosting account. The database migration from Supabase to PostgreSQL provides you with full control over your application’s data layer.

Moving forward, you can continue developing in Lovable while having confidence that your changes will be deployed reliably to production. The version control integration ensures you have a complete history of your application’s development and the ability to roll back changes if needed.

Consider expanding your deployment pipeline with additional features like staging environments for testing changes before production deployment, automated testing to catch issues before they reach users, and monitoring tools to track your application’s performance and uptime.

The foundation you’ve built supports scaling your application as your needs grow. You can add team members to your development process, implement more sophisticated database features, and take advantage of InMotion Hosting’s scalability options as your user base expands.

This deployment approach represents a professional development workflow that bridges the gap between AI-assisted development and production hosting, giving you the tools to build and maintain sophisticated web applications efficiently and reliably.

Ready to take your web development to the next level? InMotion Hosting’s robust shared hosting platform provides the perfect foundation for your Lovable-created applications. With full Git integration, PostgreSQL support, and expert migration assistance, you can focus on building great applications while we handle the hosting infrastructure.

There are times when it seems your website may respond slowly. Slow response time may indicate a problem. Most just assume the server is overloaded and call their technical support. Many times, the support representative will ask for a ping and traceroute report. While we have instructions on running this report, it can seem rather cryptic when looking at it. But it’s a great strategy for troubleshooting server response times with your hosting.

It doesn’t take a degree or any kind of special training to decode a traceroute report. In fact, we will teach you how to read a traceroute in this article. This way, if you ever have slow response from your site, you can run a report and quickly determine whether you need to contact our Live Support team.

How a Traceroute Works

Whenever a computer connects to a website, it must travel a path that consists of several points, a little like connecting the dots between your computer and the website. The signal starts at your local router in your home or business, then moves out to your ISP, then onto the main networks. From there it may have several junctions until it gets off the Internet highway at the local network for the website and then to the webserver itself.

A traceroute displays the path that the signal took as it traveled around the Internet to the website. It also displays times which are the response times that occurred at each stop along the route. If there is a connection problem or latency connecting to a site, it will show up in these times. You will be able to identify which of the stops (also called ‘hops’) along the route is the culprit.

Running a ping test can help you determine if your website is slow because of a connection issue. If it is, then running a traceroute test can help you to determine where in the connection there is a slowdown.

How to Run a Ping / Traceroute Test

InMotion Hosting has a free tool that can automatically and consistently analyze the results of a traceroute test. If you run the traceroute test as described below, you can use our traceroute parser tool here to see if you may be experiencing a connectivity problem.

Windows

If you are on a Windows computer:

1. Click your Start menu and type cmd.
2. You will see the Command Promt app listed, select it.
3. Type the following command then hit Enter.

   ping example.com

4. When it is done, type the following command and hit enter.

   tracert example.com

When both tests are complete, you can copy and paste the results into a ticket to the Live Support Team to review. To copy the results, left-click in the command prompt and highlight the text, then right-click to copy the text. You can then right click and paste the results into a ticket. Be sure to include your current IP address. If you are unsure of your current IP address please visit the link below to obtain it:
What is my current IP Address?

Mac

If you are on a Mac you can follow these steps to perform a ping/traceroute test.

1. Open Applications and then open Utilities.
2. Open Terminal.
3. Type the following command then hit Enter.

   ping example.com

4. Stop the ping after 4 or 5 results by holding down CTRL-C.
5. When that is done, type the following command then hit Enter.

   traceroute example.com

How to Read a Traceroute

Once the traceroute is run, it generates the report as it goes along the route. Below is a sample traceroute:

C:\>tracert www.example.com
Tracing route to example.com [10.10.242.22]
over a maximum of 30 hops:

  1    <1 ms    <1 ms    <1 ms  172.16.10.2
  2     *        *        *     Request timed out.
  3     2 ms     2 ms     2 ms  vbchtmnas9k02-t0-4-0-1.coxfiber.net [216.54.0.29]
  4    12 ms    13 ms     3 ms  68.10.8.229
  5     7 ms     7 ms     7 ms  chndbbr01-pos0202.rd.ph.cox.net [68.1.0.242]
  6    10 ms     8 ms     9 ms  ip10-167-150-2.at.at.cox.net [70.167.150.2]
  7    10 ms     9 ms    10 ms  100ge7-1.core1.nyc4.he.net [184.105.223.166]
  8    72 ms    84 ms    74 ms  10gr10-3.core1.lax1.he.net [72.52.92.226]
  9    76 ms    76 ms    90 ms  10g1-3.core1.lax2.he.net [72.52.92.122]
 10    81 ms    74 ms    74 ms  205.134.225.38
 11    72 ms    71 ms    72 ms  www.inmotionhosting.com [192.145.237.216]

As you can see, there are several rows divided into columns on the report. Each row represents a “hop” along the route. Think of it as a check-in point where the signal gets its next set of directions. Each row is divided into five columns. A sample row is below:

 10    81 ms    74 ms    74 ms  205.134.225.38

Let’s break this particular hop down into its parts.

Hop Number – This is the first column and is simply the number of the hop along the route. In this case, it is the tenth hop.

RTT Columns – The next three columns display the round trip time (RTT) for your packet to reach that point and return to your computer. This is listed in milliseconds. There are three columns because the traceroute sends three separate signal packets. This is to display consistency, or a lack thereof, in the route.

Domain/IP column – The last column has the IP address of the router. If it is available, the domain name will also be listed.

Checking the Hop Times

The times listed in the RTT columns are the main thing you want to look at when evaluating a traceroute. Consistent times are what you are looking for. There may be specific hops with increased latency times but they may not indicate that there is an issue. You need to look at a pattern over the whole report. Times above 150ms are considered to be long for a trip within the continental United States. (Times over 150ms may be normal if the signal crosses an ocean, however.) but issues may show up with very large numbers.

Increasing Latency Towards the Target

If you see a sudden increase in a hop and it keeps increasing to the destination (if it even gets there), then this indicates an issue starting at the hop with the increase. This may well cause packet loss where you will even see asterisks (*) in the report.

1    10 ms     7 ms     9 ms  172.16.10.2
2    78 ms   100 ms    32 ms  ip10-167-150-2.at.at.cox.net [70.167.150.2]
3    78 ms    84 ms    75 ms  100ge7-1.core1.nyc4.he.net [184.105.223.166]
4   782 ms   799 ms     * ms  10gr10-3.core1.lax1.he.net [72.52.92.226]
5     * ms   899 ms   901 ms  10g1-3.core1.lax2.he.net [72.52.92.122]
6   987 ms   954 ms   976 ms  205.134.225.38
7  1002 ms  1011 ms   999 ms  www.inmotionhosting.com [192.145.237.216]

High Latency in the Middle but Not at Beginning or End

If the hop immediately after a long one drops back down, it simply means that the router at the long hop set the signal to a lower priority and does not have an issue. Patterns like this do not indicate an issue.

1  <1 ms     <1 ms       <1 ms 173.247.246.116
2  30 ms      7 ms       11 ms 10.10.0.2
3 200 ms    210 ms      189 ms 4.71.136.1
4 111 ms     98 ms      101 ms ip10-167-150-2.at.at.cox.net [70.167.150.2]
5  99 ms    100 ms       98 ms  205.134.225.38

High Latency in the Middle That Remains Consistent

If you see a hop jump but remain consistent throughout the rest of the report, this does not indicate an issue.

1  <1 ms     <1 ms       <1 ms 173.247.246.116
2  30 ms      7 ms       11 ms 10.10.0.2
3  93 ms     95 ms       92 ms 4.71.136.1
4  95 ms     99 ms      101 ms ip10-167-150-2.at.at.cox.net [70.167.150.2]
5  99 ms    100 ms       98 ms 100ge7-1.core1.nyc4.he.net [184.105.223.166]
6  95 ms     95 ms       95 ms 10g1-3.core1.lax2.he.net [72.52.92.122]
7  95 ms     96 ms       94 ms 205.134.225.38]

High Latency in the Beginning Hops

Seeing reported latency in the first few hops indicates a possible issue on the local network level. You will want to work with your local network administrator to verify and fix it.

Timeouts at the Beginning of the Report

If you have timeouts at the very beginning of the report, say within the first one or two hops, but the rest of the report runs, do not worry. This is perfectly normal as the device responsible likely does not respond to traceroute requests.

Timeouts at the Very End of the Report

Timeouts at the end may occur for a number of reasons. Not all of them indicate an issue, however.

• The target’s firewall may be blocking requests. The target is still most probably reachable with a normal HTTP request, however. This should not affect normal connection.
• The return path may have an issue from the destination point. This would mean the signal is still reaching, but just not getting the return signal back to your computer. This should not affect normal connection.
• Possible connection problem at the target. This will affect the connection.

Do I Need to Contact My Hosting Company?

Once you have found a hop that seems to have an issue, you can identify its location and determine where the issue lies. It may be within your network, your ISP, somewhere along the route, or within your hosting provider’s domain.

The first hop is within your own network. The next hop is your ISP. The last couple of hops are likely within your hosting providers’ domain and control, so if the issue is there, they may be able to fix it for you. If it is anywhere prior to that, the issue is simply along the route and is within neither your nor your hosting provider’s control.

InMotion Hosting is here to help! If you need assistance with troubleshooting your traceroute test, you can copy and paste the results and send them in a ticket through your Account Management Panel (AMP). Be sure to include your current IP address. If you are unsure of your current IP address please visit the link below to obtain it: What is my current IP Address?

WordPress widgets are very helpful tools that let you add extra things to your website, separate from the main writing on the page. Think of them as special blocks you can place in certain spots on your site, like the sides (sidebars), bottoms (footers), or even tops (headers). They help you make your website do more without needing to write code yourself for many tasks. Widgets make it easy to add things like social media posts, contact forms, or lists of your newest articles.

In this guide, you’ll learn all about WordPress widgets, including how to find and use the ones already in WordPress or add others using plugins. We’ll show you how to put widgets on your site using the settings page, the Customize screen, or even the block editor for specific pages.

By reading this guide, you’ll know how to really use WordPress widgets to make your site lively and look good. They are a simple way (often using drag-and-drop) to help visitors find what they need, get them involved, and reach your website goals.

What are WordPress Widgets?

In WordPress, widgets are snippets of content or modular elements that exist outside the main body of your posts or pages. Think of them as versatile building blocks that you can add to designated areas of your website to include specific features or content. They add functionality and extra content to areas like sidebars and footers.

Widgets contain information, navigation, or media that is separate from the content of an individual post or page. In many cases, a widget will display on every page of your site, although widget areas can also be registered for specific pages, such as the homepage.

You add a widget to your site by placing it into a widget area, which is typically created by your theme. Widget areas are tied to your site’s design and layout. Most WordPress themes include widget areas in the sidebar and footer, but some themes offer multiple widget areas in various locations, such as above or below the main content or in the header.

Widgets are especially useful for things you want visitors to see easily from any page. This could be a list of your most recent blog posts, a shopping cart if you sell things, or a button asking people to sign up or contact you (a call to action). Because they often use a simple drag-and-drop system, adding and using widgets is easy and often doesn’t require you to write code. They are a core WordPress feature for customizing these parts of your site.

Here’s what makes widgets particularly useful:

• Content Separation: Widgets contain information, navigation, or media that stays separate from individual posts or pages. A recent posts widget in your sidebar appears on every page, giving visitors consistent access to your latest content.
• Theme-Dependent Placement: To add a widget to your site, you need to add it to a widget area. Widget areas are created by your theme because they relate to the design and layout of your site and not to functionality.
• Drag-and-Drop Simplicity: Most widgets use an intuitive drag-and-drop system, making them accessible even if you’ve never written code.
• Persistent Display: Unlike post content that appears on specific pages, widgets typically display across multiple pages, making them perfect for site-wide features like search boxes, social media links, or newsletter signups.

Where to Find Widgets on WordPress

The location of your widget management interface depends on whether you’re using a classic theme or a block theme.

Classic Themes

If you’re running a classic WordPress theme, accessing widgets is straightforward:

1. Log into the WordPress Dashboard.
2. Navigate to Appearance > Widgets in the left sidebar.
3. On this screen, you’ll see your Available Widgets on the left. These are the widgets that are ready for you to add to your site.
4. On the right side, you will see the widget areas (also referred to as sidebars) provided by your current theme, such as the sidebar, footer, or header.
   
   

Block Themes

Block themes handle widgets differently:

Widgets can be found directly within the Site, Page, or Post Editor. You can view the available widgets by expanding the block inserter (the “+” button) at the top left corner of the screen and scrolling down.

The transition from classic widgets to the block editor represents WordPress’s evolution toward a more unified content creation experience. However, both systems remain functional and widely used.

Check out our detailed guide on Managing Widgets with the Block Editor.

How to Add Widgets on WordPress

WordPress provides built-in widgets, and you can also add more by installing plugins.

There are generally two main ways to add widgets to your site using a classic theme:

Method 1: Using the Widgets Admin Screen

1. Log into the WordPress Dashboard.
2. Go to Appearance > Widgets.
   
   
3. From the list of widgets on the left (Available Widgets), you can drag and drop a widget into the desired widget area on the right.
   
   
4. Alternatively, you can click on the widget you want to add, select the widget area from the list that appears, and click the Add Widget button.
5. Once added to a widget area, you can drag widgets up and down to change their order. Widgets load and display on your site in the order they are listed in the widget area.

Did you know? You can use the Widgets screen in accessibility mode if you cannot use a mouse. Enable this mode via a link at the top right. You can then navigate using the Tab key and press Enter to interact with widgets and widget areas.

Method 2: Using the WordPress Customizer

The Customizer allows you to see a live preview of your website as you add and arrange widgets, making it easier to visualize how they will look.

1. From the admin menu, go to Appearance > Customize. You can also access it from the admin bar on the live site by clicking Customize.
2. In the Customizer menu, click the Widgets option.
3. You will see a list of the widget areas available in your theme. Click on the widget area where you want to add a widget, then click the Add a widget button.
4. A list of all available widgets (built-in and from plugins) will appear. Click on the widget you want to add, and it will appear in the preview on the right.
5. In the Customizer, you can reorder widgets by dragging them up and down in the list on the left or by clicking the Reorder link and using the arrow icons. Remember to click the Publish button at the top left to save your changes before leaving the Customizer.

Method 3: Adding Widgets in Block Themes

If you’re using a block theme, the process is slightly different.

1. From the WordPress admin panel, go to Appearance > Editor.
2. In the website preview, select your preferred widget area (e.g., Footer).
3. Click the + button (block inserter) and scroll down to the Widgets category.
4. Select the widget you want to add (e.g., Latest Posts).
5. The widget will appear in the preview area, and you can customize its settings.
6. Click Save when you’re done customizing.

Adding Widgets to Specific Pages

For classic themes, some themes might have widget areas specifically for pages like the homepage. In the Gutenberg editor for posts and pages, you can also add a widget directly into your content. Add a new block, select the Widgets block type, and choose from many available widgets. This is useful for adding forms, calls to action, or latest posts lists within your content.

Adding widgets from plugins follows a similar process once the plugin is installed and activated. After activating a plugin that provides widgets, they will appear in your Available Widgets list.

Managing and Customizing Your Widgets

Once you’ve added widgets to your site, managing them becomes crucial for maintaining an organized and functional website.

Editing Widget Settings

Once you’ve added widgets, you can easily modify them.

1. Go to the Appearance > Widgets screen or the Appearance > Customize > Widgets area in the WordPress dashboard.
2. Find the widget you wish to edit within its widget area.
3. Expand the widget’s settings by clicking on its title or an arrow icon.
4. Edit the options provided by the widget. Settings can vary widely; some widgets have simple options like a title or number of items to display, while others might require configuration on a separate settings page provided by the plugin developer.
5. Remember to Save or Update the widget after making changes in the Widgets screen or Publish changes in the Customizer.

Rearranging the Order of Widgets

Widget order affects both user experience and visual hierarchy.

Widgets load in the order in which they are listed in the sections. If you wish to change the order of the widgets, simply drag the widgets under “Primary Widget” to the order you wish to have them display.

You can also move widgets between different widget areas by dragging them from one section to another. This flexibility allows you to experiment with different layouts without losing your widget configurations.

Advanced CSS Customization

For users comfortable with CSS, widgets can be extensively customized.

If you want more advanced styling and are comfortable with the basics of HTML and CSS, you can add custom CSS to WordPress. In the Editor, select the widget to which you want to add custom CSS. In the right sidebar, switch to the Block tab and scroll down until you find Advanced. Specify a CSS class name in the ADDITIONAL CSS CLASS(ES) bar and hit Update.

Then add your custom styles through Appearance > Customize > Additional CSS.

How to Remove Widgets on WordPress

Removing widgets you no longer need is just as easy as adding them. There are two ways to remove a widget from a widget area:

Remove and Delete Widget Settings

1. Go to Appearance > Widgets.
2. Drag the widget from its current widget area on the right to the Available Widgets area on the left.
3. This action removes the widget from your website and deletes its settings.

Remove but Save Widget Settings

1. Go to Appearance > Widgets.
2. Drag the widget from its current widget area to the Inactive Widgets area, usually located towards the bottom of the Widgets screen.
3. This removes the widget from your website but saves its current settings. Widgets in the Inactive Widgets area can be easily dragged back into a widget area later if you decide to use them again without reconfiguring them.
4. If you switch themes, and your new theme has different widget areas, any widgets that don’t fit the new areas are automatically moved to the Inactive Widgets list by WordPress.

Permanently Delete a Widget

To permanently delete a widget (not just remove it from a widget area), you need to explicitly delete it from the Widgets screen or Customizer:

1. In the Widgets screen, find the widget and click the Delete link, usually at the bottom left of the expanded widget settings.
2. In the Customizer, find the widget in its area, expand its settings, and click the Remove link at the bottom left.

Popular WordPress Widget Examples and Use Cases

WordPress comes with several useful widgets pre-installed. Many more are available through plugins. Here are some common and popular examples:

Content Discovery Widgets

Recent Posts Widget: The Recent Posts widget is possibly the most commonly used widget in blogs. It lets you display a list of your most recent posts in the sidebar or footer of every page on your site, increasing the possibility that people will browse the site and read a number of posts.

This widget excels at keeping visitors engaged by surfacing fresh content they might otherwise miss. Configure it to show 3-5 recent posts with publication dates to encourage clicks.

Categories List Widget: A built-in option that lists all the categories used on your blog, helping visitors find content that interests them. You can often choose to display them as a dropdown or a list.

Categories widgets work particularly well for content-heavy sites where readers want to explore specific topics in depth.

Tag Cloud Widget: Displays a list of your site’s top 45 used tags in a tag cloud. The size of the tag text indicates how frequently the tag is used. This makes it easy for visitors to explore topics you write about often.

Engagement and Conversion Widgets

Call to Action Widgets: These drive specific user actions. Your widget could be a simple button, or you could create something more bespoke using a Text widget or HTML widget, or even an image widget, all of which come pre-installed with WordPress.

Position these strategically in your sidebar where they’re visible but not intrusive. Consider the user journey and place CTAs at logical decision points.

Social Media Widgets: If you want to engage with people who visit your website by social media, adding your social media feed to the sidebar or footer of your site will show people that you’re active on social media and encourage them to like or follow you.

Newsletter Signup Forms: Convert visitors into subscribers using form widgets. While WordPress doesn’t include a built-in form widget, plugins like Contact Form 7 or WPForms provide powerful options.

Navigation and Utility Widgets

Search Widget: A really simple but incredibly useful widget is the Search widget, which comes preloaded with WordPress. Add this to your sidebar or header and you make it easier for people to find things on your site.

Search functionality becomes critical as your content library grows. Position search widgets prominently to reduce bounce rates from users who can’t quickly find what they’re looking for.

Navigation Menu Widget: This widget allows you to select any custom menu you’ve created in WordPress and display it in a widget area. This is useful for creating secondary navigation menus in footers or sidebars.

Recent Comments Widget: The Recent Comments widget displays the latest comments on your site, giving visitors the opportunity to navigate straight to those comments and join in the discussion.

Media and Interactive Widgets

Image Widget: A pre-installed widget for displaying an image from your Media Library in a widget area. You can also make the image a link.

Use image widgets for branding, showcasing products, or adding visual interest to otherwise text-heavy sidebars.

Video Widget: Embeds a video from streaming services like YouTube or Vimeo directly into a widget area.

Video widgets work exceptionally well in footer areas where they can catch attention after users finish reading your content.

eCommerce and Business Widgets

Shopping Cart Widget: If you’re running an ecommerce store on your site using a plugin like WooCommerce, it’s a good idea to include a cart widget so users can easily navigate to their cart wherever they are in the store.

Position cart widgets in highly visible areas like headers or sticky sidebars to reduce cart abandonment.

Map Widget: For location-based businesses, map widgets provide instant access to your physical location. There are a number of free Google map widget plugins you can use, such as the WP Google Maps plugin. Alternatively, if you don’t want to install a plugin, you can grab the embed code from Google Maps and add that to an HTML widget.

Creating Custom WordPress Widgets

When existing widgets don’t meet your specific needs, building custom widgets gives you complete control over functionality and appearance.

Understanding the Widget Development Process

To create and display a widget, you need to do the following: Create your widget’s class by extending the standard WP_Widget class and some of its functions. Register your widget so that it’s made available in the Widgets screen. Make sure that your theme has at least one widget area in which to add the widgets.

Widget Class Structure

The WP_Widget class is located in wp-includes/class-wp-widget.php and requires four essential functions:

Constructor Function: Set up your widget with a description, name, and display width in your admin

Widget Function: Process the widget options and display the HTML on your page. The $args parameter provides the HTML you can use to display the widget title class and widget content class

Form Function: Display the form that will be used to set the options for your widget. If your widget doesn’t have any options, you can skip this function (although it is still best practice to include it even if it’s empty)

Update Function: Save the widget options to the database. If your widget doesn’t have any options, you can skip this function (although it is still best practice to include it even if it’s empty)

Step-by-Step Custom Widget Creation

Let’s walk through creating a simple custom widget:

1. Create the Plugin Structure: Start by creating a new plugin file. Custom widgets should live in plugins rather than themes to maintain functionality across theme changes.
2. Define the Widget Class: Create the My_Custom_Widget class. This class defines a custom WordPress widget that extends the WP_Widget class
3. Implement Required Functions: The __construct() and widget() functions are mandatory for defining a widget plugin. While it’s technically possible to skip the form() and update() functions if your widget doesn’t have any options, the best practice is to include them, even if they are kept empty
4. Register the Widget: Use the widgets_init action hook to register your widget with WordPress.

Here’s a basic widget structure:

phpclass My_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'my_custom_widget',
            'My Custom Widget',
            array('description' => 'A custom widget example')
        );
    }

    public function widget($args, $instance) {
        // Output widget content
    }

    public function form($instance) {
        // Display admin form
    }

    public function update($new_instance, $old_instance) {
        // Save widget settings
    }
}

phpclass My_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'my_custom_widget',
            'My Custom Widget',
            array('description' => 'A custom widget example')
        );
    }

    public function widget($args, $instance) {
        // Output widget content
    }

    public function form($instance) {
        // Display admin form
    }

    public function update($new_instance, $old_instance) {
        // Save widget settings
    }
}

Widget Registration and Deployment

The register_widget() function is used to register a widget. Call this function using the widgets_init hook:

phpadd_action('widgets_init', 'register_my_widget');
function register_my_widget() {
    register_widget('My_Custom_Widget');
}

phpadd_action('widgets_init', 'register_my_widget');
function register_my_widget() {
    register_widget('My_Custom_Widget');
}

Once registered, your custom widget appears in the WordPress admin alongside built-in widgets, ready for use in any widget area.

Adding Custom Widget Areas to Your Theme

Sometimes your theme’s default widget areas don’t align with your design vision. Creating custom widget areas gives you placement flexibility.

Understanding Widget Area Registration

Widget areas connect your theme’s design with WordPress’s widget system. Widget areas are coded into the theme template files, as well as the theme functions file

Creating New Widget Areas

The process involves two steps: registering the widget area and adding display code to your template files.

Step 1: Register the Widget Area

Add this code to your theme’s functions.php file (use a child theme for third-party themes):

phpfunction register_custom_widget_area() {
    register_sidebar(array(
        'name' => 'Custom Widget Area',
        'id' => 'custom-widget-area',
        'description' => 'A custom widget area',
        'before_widget' => '<div class="widget-container">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
}
add_action('widgets_init', 'register_custom_widget_area');

phpfunction register_custom_widget_area() {
    register_sidebar(array(
        'name' => 'Custom Widget Area',
        'id' => 'custom-widget-area',
        'description' => 'A custom widget area',
        'before_widget' => '<div class="widget-container">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
}
add_action('widgets_init', 'register_custom_widget_area');

Step 2: Add Display Code to Template Files

Once you’ve identified which template file you need to edit and exactly where you need to have the code for the widget area, add the following code:

phpif (is_active_sidebar('custom-widget-area')) { ?>
    <aside class="custom-widget-area" role="complementary">
        <?php dynamic_sidebar('custom-widget-area'); ?>
    </aside>
<?php }

phpif (is_active_sidebar('custom-widget-area')) { ?>
    <aside class="custom-widget-area" role="complementary">
        <?php dynamic_sidebar('custom-widget-area'); ?>
    </aside>
<?php }

The is_active_sidebar() function prevents empty widget areas from displaying, maintaining clean markup when no widgets are assigned.

Strategic Widget Area Placement

Consider these placement strategies:

• Above Content: Perfect for promotional banners or site-wide announcements
• Below Content: Ideal for related posts or newsletter signups
• Header Areas: Great for search boxes or contact information
• Homepage Specific: Use conditional logic to create homepage-only widget areas

Performance and Best Practices

Widgets add functionality, but they also impact site performance. Smart widget management keeps your site fast and user-friendly.

Performance Considerations

Widgets are a fantastic way to add features and functionality to your site. However, every feature you add comes at a cost to page load times, responsiveness, and the visual simplicity of your website’s user interface.

Each widget executes code, makes database queries, or loads external resources. A social media widget might fetch recent posts, while a recent comments widget queries your database for comment data.

Widget Quantity Guidelines

While there’s no strict limit for the number of widgets you can run, you should only add the widgets that you truly need to maintain your website’s performance and user experience. Typically, up to five widgets are sufficient for most websites.

Focus on widgets that directly support your site’s primary goals. A business website might prioritize contact forms and location maps, while a blog focuses on content discovery and social sharing.

Organization and User Experience

Organize your widgets – use multiple widget areas and try to keep your widgets organized logically. For example, use the sidebar for navigation and the footer for additional information.

Logical organization helps users find what they need quickly:

• Sidebar: Navigation, search, recent posts
• Footer: Contact information, social links, secondary menus
• Header: Search, shopping cart, login links

Testing and Maintenance

Preview your changes – before publishing widgets on your site, use the live preview option in the customizer to make sure they look and work as expected.

Regular testing prevents broken widgets from harming user experience. Check widgets after:

• Theme updates
• Plugin updates
• WordPress core updates
• Content migrations

Regularly update plugins – widgets are a special class of plugins in the WordPress environment. You should always keep your plugins updated to ensure your widgets’ compatibility and security.

Troubleshooting Common Widget Issues

Even well-configured widgets sometimes encounter problems. Here’s how to diagnose and fix common issues.

Widget Display Problems

Widgets Not Appearing: Verify that your theme includes the widget area where you placed the widget. Switch to a default theme temporarily to test widget functionality.

Styling Issues: Check for CSS conflicts between your theme and widget styles. Use browser developer tools to inspect element styling and identify conflicts.

Mobile Display Problems: Ensure your theme responsive design properly handles widget areas. Some widgets may need custom CSS for mobile optimization.

Database and Performance Issues

Slow Loading Widgets: Identify resource-heavy widgets using performance monitoring tools. Social media feeds and external API calls often cause slowdowns.

Widget Settings Not Saving: Check file permissions on your WordPress installation. Widgets save settings to the database, requiring proper write permissions.

Missing Widget Content: Database connection issues can prevent widgets from retrieving stored data. Check your hosting provider’s database status.

Plugin Conflicts

Widget Functionality Broken: Deactivate recently installed plugins one by one to identify conflicts. Plugin compatibility issues often affect widget JavaScript or CSS.

Admin Area Problems: Clear browser cache and cookies if widget admin screens display incorrectly. Some caching plugins interfere with widget management interfaces.

Theme Compatibility

Widget Areas Missing: Contact your theme developer about widget area support. Some minimalist themes intentionally exclude certain widget areas.

Custom Widget Areas Not Working: Verify that your custom widget area registration code follows WordPress standards and doesn’t conflict with existing theme functions.

Advanced Widget Strategies

Once you’ve mastered basic widget management, these advanced techniques can further improve your site’s functionality and user experience.

Conditional Widget Display

Use WordPress conditional functions to display widgets only when relevant:

phpif (is_front_page()) {
    // Show homepage-specific widgets
}

if (is_single() && in_category('news')) {
    // Show news-related widgets on news posts
}

phpif (is_front_page()) {
    // Show homepage-specific widgets
}

if (is_single() && in_category('news')) {
    // Show news-related widgets on news posts
}

This approach reduces cognitive load and improves relevance for your visitors.

Widget Caching and Performance

Implement caching for resource-intensive widgets:

• Cache external API calls locally
• Use transients for database-heavy widgets
• Implement lazy loading for below-the-fold widgets

Widget Analytics and Optimization

Track widget performance using:

• Click-through rates on widget links
• Conversion rates from widget CTAs
• User engagement metrics for interactive widgets

Use this data to optimize widget placement and content for better results.

Conclusion

WordPress widgets bridge the gap between complex functionality and user-friendly management. They transform static websites into dynamic, engaging experiences that serve both your business goals and your visitors’ needs.

The key to widget success lies in strategic implementation. Choose widgets that directly support your site’s primary objectives, organize them logically within your theme’s widget areas, and regularly monitor their performance impact. Remember that less can be more – five well-chosen, properly configured widgets often outperform a dozen random additions.

Whether you’re using built-in WordPress widgets, exploring third-party options, or developing custom solutions, widgets give you the power to create unique user experiences without extensive coding knowledge. Start with essential widgets like search, recent posts, and contact forms, then expand based on your specific needs and user feedback.

Your widget strategy should evolve with your site. Regular testing, performance monitoring, and user experience evaluation ensure your widgets continue adding value rather than creating obstacles. With the knowledge from this guide, you’re equipped to make informed decisions about widget implementation and management.

Ready to take your widget game to the next level? Start by auditing your current widget setup, removing any that don’t serve clear purposes, and implementing the organizational strategies outlined above. Your visitors – and your site’s performance metrics – will thank you.

We hope this guide helps you effectively use and manage widgets to enhance your WordPress website! For more WordPress tips and tricks, check out our WordPress Education Channel.