Visually Adept but Coding Inept Tutorial

When FTP Won't Do

Posted by ChristinaTheDesigner on February 27, 2018

Do you like the title of my tutorial series? It just rolls of the tongue doesn't it? If you're like me you like to make visual connections to help you learn new things. My tutorials are targeted for designers like me stumbling through the world of coding. You don't have to be a designer to benefit from this tutorial. Some people learn in different ways and hopefully this helps somebody out there.

In this tutorial we will be learning how to use a repository to put our website online using Automated Deployment. We will be using git verison control. If you need git bash please download from here for Windows and here for Mac

We will also be using BitBucket and Netlify. No need to create a Netlify Account yet but if don't have a BitBucket account create one now.All the accounts you need will be free services so don't be afraid to sign up.

Step 1

You can use other repository services like GitHub or GitLab, but for the purpose of this tutorial we are going to be using BitBucket If you don't have an account please sign up. After signing into your BitBucket account, we are going to add a new repository. On the left hand side click on the + sign.

step 1

Step 2

Another menu should have slid out from the left. You should see a list. Create New Repository, Team, Project, and List. Click on Repository.

step 2

Step 3

On the create a new repository menu:

Owner: should be the account user name

Repository name: Put in a one word name for your site. You can connect words with dashes - or underscores_ ie:awesome_tutorial

Access Level: I usually keep this private unless you need others to find it.

Include a Readme: This creates a read me markdown file. We will do that in the next step so we don't need one now.

Version Control: Make sure Git is selected and then we want to click on the create repository button.

step 3

Step 4

We now need to put some bits in our bucket as the overview says. You're going to want to click on the create a readme button. This will create a readme markdown file so that your repository won't be empty.

step 4

Step 5

We are brought to a screen that will show us what the readme will look like scroll to the bottom of the read me document and click on Commit

step 5

Step 6

Commit Changes. If you're new to repositories you're always going to want to leave a message when you commit. There are many reasons for this. I think the two most important reasons are if you are working with someone they can figure out what you last committed or if you make a mistake and need to go back into your repository this helps you figure it out. There are other ways to figure this out too but leaving a message is sort of the first line of defense. Click on commit.

step 6

Step 7

Over to the left click on the plus sign.

step 7

Step 8

We need to clone our repository onto our machine so that we can work on our computer on or off line! There are two lists in this menu, Create A New and Get To Work Under Get To Work click on Clone this repository

step 8

Step 9

Copy the git clone address.

step 9
FYI - where your address comes from: name.git


Step 10

Open Git Bash on your computer and paste in the address on the command line and press enter.

step 10

Step 11

step 11

So by default the file will go to your local drive. Move this folder where you would like it to be just take note of where you put it. I threw this file on my desktop.

step 11

Step 12

Put whatever files you want into this folder. Make sure your index.html file shows at the top level of this folder. This means your index file should be visable to you as soon as you go into your repository folder.

step 12

Step 13

Now we want to get the files we put in our folder to our online repository. Go back to Git Bash. We have to first git to the folder in Git Bash. type in cd and press space. You are going to want to type in the location of the folder. Since I put my folder on my desktop, my folder will be located at desktop/awesome_tutorial. So my command line will look like:

cd desktop/awesome_tutorial

step 13

*cd stands for change directory. You can use this to get to different folders without opening multiple windows. Practice jumping around your computer. Notice that folders that are cloned repositories will show (master) at the end of the address. This confirms that the folder is for a repository and that you can push and pull changes to the files here.

Step 14

Now that we are in our folder we want to check the folder against our online repository. Since we are checking the status type in:

git status

and press enter

step 14

Step 15

step 15

Everything in red is what is on your computer and needs to be put into your online repositiory. Since we want to add this to our repository we will type in:

git add -A

and press enter.

step 15
*A stands for all. If you only want to add one file you'll need to specify which file to add. ie. git add index.html If you made a change to one file in your folder heres a short cut you can use. Type in :
git add
and then press the tab button. you should see your file pop up on the command line
git add index.html
if it doesn't work you probably have more than one file with changes.
To check use git status. To add multiple files use git add -A.

Step 16

After we add these files to the queue of things to be transfered to the repository, we need to commit them and add a message. We do so by typing in:

git commit -m "your message goes here"

Press enter.

step 16

Step 17

We see a list of the files that will be transfered to the repository. We need to push these files to the repository. By pushing the files they will be in your online bitbucket repository. We do that by typing in:

git push

Press enter.

step 17
Step 18 It will show us the status by saying writing files and shows a percentage. When we have a clean command line the files have been transfered.

step 18

So we can double check the status to make sure all of the files we have on our computer are the same as the ones that are in our repository. Can you guess what we need to do next? We are going to check our status. Type in:

git status

Press enter.

step 18

Step 19

You should get a message that your branch is up to date. This means you are good to go!

step 19
*Everytime you change the files on your computer in your repository folder you're going to have to go through the process of this cycle. git status --> git add --> git commit -m "message" --> git push. You should also just double check to see if everything was pushed after by using git status again.

Step 20

step 20

We want to deploy our site. Open your browser and go to Netlify. Netlify is a platform for automating web projects. Once we set up an account with Netlify for this repository, when we push our changes to bitbucket we will instantaneously see the changes on our website. This is one of the many reasons why the automated deployment process is so much better than FTP.

Click sign up in the top right hand corner.

Step 21

You should be on the welcome to netlify screen. For the purpose of this tutorial we are going to sign up with email for our repository. Click on email.

step 21

Step 22

A smaller window should have popped up asking for login or register details. For the purposes of the tutorial we will put in our email address and the name of our repository.

for example:
your email user name+name of your repository folder @ email provider

mine looks like this:

Click on continue.

step 22

Step 23

The smaller screen should have turned into an email verification page. Check your email to get the verification code. It's okay I'll wait right here...

Put in your code and click on verify.

step 23

Step 24

Hang in there with me we are almost done! We now need to connect your Bitbucket repository to Netlify. On the current screen click the new site from Git on the top right hand corner.

step 24

Step 25

Under continuous Deployment click on BitBucket.
step 25

Step 26

Another window should have popped up with all the repositories you have on BitBucket. Let's pick the repository we created for this turorial.

step 26

Step 27

On next screen we want to click on deploy site.

step 27

Step 28

Congrats. Our repository is now connected to Bitbucket. Let's see what our website looks like. Netlify gave us an assigned web address. You can find it right beneath Overview.

step 28

Step 29


step 29

Optional Step 30

You can change the Netlify address if you have your own domain or if you want to just change the netlify address to something more relevant to your project. Back on the netlify site under Overview click on Domain Settings
step 30
You'll see the domain you were assigned beneath Custom domains. Click on three dots to the right of the address you were assigned.
step 30
Edit Site Name should pop up. That's what we want to do!!! Click on Edit Site Name and another menu should pop up. Type in what you like the address to be. will always be visable unless you have a custom domain address. Click save.

step 30
Your address is now changed. To check it out click the Overview tab on the nav bar. Notice the address is different. If you click it you'll notice the new address in your browser.

{Elseif} You may have purchased a domain you would like to use in Netlify. It is indeed possible to use a your own custom domain with Netlify. You should be able to do that under the domain settings under the overview tab. It's a bit more involved so thats best saved for another tutorial.

There are a lot of steps here and once you are comfortable with using these services you can figure out shortcuts. Please send any questions or comments you have directly to me.

*I like to follow Kronda Adair. She has intresting posts for web designers/developers. Check her out!