6 Ways to Deploy your Personal Websites / PHP+ MySQL Web Apps for Free
Tags: webdev, deployment, netlify, heroku
Published: 2019-03-20 05:30:48

---
title: 6 Ways to Deploy your Personal Websites / PHP+ MySQL Web Apps for Free
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/f2odmzyf15wbs2a5uq51.jpg
description: Deploying website/web apps using GitHub, GitLab, Netlify, Surge, Heroku and 00webhost
tags: webdev, deployment, netlify, heroku
---

> 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](https://unsplash.com/photos/dC6Pb2JdAqs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) by [Fabian Grohs](https://unsplash.com/@grohsfabian) on [Unsplash](https://unsplash.com/)

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*](https://git-scm.com/), a version control system, then nice 👍.

If not I recommend learning it, [these resources might help you out](https://help.github.com/en/articles/git-and-github-learning-resources). For websites, you can use [Netlify](#netlify) in which you can upload your files. If you have a PHP+MySQL web app, you might want to try out [000webhost](#webhost). You can host up to two web apps on it per account.

Although I said that, if you are planning to use [000webhost](#webhost) to host your web app for long term usage, I strongly recommend learning [*Git*](https://git-scm.com/) and use [Heroku](#heroku-mysql) 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](https://www.digitalocean.com/) or [AWS](https://aws.amazon.com/).

## 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*](#static-webhost). But if you want to deploy your PHP+MySQL web app, then you check out [*dynamic web hosts*](#dynamic-webhost).

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](https://help.github.com/en/articles/about-repositories)

## 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.

![Folder with files in Tree View](https://thepracticaldev.s3.amazonaws.com/i/n9u2jxqk3wdgpi755yru.png)

---

## Contents <a name="toc"></a>

**Static Web Hosts** <a name="static-webhost"></a>

- [GitHub Pages](#github)
- [GitLab Pages](#gitlab)
- [Netlify](#netlify) (recommended for beginners)
- [Surge](#surge) (recommended for CLI users)
- Others such as [Zeit](https://zeit.co/) and [AWS Amplify](https://aws.amazon.com/amplify/console/)

**Dynamic Web Hosts (PHP+MySQL)** <a name="dynamic-webhost"></a>

- [Heroku + Remote MySQL for Laravel Apps](#heroku-mysql)
- [000webhost](#webhost) (for those who don't know *Git* yet)

----
#### EDITS:

##### Web Hosts

You can also use [Heroku](#heroku-mysql) and [000webhost](#webhost) 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](https://glitch.com/).

{% twitter 1108867752134168577 %}

##### 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](#mysql-2), 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 <a name="github"></a>

[GitHub](https://github.com) 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](https://github.com/)

![](https://thepracticaldev.s3.amazonaws.com/i/2jm513w3s73t0lzb2whq.png)

[GitHub Pages](https://pages.github.com/) 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](https://help.github.com/en/articles/what-is-github-pages)

#### Contents

1. [Create a GitHub Account](#github-1)
2. [Create a Repository](#github-2)
3. [Upload your files](#github-3)
4. [Deploy your website using GitHub Pages](#github-4)

#### 1. Create a GitHub Account <a name="github-1"></a>

If you don't have a GitHub account yet, you may create one [here](https://github.com/join?source=header-home).

#### 2. Create a Repository<a name="github-2"></a>

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

![](https://thepracticaldev.s3.amazonaws.com/i/3vq1ecgeyeeo7j9il2yb.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/bp50b3hsvgttikgiu2ti.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/7ondx14tn8m4tipttaj4.png) 

#### 3. Upload your files <a name="github-3"></a>

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.

![](https://thepracticaldev.s3.amazonaws.com/i/7uwmq9178mlvvqo6ayqf.png)

or can drag and drop your files like so:

![](https://thepracticaldev.s3.amazonaws.com/i/rt3411iya8t5o4yt75pg.png)

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*. 😆

![](https://thepracticaldev.s3.amazonaws.com/i/9ovesmwaryso0ydkrich.png)

#### 4. Deploy your website using GitHub Pages <a name="github-4"></a>

First, go to *Settings*

![](https://thepracticaldev.s3.amazonaws.com/i/xcg0afefj2sc0fcjvg3f.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/52kd56gqxr3twne5ehwd.png)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/em8be8p1zmj90vxogcpv.png)

For more information you can visit [GitHub Pages](https://pages.github.com/).

[Return to TOC](#toc)

------

### GitLab Pages <a name="gitlab"></a>

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](https://about.gitlab.com/stages-devops-lifecycle/). GitLab provides everything you need to [Manage](https://about.gitlab.com/stages-devops-lifecycle/manage/), [Plan](https://about.gitlab.com/stages-devops-lifecycle/plan/), [Create](https://about.gitlab.com/stages-devops-lifecycle/create/), [Verify](https://about.gitlab.com/stages-devops-lifecycle/verify/), [Package](https://about.gitlab.com/stages-devops-lifecycle/package/), [Release](https://about.gitlab.com/stages-devops-lifecycle/release/), [Configure](https://about.gitlab.com/stages-devops-lifecycle/configure/), [Monitor](https://about.gitlab.com/stages-devops-lifecycle/monitor/), and [Secure](https://about.gitlab.com/stages-devops-lifecycle/secure/) your applications.
>
> -[GitLab](https://about.gitlab.com/what-is-gitlab/)

![](https://thepracticaldev.s3.amazonaws.com/i/fth2y1u9um9ddu2o3w05.png)

[GitLab Pages](https://about.gitlab.com/product/pages/) is one of the services that GitLab offers.

> Host your static websites on [GitLab.com](https://about.gitlab.com/gitlab-com/) for free, or on [your own GitLab instance](https://docs.gitlab.com/ee/administration/pages/). 
>
> -[GitLab](https://about.gitlab.com/product/pages/)

#### Contents

1. [Create a GitLab Account](#gitlab-1)
2. [Create a Repository](#gitlab-2)
3. [Upload your files](#gitlab-3)
4. [Deploy your website using GitLab Pages](#gitlab-4)

#### 1. Create a GitLab Account <a name="gitlab-1"></a>

If you don't have a GitLab account yet, you may create one [here](https://gitlab.com/users/sign_in#register-pane).

#### 2. Create a Repository <a name="gitlab-2"></a>

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.

![](https://thepracticaldev.s3.amazonaws.com/i/b8j7m4f2kir0qh31grcc.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/2b3y663hu43lrno8eepz.png)

#### 3. Upload your files <a name="gitlab-3"></a>

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.

![](https://thepracticaldev.s3.amazonaws.com/i/gs24hmbb8jc7dtm2c5zm.png)

Then you can drag or upload your file.

![](https://thepracticaldev.s3.amazonaws.com/i/jwwp4qitu3vpxd7ov0zf.png)

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 <a name="gitlab-4"></a>

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

![](https://thepracticaldev.s3.amazonaws.com/i/wky2soc86rcha6uvrvfv.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/4mc84n4dtg98b5qprqes.png)

Then press *Commit changes*.

![](https://thepracticaldev.s3.amazonaws.com/i/wivm09mzsgmfj871pqs1.png)

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

```yml
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>`. 

![](https://thepracticaldev.s3.amazonaws.com/i/6tb73i1i2r5eys0sswjt.png)

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](https://about.gitlab.com/product/pages/).

[Return to TOC](#toc)

------

### Netlify <a name="netlify"></a>

[Netlify](https://www.netlify.com/) 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](https://www.netlify.com/)

![](https://thepracticaldev.s3.amazonaws.com/i/1ylj00q7iwvaiuuwic2b.png)

#### Contents

1. [Create a Netlify Account](#netlify-1)
2. Deployment using Netlify
   - [Upload your files and Deploy](#netlify-21)
   - [Connect your Git Repository and Deploy](#netlify-22)
3. [Rename your Site](#netlify-3)

#### 1. Create a Netlify Account <a name="netlify-1"></a>

If you don't have a Netlify account yet, you may use your GitHub/GitLab/BitBucket Account or create one [here](https://app.netlify.com/signup).

#### 2. Deployment using Netlify

#### 2.1 Upload your files and Deploy <a name="netlify-21"></a>

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

![](https://thepracticaldev.s3.amazonaws.com/i/cdknx7otv409g9o0q0c4.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/19ufcothdt805qlgyws5.png)

Then, Netlify will now deploy your site.

![](https://thepracticaldev.s3.amazonaws.com/i/tql5ei7ouoyma6nuidk8.png)

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

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

![](https://thepracticaldev.s3.amazonaws.com/i/vi1qkkcs4cz1ingpa0ja.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/8ps7lksvzh87pmi816bh.png)

Under *Overview* then Production Deploys,

![](https://thepracticaldev.s3.amazonaws.com/i/tvl6yylyt89s0lmu5zc6.png)

![](https://thepracticaldev.s3.amazonaws.com/i/n5hvjz6kakxrii2qrcnn.png)

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 <a name="netlify-22"></a>

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

![](https://thepracticaldev.s3.amazonaws.com/i/cdknx7otv409g9o0q0c4.png)

It will lead you to three easy steps

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

![](https://thepracticaldev.s3.amazonaws.com/i/etvlryvjlpva93qxbtif.png)

**2. Picking a repository**

![](https://thepracticaldev.s3.amazonaws.com/i/69865hzcq88ye0sjl5hm.png)

**3. Configuring your Build options**

![](https://thepracticaldev.s3.amazonaws.com/i/gzkhg0cjh3czgp8b3arn.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/eqgrw3pjja8wkvw12nzy.png)

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

#### 3. Changing the Site's Name <a name="netlify-3"></a>

To change the name, go to the *Site settings*

![](https://thepracticaldev.s3.amazonaws.com/i/29nad2ghaozxukol1fq8.png)

Then, scroll down to *Site details*

![](https://thepracticaldev.s3.amazonaws.com/i/vhooyclabblgllw5aetn.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/hl0059np9fnhtjjyveza.png)

After that you're all done.

Congrats 🎉Your site is now up and running.

For more information, you can visit [Netlify's Docs](https://www.netlify.com/docs/).

[Return to TOC](#toc)

------

### Surge <a name="surge"></a>

[Surge](https://surge.sh/) is another static web host in which you can use to deploy your site. It uses the *command line* in deploying your application.

![](https://thepracticaldev.s3.amazonaws.com/i/sdgaqnn6pd1ogtl4ylt9.png)

#### Pre requisites

- Familiar with the Command Line
- Latest version of [Node.js](http://nodejs.org/)

#### Contents

1. [Installing Surge](#surge-1)
2. [Deploy using Surge](#surge-2)
3. [CNAME](#surge-3)

#### 1. Installing Surge <a name="surge-1"></a>

```bash
npm install --global surge
```

For Linux users:

```bash
sudo npm install --global surge
```

#### 2. Deploy using Surge <a name="surge-2"></a>

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

```bash
cd jorenwebsite
```

Then run **surge**:

```bash
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`

![](https://thepracticaldev.s3.amazonaws.com/i/56541yp6sf4wfpaes5t6.PNG)

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:

```bash
surge --domain jorenwebsite.surge.sh
```

#### 3. CNAME <a name="surge-3"></a>

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

You may do so by using the CLI:

```bash
echo jorenwebsite.surge.sh > CNAME
```

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

```bash
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](https://surge.sh/help/getting-started-with-surge).

[Return to TOC](#toc)

------

## Dynamic Web Hosting (PHP + MySQL)

### Heroku + Remote MySQL for Laravel Apps <a name="heroku-mysql"></a>

In this part, we're going to use [Heroku](https://www.heroku.com/) + [Remote MySQL](https://remotemysql.com/) combo to deploy our Laravel web app.

#### Heroku

[Heroku](https://www.heroku.com/) 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. 

![](https://thepracticaldev.s3.amazonaws.com/i/y08sivqqw9y0ozuyimso.png)

#### Pre requisites

- Familiar with the Command Line and [Git](https://git-scm.com/)
- [Git](https://git-scm.com/downloads) installed
- [PHP](http://php.net/) installed
- [Composer](https://getcomposer.org/doc/00-intro.md)  installed
- A working Git repository

To check if Git is installed:

```bash
git --version
```

To check if PHP is installed:

```bash
php -v
```

To check if Composer is installed:

```bash
composer -V
```

#### Contents

Setting up Heroku for Deployment

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

Integrating MySQL

1. [Create a Remote MySQL Account](#mysql-1)
2. [Setting the Database Config Variables](#mysql-2)
3. [Working with the Database](#mysql-3)
4. [Checking the App](#mysql-4)

[Issues you may encounter and how to solve them](#heroku-issues)

#### Setting up Heroku for Deployment

#### 1. Create a Heroku Account <a name="heroku-1"></a>

If you don't have a Heroku account yet, you can create one [here](https://signup.heroku.com/login)

#### 2. Installing Heroku CLI <a name="heroku-2"></a>

First, install [Heroku CLI](https://devcenter.heroku.com/articles/getting-started-with-php#set-up).

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

```bash
heroku login
```

#### 3. Preparing the App <a name="heroku-3"></a>

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

```bash
cd jorenweb
```

Make sure that your app has this:

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

#### 4. Creating a Procfile <a name="heroku-4"></a>

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

```bash
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](https://devcenter.heroku.com/articles/custom-php-settings#setting-the-document-root) to `public/`.

Then commit the changes:

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

#### 5. Create an App on Heroku <a name="heroku-5"></a>

To create an app on Heroku, run this command:

```bash
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 <a name="heroku-6"></a>

```bash
heroku buildpacks:set heroku/php
```

#### 7. Setting the Heroku Config Variables <a name="heroku-7"></a>

##### Laravel encryption key

To check the encryption key, run `php artisan`:

```bash
php artisan key:generate --show
```

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

```bash
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`.

```bash
heroku config:set APP_URL=jorenweb.herokuapp.com
```

#### 8. Pushing the Code to Heroku <a name="heroku-8"></a>

Push your code with this command:

```bash
git push heroku master
```

If you have more than one app, run:

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

#### 9. Checking the App <a name="heroku-9"></a>

You can open your app with this command:

```bash
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](https://www.freesqldatabase.com/freemysqldatabase/) and [db4free](https://www.db4free.net/). Note that you should only use this for testing purposes and not for production.

In this post, we're going to use [Remote MySQL](https://remotemysql.com/). You can have up to 3 databases using the same email.

The limitations of using it are:

![](https://thepracticaldev.s3.amazonaws.com/i/tbfkri72j5hvunr978us.png)

#### 1. Create a Remote MySQL Account <a name="mysql-1"></a>

Create a Remote MySQL Account [here](https://remotemysql.com/login.php). After that, take note of the `username`, `password`, `database name` and `port`.

![](https://thepracticaldev.s3.amazonaws.com/i/nyc8ltbgzvkj8rn4uq7r.png)

#### 2. Setting the Database Config Variables<a name="mysql-2"></a>

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.

```bash
heroku login
```

Then, you can now update the following:

- `connection` = `mysql`

```bash
heroku config:set DB_CONNECTION=mysql
```

- `host` = `remotemysql.com`

```bash
heroku config:set DB_HOST=remotemysql.com
```

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

```bash
heroku config:set DB_DATABASE=WP0BqJ4QBT
```

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

```bash
heroku config:set DB_USERNAME=WP0BqJ4QBT
```

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

```bash
heroku config:set DB_PASSWORD=fHduIl02Bk
```

##### b. Heroku Web

On Heroku, login and go to your app.

In the navigation, go to *Settings*.

![](https://thepracticaldev.s3.amazonaws.com/i/rmvimjo2bt3qxwx65x21.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/acukas2z4t36mtxfuw9b.PNG)

Then update the following variables:

- `connection`
- `host`
- `database`
- `username`
- `password`

![](https://thepracticaldev.s3.amazonaws.com/i/kwyzaoli0jv479wwbh1d.png)

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.

```diff
	...

	'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:

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

#### 3. Working with the Database <a name="mysql-3"></a>

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

- thru PhpMyAdmin
- thru Heroku Bash

##### PhpMyAdmin

To access the database using PhpMyAdmin, [login](https://remotemysql.com/phpmyadmin/) to Remote MySQL. Then, enter the `username` and `password` you've received during [sign up](https://remotemysql.com/signup.html). After that, just import your SQL dump.

![](https://thepracticaldev.s3.amazonaws.com/i/g2et8h83trl56o0o7ebz.png)

##### Heroku Bash

The other way is using Heroku Bash.

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

```bash
heroku login
```

Open the Heroku bash by running the command:

```bash
heroku run bash
```

Then, you may now *migrate* your database:

```bash
php artisan migrate
```

and *seed* it:

```bash
php artisan db:seed
```

#### 4. Checking the App <a name="mysql-4"></a>

You can open your app with this command:

```bash
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 name="heroku-issues"></a>

##### 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:

```php+HTML
<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:

```diff
  namespace App\Providers;

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

  ...
```

```diff
  ...

  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:

```diff
  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`.

```diff
	...
-		"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:

```bash
exit
```

Then commit your changes and push it to Heroku:

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

Then run Heroku bash again:

```bash
heroku run bash
```

Install the dependencies:

```bash
composer install
```

Then migrate and seed your database again:

```bash
php artisan migrate:refresh --seed --force
```

For more information, you can visit [Heroku's Documentation regarding Laravel](https://devcenter.heroku.com/articles/getting-started-with-laravel).

[Return to TOC](#toc)

------

### 000webhost <a name="webhost"></a>

[000webhost](https://000webhost.com/) 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](https://haveibeenpwned.com/PwnedWebsites#000webhost).
> -Mohammed Foysal

![](https://thepracticaldev.s3.amazonaws.com/i/2qfas3h3xea3ndh2oh77.png)

#### Contents

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

#### 1. Create a 000webhost Account <a name="webhost-1"></a>

If you don't have a 000webhost account yet, you can create one [here](https://www.000webhost.com/free-website-sign-up). Then you'll receive an email to verify your account.

#### 2 Create your Website <a name="webhost-2"></a>

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

![](https://thepracticaldev.s3.amazonaws.com/i/0v0tx9dh1vyiotle3qcm.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/rkxfddjyml753zh9iu1v.png)

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

#### 3. Upload your Files <a name="webhost-3"></a>

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

![](https://thepracticaldev.s3.amazonaws.com/i/jgye4qs0s0k1olm3ux8o.png)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/dog627bppyjclfsuz95l.png)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/0kb326fvaex5bra3zveg.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/q4n6e5hqqbpmla4e435o.png)

![](https://thepracticaldev.s3.amazonaws.com/i/e5wk0baz451h5hmexeem.png)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/t7vagedkuzeje0z2j1lj.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/0ozbtxkhnub9skvbwzqf.png)

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

#### 4. Moving Files <a name="webhost-4"></a>

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

![](https://thepracticaldev.s3.amazonaws.com/i/hnyqplodbvxrescf1vum.png)

Then change the destination to `/public_html`.

![](https://thepracticaldev.s3.amazonaws.com/i/rib35snpgofspq5it5ye.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/n016n803hagmv2mtv3lj.png)

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

#### 5. Configuring your Database <a name="webhost-5"></a>

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

![](https://thepracticaldev.s3.amazonaws.com/i/v0xh8r26wgp8zntve2f2.png)

Create a *New Database*.

![](https://thepracticaldev.s3.amazonaws.com/i/b06icjw3kkkyl4m17ofk.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/9306b21q1o7nani7xaa2.png)

You can now update your database configuration.

![](https://thepracticaldev.s3.amazonaws.com/i/p1twwud9vp9u4yqsnmk6.png)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/js4s218ovfr2uo9u9v4j.png)

#### 6. Setting up your Web Address (optional) <a name="webhost-6"></a>

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

To add a free custom domain name, go to [Freenom](http://www.freenom.com/en/index.html?lang=en). The extensions that are free are

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

Check the domain’s availability and click *Checkout*. 

![](https://thepracticaldev.s3.amazonaws.com/i/1445et7uge2xrob7asgc.png)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/f60x81va33a7rtptnmy4.png)

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*.

![](https://thepracticaldev.s3.amazonaws.com/i/1cf7ksp3hc0c990m0rl8.png)

Scroll down and click *Add Domain*.

![](https://thepracticaldev.s3.amazonaws.com/i/9y1buk8xd60o1l6pfexp.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/i7q42r2a9x9mngy06m8b.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/0atbb2a0382meyygp2tp.png)

#### 7. Check your Web App <a name="webhost-7"></a>

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! :tada:

If you want some SSL certification for your website, you can use [Cloudflare](https://www.cloudflare.com/) for free.

For more information, you can visit the [000webhost forum](https://www.000webhost.com/forum/).

[Return to TOC](#toc)

------

## Wrapping Up

For websites that doesn't need a database you can use static web hosts like [GitHub Pages](#github), [GitLab Pages](#gitlab), [Netlify](#netlify), and [Surge](#surge). You can also explore and find other web hosts like [Zeit](#zeit) and [AWS Amplify](https://aws.amazon.com/amplify/console/).

As for PHP+MySQL web apps, you can check out [000webhost](#webhost) 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](#heroku-mysql). On the other hand, [Heroku](https://www.heroku.com/) 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](https://www.digitalocean.com/) or [AWS](https://aws.amazon.com/). 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! :smile: :coffee: