For many of our projects, we start by developing static front-end templates based on custom designs. There are always multiple people involved in this process, and we always want a quick and easy way to show the client our progress. To make this as easy and error-proof as possible, we have built a system that combines Git repositories from Bitbucket and automated deployment from Deploybot.
Here’s how it works:
- We set up BitBucket accounts for each member of our team.
- We create a repository and share write access with each team member. This allows each team member to share file updates and track changes each time new code is committed to the repository.
- For those who aren’t familiar with Git yet, SourceTree is an extraordinary visual tool that hooks in directly with Bitbucket (they’re built by the same company).
- We then set up an automatic deployment to an FTP site using Deploybot (which connects with Bitbucket).
- Deploybot pushes all updates to the FTP server every time new changes are committed to the repo, which means nobody ever has to touch FTP, and we’ll always have a simple URL where the client (and our team) can see the current version of the project.
Getting started with Git, Bitbucket and SourceTree
First, set up a Bitbucket account for yourself and each member of your team. You can then create a new private repository and assign each user to have Write access.
To add users, go to Settings in the left sidebar, then User and Group Access:
From there, you and the other users can clone the repository by clicking Clone in the sidebar (see screenshot below). If you’re not comfortable using Git from the command line (or you just want a break from command-line code), we recommend grabbing the SourceTree app, which provides a visual Git interface and also hooks up with Bitbucket for one-click cloning.
Cloning will make a copy of the repository and all its files on your hard drive at a destination of your choice. You can then edit the files in your preferred HTML/text editor, and your changes will be tracked by Git so you can easily share them with your colleagues. We’ll dig into the step-by-step details of Git and SourceTree in a future article, but here are the basics:
- When you’ve made changes you want to share and publish, commit those changes to the repo
- Push your commit to upload your changes to the Bitbucket cloud. (This also triggers an automated deployment, which we’ll discuss below.)
- Before you start work, pull any commits that others have made since you did your last push.
It takes a while to get the hang of Git, and there’s a ton of additional complexity and power beyond what we’ve described here. That said, a simple commit-push-pull-repeat system will get you started. Next, let’s look at automating the upload of your project to your web server.
Make it automatic with Deploybot
Head over to Deploybot and set up an account. From there, you can connect your Bitbucket account to Deploybot and connect your first repository.
Your connected repository will take a moment to initialize, which is a great time to make your first commit.
Important: Before you can set up Deploybot, you need to make at least one commit to the master (default) branch of your repository. You can do this by adding a blank index.html file, saving it, committing it, and pushing it. (This is necessary because Deploybot needs you to choose the branch it will be tracking in the next step.)
Once you’ve made your first commit and the repository is ready for editing on Deploybot, click your repo’s name, then Create Environment & Server. Name your environment (for example, “My Staging FTP”), then choose the Automatic option to deploy to this environment every time you push a new commit to Bitbucket. You’ll also select the “master” branch in the third field on this form.
On the next page, choose FTP or SFTP. On the subsequent page, enter the host, username, password and path for your FTP site and the desired folder. Save your changes, and you’re good to go!
The magic of automation
Deploybot will now listen for new commits, and every time any team member pushes a commit to Bitbucket, Deploybot will immediately upload those changes to your FTP site.
The result: you and your team can collaborate easily, make changes on your local machines, and sync all those changes to your staging site within seconds with no manual uploading required. It’s a fantastic way to instantly share changes with your client and ensure you’re always on the same page.