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.

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 (recommended for beginners)

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

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

Create a GitHub Account
Create a Repository
Upload your files
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://.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

Create a GitLab Account
Create a Repository
Upload your files
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

Create a Netlify Account
Deployment using Netlify

Upload your files and Deploy
Connect your Git Repository and Deploy

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

Installing Surge
Deploy using Surge
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

Create a Heroku Account
Installing Heroku CLI
Preparing the App
Creating a Procfile
Create an App on Heroku
Adding a PHP Build Pack
Setting the Heroku Config Variables
Pushing the Code to Heroku
Checking the App

Integrating MySQL

Create a Remote MySQL Account
Update Database Configuration
Working with the Database
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. Update Database Configuration

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.

Contents

Create a 000webhost Account
Create your Website
Upload your Files
Moving Files
Configuring your Database
Setting up your Web Address (optional)
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 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. I hoped that sharing this managed to help you in some way.
Thanks for reading and happy coding! 😄 ☕️

Link: https://dev.to/jorenrui/6-ways-to-deploy-your-personal-websites–php-mysql-web-apps-for-free-4m3a