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.
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.
Another menu should have slid out from the left. You should see a list. Create New Repository, Team, Project, and List. Click on Repository.
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.
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.
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
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.
Over to the left click on the plus sign.
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
Copy the git clone address.
Open Git Bash on your computer and paste in the address on the command line and press enter.
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.
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.
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:
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:
and press enter
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.
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"
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:
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.
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:
You should get a message that your branch is up to date. This means you are good to go!
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.
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.
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.
your email user name+name of your repository folder @ email provider
mine looks like this:
Click on continue.
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.
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 25Under continuous Deployment click on BitBucket.
Another window should have popped up with all the repositories you have on BitBucket. Let's pick the repository we created for this turorial.
On next screen we want to click on deploy site.
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.
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
You'll see the domain you were assigned beneath Custom domains. Click on three dots to the right of the address you were assigned.
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. .netlify.com will always be visable unless you have a custom domain address. Click save.
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.
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!