4. Setting Up The Git Repository - Mediocre Inventions

Intro

This article will walk through how to set up our Git repository to store our code. The repository will be used by Heroku for live deployment on a free hosting environment. We will also go over environment variables and how they are important to consider when using third party services to host your website files.

Environment Variables

Sometimes your files in the website folder will contain confidential information such database users and passwords (in this case, the wp-config.php file contains this confidential information). If someone happens to get ahold of the file, then our database could be in trouble (maybe someone accidentally makes the repository public or the file gets sent across an unsecure network). Since we will be putting our files on third party services, we should start by adressing this submitting any files. One possible approach to address this is by using Environment variables. In a nutshell, environment variables are variables that only the server knows.

Apache Variables

Go to your website’s folder (should be in /var/www/yourwebsite) and open up the wp-config.php file:

sudo nano /var/www/yourwebsite/wp-config.php

You should see some lines that say something like:

define('DB_USER', 'yourdatabasename');

define('DB_USER', 'root');

define('DB_PASSWORD', 'CHANGEME');

define('DB_HOST', 'localhost');
...

There should also be a similar section that defintes the AUTH_KEY, AUTH_SALT, and other key/salt variables. Since we wouldn’t want any unauthorized people to see this information, we will want to hide this information. To do this, let’s replace these values with keywords that let our server know to retrive them from the environment variables instead of the file. The lines should now look something like this:

define('DB_USER', getenv('DB_NAME'));

define('DB_USER', getenv('DB_USER'));

define('DB_PASSWORD', getenv('DB_PASSWORD'));

define('DB_HOST', getenv('DB_PASSWORD'));
...

Then we will configure the Apache web server’s environment variables so that these variables have the proper values associated with them. You can open up the envvars file in the /etcs/apache2/ folder:

sudo nano /etc/apache2/envvars

At the top of the file, there should be a section to add our environment variables. We will define these variables by entering lines like the following:

export DB_NAME="yourdatabasename"
export DB_USER="root"
export DB_PASSWORD="CHANGEME"
export DB_HOST="localhost"
...

Double check that you entered everything correctly and replaced the values above with your own. Then you can restart the web server and visit your webpage (localhost) to see if everything still works.

sudo systemctl restart apache2

Remember the variable names that we set (like DB_NAME and DB_USER) since we will be using these for Heroku later.

Git

If you haven’t installed Git already, install it by running

sudo apt install git

Then make sure to sign up for an account on their website. You can read more about Git on their website. There is also an article here that goes over it pretty well: https://kinsta.com/knowledgebase/what-is-github/. For our purposes, Github if the place where we will hold our website’s files and will help us with moving our changes onto the servers that will host our live websites (Heroku/Github Pages).

Git repository Setup

Once you have signed up for an account, create a new repository by hovering over the “+” icon on the top panel. Enter your application’s name to create your respository. This is where we will be story our application’s code/files.

Note:
You should be able to select Private Repository so that only you are able to view the code on the site (this feature was just recently made free at the time of writing this article!). Public repositories allow everyone on the internet to see it. Making it private can prevent people from seein sensitive information. For example, the wp-config.php file might contain your database name, username, and password.

Once you have created the repository, the page should open up with some instructions. We will run similar commands below. Make sure to change your directory to where your website files before running the commands.

cd /var/www/yourwebsite

Note:
If you get a permission error, you can change the permissions of this folder to allow anyone to access it. This is generally not recommended due to security concerns, but since it is on our local machine this should be fine. Run the following to make the permission change:

chmod -R 777 /var/www/yourwebsite

Then you can change directories to the website folder again.

Pushing Changes

Once you are in the folder, proceed with the Git commands:

git init

git add .

git commit -m "first commit"

git remote add origin https://github.com/youruser/yourrepo.git

git push -u origin master

Notes:

‘init’ initializes the folder so that your computer knows it is version controlled (creates the local repository).
‘add .’ adds all the files in your folder to prepare it for loading into repositories.
‘commit’ saves your changes to your local repository (needs to be done before moving to the remote repository on github.com).
‘remote add’ adds the URL of the remote repository on Github, so that it knows where to push the changes.
‘push’ moves the changes onto the remote repository.

Once you have done this, you can refresh your page and you should see your files in the Github repository. Now everytime you make changes to your files or add new files that you want to move to the live website (we have not set this up yet), you just have to go to the website directory on your computer and type the following:

git add .

git commit -m "A message about what changes were made. "

git push

Navigation

The next article can be found here. Previous article is here.