6 Ways to Deploy your Personal Websites / PHP+ MySQL Web Apps for Free

In this post, I'll share my experiences, instructions rather, in deploying your website/web apps in different free web hosts. However, this post will not provide detailed information and thorough explanations.

Cover Image by Fabian Grohs on Unsplash

Whether for deploying your personal project, your school project or for testing out your web apps, there are several web hosts in which you can deploy them for free.

If you know how to use Git, a version control system, then nice 👍.

If not I recommend learning it, these resources might help you out. For websites, you can use Netlify in which you can upload your files. If you have a PHP+MySQL web app, you might want to try out 000webhost. You can host up to two web apps on it per account.

Although I said that, if you are planning to use 000webhost to host your web app for long term usage, I strongly recommend learning Git and use Heroku instead. 000webhost is good for deploying a web app fast and free of charge, but it also comes along with great security risks. That's why either use Heroku or paid web hosts such as Digital Ocean or AWS.

Before starting...

I'm assuming that you have a ready-to-deploy website or web app. For your project that doesn't need any database, you can use static web hosts. But if you want to deploy your PHP+MySQL web app, then you check out dynamic web hosts.

Also, I may refer to your app or the project's folder as a repository.

A repository is like a folder for your project. Your project's repository contains all of your project's files and stores each file's revision history. You can also discuss and manage your project's work within the repository.

-GitHub

Also...

make sure that you have an index.html. Think of it as the home page of the website. Rename your primary HTML file to index.html if you don't have one yet. If you are using a PHP framework like Laravel and CodeIgniter then you're good to go.

Contents

Static Web Hosts

• GitHub Pages
• GitLab Pages
• Netlify (recommended for beginners)
• Surge (recommended for CLI users)
• Others such as Zeit and AWS Amplify

Dynamic Web Hosts (PHP+MySQL)

• Heroku + Remote MySQL for Laravel Apps
• 000webhost (for those who don't know Git yet)

EDITS:

Web Hosts

You can also use Heroku and 000webhost as a static web host. In doing so, just ignore the database integration part. 😊

Another web host you might want to check out is Glitch.

Heroku - Database Credentials

A suggestion by Bervianto Leo Pratama was updating the Database Credentials in the Config Vars in Heroku.

Changes were then made for the Heroku Database part, Setting the Database Config Variables, due to this awesome suggestion. 😊

For other web hosts, you can also update the .env file and manually upload it, so it would not be included in the source control.

Static Web Hosting

GitHub Pages

GitHub is one of the best places to host your code. It offers unlimited private and public repositories. It is well known as a place for open source software.

Host and review code, manage projects and build your best software alongside 31 million developers.

-GitHub

GitHub Pages is one of the services that GitHub offers.

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.

-GitHub

Contents

1. Create a GitHub Account
2. Create a Repository
3. Upload your files
4. Deploy your website using GitHub Pages

1. Create a GitHub Account

If you don't have a GitHub account yet, you may create one here.

2. Create a Repository

In the navigation on the upper right corner, click the New Repository under the plus icon.

You only need to fill out the details, then click Create repository.

After that, you can now add some files to your repository.

3. Upload your files

There are two ways you can add files to your repository:

• Using Git
• Via file upload

As for the file upload, you can either click Upload files

Note: by default you are in the master branch of your repository.

or can drag and drop your files like so:

As for the commit message, you can type something that describes what you did. If you added some pictures, then you can type Add cute puppy images. 😆

4. Deploy your website using GitHub Pages

First, go to Settings

and scroll down to GitHub Pages. Then, click on the master branch.

With this, your site is now published at https://<your-username>.github.io/<repository-name>. Congrats ✨

If you want to use https://<your-username>.github.io rather than https://<your-username>.github.io/<repository-name>, you just need to name your repository <your-username>.github.io. This is suitable for portfolio websites.

For more information you can visit GitHub Pages.

Return to TOC

GitLab Pages

GitLab is one of the places where you can host your code and deploy it. It offers unlimited private and public repositories.

GitLab provides a single application for the entire software development and operations lifecycle. GitLab provides everything you need to Manage, Plan, Create, Verify, Package, Release, Configure, Monitor, and Secure your applications.

-GitLab

GitLab Pages is one of the services that GitLab offers.

Host your static websites on GitLab.com for free, or on your own GitLab instance.

-GitLab

Contents

1. Create a GitLab Account
2. Create a Repository
3. Upload your files
4. Deploy your website using GitLab Pages

1. Create a GitLab Account

If you don't have a GitLab account yet, you may create one here.

2. Create a Repository

In the navigation on the upper right corner, click the New Project under the plus icon. Or you can press the green New Project button on the right.

Then, fill out the details. After that, you may click Create Project.

3. Upload your files

There are two ways you can add files to your repository:

• Using Git
• Via file upload

As for the file upload, click the plus icon then pick Upload file

Note: by default you are in the master branch of your repository.

Then you can drag or upload your file.

As for the commit message, type something that describes what you did. For example, if you added an About Page then you can type Add About Page.

4. Deploy your website using GitLab Pages

To get started, click the Set up CI/CD.

This will then create a configuration file for your deployment. You can pick a template. For simple projects, just pick HTML.

Then press Commit changes.

This will create a .gitlab-ci.yml to your project's root folder that contains:

pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
    paths:
    - public
  only:
  - master

The GitLab CI/CD will then build and deploy your website using GitLab Pages.

In the sidebar, go to Settings then Pages. You'll find your website's URL there which is https://<your-username>.gitlab.io/<repository-name>.

You may see a 404 Error for now. But don't worry, it just needs some time before your website is up and running. Try to check if again after a few minutes.

If you want to use https://<your-username>.gitlab.io rather than https://<your-username>.gitlab.io/<repository-name>, you just need to name your repository <your-username>.gitlab.io. This is suitable for portfolio websites.

With this, your website is now live. Congrats ✨

For more information, you can visit GitLab Pages.

Return to TOC

Netlify

Netlify offers an easy way to deploy your sites.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS. And that’s just the beginning.

-Netlify

Contents

1. Create a Netlify Account
2. Deployment using Netlify
   • Upload your files and Deploy
   • Connect your Git Repository and Deploy
3. Rename your Site

1. Create a Netlify Account

If you don't have a Netlify account yet, you may use your GitHub/GitLab/BitBucket Account or create one here.

2. Deployment using Netlify

2.1 Upload your files and Deploy

You can deploy your site by uploading your files or connecting it to your repository.

If you are uploading your files, you just need to drag and drop your project folder it like so:

Then, Netlify will now deploy your site.

In this case, you can see the website at https://naughty-babbage-f0df56.netlify.com. You may change the site's name here.

If you want to update your files. Go to Deploys.

Drag and drop your project folder, then Netlify will take care of the rest.

Under Overview then Production Deploys,

Wait till the badge near the Production changes from Uploading to Published. When it's published then you're site is now updated.

2.2 Connect your Git Repository and Deploy

Another way of deploying your site is by connecting your repository to Netlify. You may do so by clicking New site from Git.

It will lead you to three easy steps

1. Connecting to a Git provider which can either be GitHub, GitLab or BitBucket.

2. Picking a repository

3. Configuring your Build options

You can leave build command and publish directory blank if you're not using Hugo, Jekyll, Gulp and the like.

With that, the site is live at https://keen-lamarr-271c97.netlify.com.

3. Changing the Site's Name

To change the name, go to the Site settings

Then, scroll down to Site details

In this case, I'll be changing it to jorenrui.

After that you're all done.

Congrats 🎉Your site is now up and running.

For more information, you can visit Netlify's Docs.

Return to TOC

Surge

Surge is another static web host in which you can use to deploy your site. It uses the command line in deploying your application.

Pre requisites

• Familiar with the Command Line
• Latest version of Node.js

Contents

1. Installing Surge
2. Deploy using Surge
3. CNAME

1. Installing Surge

npm install --global surge

For Linux users:

sudo npm install --global surge

2. Deploy using Surge

First go to your project folder. In this example, the folder's name is jorenwebsite.

cd jorenwebsite

Then run surge:

surge

You can now login or create an account from the command line.

• project: <your project folder's path>
• domain: <your-project-name>.surge.sh

You may check your site at <your-project-name>.surge.sh

When updating your files, make sure you're in the project's folder. Then, you may re-deploy the site with this command:

surge --domain jorenwebsite.surge.sh

3. CNAME

Save your domain name by using CNAME. In your project folder, create a file named CNAME.

You may do so by using the CLI:

echo jorenwebsite.surge.sh > CNAME

Or create a file named CNAME, open your text editor, add your domain name, and then save it.

jorenwebsite.surge.sh

In this case, the domain name is jorenwebsite.surge.sh. Just replace it with yours.

Now when you update your files, you don't need to type out surge --domain jorenwebsite.surge.sh. You can re-deploy your app by just typing surge

Hurray ✨ You're all done!

For more information, you can visit Surge.

Return to TOC

Dynamic Web Hosting (PHP + MySQL)

Heroku + Remote MySQL for Laravel Apps

In this part, we're going to use Heroku + Remote MySQL combo to deploy our Laravel web app.

Heroku

Heroku is one of the great places to deploy your web apps. It makes use of Git to deploy your apps and has its own Heroku CLI in which you can run bash.

Pre requisites

• Familiar with the Command Line and Git
• Git installed
• PHP installed
• Composer installed
• A working Git repository

To check if Git is installed:

git --version

To check if PHP is installed:

php -v

To check if Composer is installed:

composer -V

Contents

Setting up Heroku for Deployment

1. Create a Heroku Account
2. Installing Heroku CLI
3. Preparing the App
4. Creating a Procfile
5. Create an App on Heroku
6. Adding a PHP Build Pack
7. Setting the Heroku Config Variables
8. Pushing the Code to Heroku
9. Checking the App

Integrating MySQL

1. Create a Remote MySQL Account
2. Setting the Database Config Variables
3. Working with the Database
4. Checking the App

Issues you may encounter and how to solve them

Setting up Heroku for Deployment

1. Create a Heroku Account

If you don't have a Heroku account yet, you can create one here

2. Installing Heroku CLI

First, install Heroku CLI.

After that, you may now login to Heroku thru the CLI:

heroku login

3. Preparing the App

Assuming you have a functioning git repository, go to its directory. In this example, the project's folder is named jorenweb.

cd jorenweb

Make sure that your app has this:

• composer.json - it indicates that it is a PHP application

4. Creating a Procfile

To create a Procfile from the CLI, run this command:

echo "web: vendor/bin/heroku-php-apache2 public/" > Procfile

Or manually create a file named Procfile that contains:

web: vendor/bin/heroku-php-apache2 public/

This will set the document root to public/.

Then commit the changes:

git add Procfile
git commit -m "Add Procfile for Heroku"

5. Create an App on Heroku

To create an app on Heroku, run this command:

heroku create jorenweb

Replace jorenweb with your chosen app name. The app's name will be the domain name which is https://<app name>.herokuapp.com/. Leaving the app's name blank will make Heroku generate a random one for you.

6. Adding a PHP Build Pack

heroku buildpacks:set heroku/php

7. Setting the Heroku Config Variables

Laravel encryption key

To check the encryption key, run php artisan:

php artisan key:generate --show

Then copy and set it on Heroku using the heroku config command:

heroku config:set APP_KEY=...

where the ... is the key you copied from the php artisan command.

App's URL

The App's URL is <app-name>.herokuapp.com. In this example, the app's name is jorenweb.

heroku config:set APP_URL=jorenweb.herokuapp.com

8. Pushing the Code to Heroku

Push your code with this command:

git push heroku master

If you have more than one app, run:

git push heroku master --app <app-name>

9. Checking the App

You can open your app with this command:

heroku open

Or go to https://<app name>.herokuapp.com/.

Note: There may be some error if your app needs a database on startup.

Integrating MySQL

There are several websites that offer free MySQL that comes with PhpMyAdmin such as Free SQL Database and db4free. Note that you should only use this for testing purposes and not for production.

In this post, we're going to use Remote MySQL. You can have up to 3 databases using the same email.

The limitations of using it are:

1. Create a Remote MySQL Account

Create a Remote MySQL Account here. After that, take note of the username, password, database name and port.

2. Setting the Database Config Variables

There are three ways in which you can approach this:

• Heroku CLI
• Heroku Web
• Updating the Database file

Using these different approaches, we'll update the host, database, username, password of the mysql connection.

a. Heroku CLI

Using the Heroku CLI, first make sure that you are logged in.

heroku login

Then, you can now update the following:

• connection = mysql

heroku config:set DB_CONNECTION=mysql

• host = remotemysql.com

heroku config:set DB_HOST=remotemysql.com

• database = WP0BqJ4QBT (change this to the Database Name you received in earlier on remotemysql)

heroku config:set DB_DATABASE=WP0BqJ4QBT

• username = WP0BqJ4QBT (change this to the Username you received in earlier on remotemysql)

heroku config:set DB_USERNAME=WP0BqJ4QBT

• password = fHduIl02Bk (change this to the Password you received in earlier on remotemysql)

heroku config:set DB_PASSWORD=fHduIl02Bk

b. Heroku Web

On Heroku, login and go to your app.

In the navigation, go to Settings.

Then scroll down to Config Vars and click the Reveal Config Vars button.

Then update the following variables:

• connection
• host
• database
• username
• password

You may see the APP and APP_KEY in which you set earlier in the process of creating the Heroku app.

c. Updating the Database File

In config/database.php, update host, database, username, password in the mysql connection.

    ...

    'mysql' => [
            'driver' => 'mysql',
-           'host' => env('DB_HOST', '127.0.0.1'),
+           'host' => env('DB_HOST', 'remotemysql.com'),
            'port' => env('DB_PORT', '3306'),
-           'database' => env('DB_DATABASE', 'forge'),
-           'username' => env('DB_USERNAME', 'forge'),
-           'password' => env('DB_PASSWORD', ''),
+           'database' => env('DB_DATABASE', 'WP0BqJ4QBT'),
+           'username' => env('DB_USERNAME', 'WP0BqJ4QBT'),
+           'password' => env('DB_PASSWORD', 'fHduIl02Bk'),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'options' => [PDO::ATTR_EMULATE_PREPARES => true],
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
        ],
    ...

Then push your changes:

git add config/database.php
git commit -m "Update MySQL DB Configuration"
git push heroku master

3. Working with the Database

There are two ways in which you can access the database:

• thru PhpMyAdmin
• thru Heroku Bash

PhpMyAdmin

To access the database using PhpMyAdmin, login to Remote MySQL. Then, enter the username and password you've received during sign up. After that, just import your SQL dump.

Heroku Bash

The other way is using Heroku Bash.

First login to Heroku if you haven't done that:

heroku login

Open the Heroku bash by running the command:

heroku run bash

Then, you may now migrate your database:

php artisan migrate

and seed it:

php artisan db:seed

4. Checking the App

You can open your app with this command:

heroku open

Or go to https://<app name>.herokuapp.com/.

Congrats! ✨ 😆 You're all done!

Issues you may encounter and how to solve them

a. Serving Assets thru HTTPS

When in development mode, you mostly use HTTP. But now that the it is in production, the assets may not load properly. Take this link tag for example:

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

asset() uses HTTP while secured_asset() uses HTTPS.

But if you don't want to force HTTPS on environments, there is another solution.

To solve this, go to app\Providers\AppServiceProvider.php and add the following codes:

  namespace App\Providers;

  use Illuminate\Support\ServiceProvider;
+ use Illuminate\Support\Facades\Schema;

  ...

  ...

  public function boot()
  {
+    if(config('app.env') === 'production') {
+    \URL::forceScheme('https');
+    }
  }

  ...

This will change the URL from HTTP to HTTPS when in production.

Then you may commit this changes, then push to Heroku.

b. Specified key was too long error during migration

In app\Providers\AppServiceProvider.php, update the boot function:

  use Illuminate\Support\Facades\Schema;

  public function boot()
  {
+    Schema::defaultStringLength(191);
  }

Then you may commit this changes, then push to Heroku.

c. Error in using fzaninotto/faker during Database Migration on Heroku (Class Faker\Factory not found)

In composer.json, move fzaninotto/faker from require-dev to require.

    ...
-       "laravel/tinker": "^1.0"
+       "laravel/tinker": "^1.0",
+       "fzaninotto/faker": "^1.8"
    },
    "require-dev": {
        "beyondcode/laravel-dump-server": "^1.0",
        "filp/whoops": "^2.0",
-       "fzaninotto/faker": "^1.8",
    ...

If you're currently in Heroku bash, exit from it:

exit

Then commit your changes and push it to Heroku:

git add composer.json
git commit -m "Update composer.json"
git push heroku master

Then run Heroku bash again:

heroku run bash

Install the dependencies:

composer install

Then migrate and seed your database again:

php artisan migrate:refresh --seed --force

For more information, you can visit Heroku's Documentation regarding Laravel.

Return to TOC

000webhost

000webhost is a free web host that support PHP and MySQL apps. It also comes with a control panel which has PhpMyAdmin and a web-based file manager.

Although 000webhost enables deploying your web app via file upload and is free of charge, it also comes with great security risks. That is why I do not recommend it for long-term usage. Learn Git and use Heroku instead. Or better yet, use a paid web host, it will be worth it in the long run.

WARNING!
Be careful in using 000webhost cause it has been pwned.
-Mohammed Foysal

Contents

1. Create a 000webhost Account
2. Create your Website
3. Upload your Files
4. Moving Files
5. Configuring your Database
6. Setting up your Web Address (optional)
7. Check your Web App

1. Create a 000webhost Account

If you don't have a 000webhost account yet, you can create one here. Then you'll receive an email to verify your account.

2 Create your Website

After verification, create your first website either by clicking Create your first website or Build Website.

After that it will ask you questions like your Website Name and Password.

Your web address will be <website-name>.000webhostapp.com . In the case above, the web address is jorenweb.000webhostapp.com .

3. Upload your Files

In the navigation, go to Website Manager then click File Manager.

This will take you to the File Manager page. Scroll down and click on Upload your files button. Then you'll be directed to the 000webhost File Manager in which you can now upload your files.

Make sure that you're in the public_html directory. For uploading your files, you can either drag and drop your files or click the upload icon.

I suggest archiving your project's folder as a zip file, upload it, and then extract it.

In extracting it, let the directory be . in which you'll be referring to the current directory that you're in. In this case, extracting it to the public_html directory.

Make sure that it is a zip file and not a rar file. Failing to do so will result in an error like so:

After that, you're done uploading your files. You may now delete the zip file.

4. Moving Files

Go to the extracted folder. In this case, it is jorenwebsite. Select the files you're going to move and click the move icon.

Then change the destination to /public_html.

Lastly, delete the folder in which the files where extracted. In this case it is jorenweb folder.

With this your site is now live at <website-name>.000webhostapp.com .

5. Configuring your Database

In the navigation, go to Website Manager, then click Database Manager.

Create a New Database.

Then enter your Database Name, Database Username, and Password.

You can now update your database configuration.

In the example above, the database config are:

• Database Name: id8995764_jorenweb
• Database User: id8995764_admin
• DB Host: localhost
• Password: <the password you entered earlier>

Then you can manage your database using PhpMyAdmin.

In the navigation, go to Import. In here, upload your SQL dump.

6. Setting up your Web Address (optional)

By default, your app's web address is: <website name>.000webhostapp.com

To add a free custom domain name, go to Freenom. The extensions that are free are

.TK / .ML / .GA / .CF / .GQ

Check the domain’s availability and click Checkout.

After getting your domain, set up the Name Servers. Click Use DNS then fill up the fields:

• Nameserver: ns01.000webhost.com
• Nameserver: ns02.000webhost.com

Or go to My Domains > Management Tools > Nameservers to set it up.

Also, pick the period in which you'll use the domain name then you may continue.

In checkout, you'll receive an email in which it will redirect you to a registration page to finish the order.

Return back to 000webhost.

In the navigation, go to Website Manager then click Set Web Address.

Scroll down and click Add Domain.

Pick Park Domain then enter the domain name you registered in Freenom.

Then wait for the domain name to be linked. Changes may take up to 24 hours.

7. Check your Web App

See your website at https://<website name>.000webhostapp.com/

or if you have a park domain, www.example.tk

After that, you're done. Congrats! 🎉

If you want some SSL certification for your website, you can use Cloudflare for free.

For more information, you can visit the 000webhost forum.

Return to TOC

Wrapping Up

For websites that doesn't need a database you can use static web hosts like GitHub Pages, GitLab Pages, Netlify, and Surge. You can also explore and find other web hosts like Zeit and AWS Amplify.

As for PHP+MySQL web apps, you can check out 000webhost if you're a beginner that doesn't use any frameworks. But be warned, it has great security risks and I do not recommend it for long-term usage. But if you want to deploy a Laravel App that uses MySQL you can check out Heroku + Remote MySQL. On the other hand, Heroku doesn't only offers PHP web app hosting. It can also host NodeJS, Ruby, Java, Python and Go web apps.

These are the web hosts that I've found as I searched for ways of deploying my web apps. From uploading files to using Git thru the CLI, my deployment process became easier. I mostly enjoyed my shift from 000webhost to Heroku as I became comfortable with the CLI. Also, if you can, use a paid web host like Digital Ocean or AWS. It's so worth while in the long run. I hoped that sharing this managed to help you in some way.

Thanks for reading and happy coding! 😄 ☕