Bitbucket integrates well with many third-party continuous integrations (CI) tools, including Jenkins, Travis CI<\/a>, CircleCI<\/a>, Bamboo<\/a>, and more. This integration allows developers to automate the build, test, and deployment processes for their software projects, making it easier to identify and resolve bugs and deliver high-quality software more quickly. Bitbucket provides a variety of APIs and integrations that allow developers to connect it with other tools and systems, including issue trackers, chat apps, and other development and collaboration tools.<\/p>\n This tutorial \u200cwill teach you how to get started with Bitbucket. You will start with learning how to push an HTML project to a Bitbucket repository, configure Bitbucket pages for that respository so it can be viewed over the web browser, create and push a In this article I am going to go through the follow steps to demonstrate using Bitbucket in your projects<\/p>\n These are the things you will need to have (or expect to get if you want to follow along with the examples in this article)<\/p>\n Prior to getting started with Bitbucket, you\u2019ll need to first have a project to work with. For demo and simplicity’s sake, you will create a project that simply outputs \u201cHello World\u201d to the browser.<\/p>\n Create a project directory to store the files for the Fig 1: Creating project directory \u201chello_world\u201d<\/strong><\/p>\n Create an When you view this over a web browser, this is how the web page will look like:<\/p>\n Fig 2: Viewing hello_world project over a web browser<\/strong><\/p>\n The output above simply displays Just like GitHub, you need to have a repository to house the application you\u2019d like to save on Bitbucket. If you are logging in to Bitbucket for the first time, you will be asked to first create a workspace.<\/p>\n A Bitbucket workspace is a container for projects and repositories in Bitbucket, where users can store, manage, and collaborate on their source code. It allows teams to organise their work, assign access permissions to different users, and track changes to code in a centralised location. A workspace can contain multiple repositories, each with its own set of files and folders.<\/p>\n Be sure to click<\/em> on the Fig 3: Initializing creating a bit bucket workspace<\/strong><\/p>\n A new page will show up asking you to add the name of your workspace. This tutorial uses Fig 4: Creating a Bitbucket workspace<\/strong><\/p>\n Once you have created your workspace, you will be directed to your Bitbucket dashboard.<\/p>\n This dashboard provides a centralized view of your repositories, projects, pull requests, issues, and more. It also allows you to manage your code, collaborate with others, and track the progress of your development projects.<\/p>\n To create a repository, click <\/em>on the Fig 5: Initialising creating a Bitbucket repository<\/strong><\/p>\n The page will then redirect to where you\u2019ll need to provide some information about the repository you are trying to create which is as follows:<\/p>\n You have the option to add a description and select the language your project comprised of. These settings are located in the Go ahead and create this repository. This should take less than a minute:<\/p>\n Fig 6: Creating a Bitbucket repository<\/strong><\/p>\n Once your repository has been created successfully, you should see your repository presented to you on your Bitbucket dashboard like the output below:<\/p>\n Fig 7: Viewing Bitbucket repository<\/strong><\/p>\n Since Bitbucket supports the Git version control system, you can upload and transfer the code from your local machine up to your Bitbucket remote repository using Git commands.<\/p>\n Open up your project directory via a terminal or command prompt and execute the following Git commands to commit your changes and push your project up to your Bitbucket repository.<\/p>\n First, execute the command below to initialize a new Git repository in the current directory, This command will create a new directory named Fig 8: Initialising a new Git repository<\/strong><\/p>\n Display the current status of the local repository, including information about changed files that have not yet been committed to the repository, untracked files, and the current branch using the following command:<\/p>\n From the output below, you can see that you are on the master branch and haven\u2019t made any commits yet.<\/p>\n Fig 9: Viewing current branch, commits and untracked files<\/strong><\/p>\n Now execute the following Git command to track the files in your current directory. This prepares them to be committed to the Git repository:<\/p>\n Record changes to the local repository by specifying The commit message provides context and helps to understand the purpose of the changes.<\/p>\n Fig 10: Making a commit message<\/strong><\/p>\n Since you already have the The This can be useful if you want to change the name of your branch to better reflect the work you’re doing, or to align with best practices or conventions within your organisation.<\/p>\n Create a new remote named origin<\/em> and set its URL to a specified URL using the Git command below. This allows you to push and pull changes from the remote repository located at the specified URL, which in this case is your repository on Bitbucket.<\/p>\n To get the URL of your Bitbucket repository, Click<\/em> on the Fig 11: Copying Bitbucket repository URL<\/strong><\/p>\n Since you allowed Bitbucket to add a You should have the Fig 12: Viewing pulled files from remote Bitbucket repository<\/strong><\/p>\n Create an App password on your Bitbucket account that you will use when you want to push your code up to your Bitbucket repository. Click<\/em> on your avatar from your repository page and select Fig 13: Initialising creating an app password<\/strong><\/p>\n The page will redirect to the personal settings page. On this page, select<\/em> the Fig 14: Creating app password<\/strong><\/p>\n Give your app password a label (this tutorial uses Fig 15: Adding app-password label and permissions<\/strong><\/p>\n A pop-up window will be shown to you containing your app password, copy the app password. Be sure to save this password somewhere you can access it, you will always need it whenever you try to push your code to any repository on your Bitbucket account.<\/p>\n Fig 16: Copying app password<\/strong><\/p>\n Close the pop-up window once you have successfully copied the app password for your repository. You should be redirected to the below screen:<\/p>\n Fig 17: Viewing app-passwords<\/strong><\/p>\n Last, execute the following Git command to push the local main branch to a remote repository. This command pushes the local main branch to a remote repository named This command will prompt you to input your Bitbucket username and password. Make sure you provide the correct username and app password as your password.<\/p>\n Once you have successfully pushed to your remote Bitbucket repository, all you now have to do is refresh your Bitbucket repository page. You should see the latest push:<\/p>\n Fig 18: Pushing commits to remote Bitbucket repository<\/strong><\/p>\n Hosting repository with Bitbucket pages<\/strong><\/p>\n Bitbucket has a First, you will need to rename your repository to include the following naming convention – On your repository page, select<\/em> the Fig 19: Viewing repository settings<\/strong><\/p>\n Edit the name of your repository to follow the naming convention stated above and scroll down to the bottom of the page to save this setting:<\/p>\n Fig 20: Renaming repository name<\/strong><\/p>\n Once the change has been saved, navigate to the following web address over your preferred browser to see your static site:<\/p>\n Fig 21: Viewing repository<\/strong><\/p>\n As I mentioned earlier Bitbucket integrates very well with third-party continuous integration and delivery tools. For this tutorial, you\u2019ll be integrating Bitbucket with Circle CI<\/a>.<\/p>\nVueJS<\/code> project to the same Bitbucket repository and then see how to configure CI\/CD workflows with CircleCI<\/code> for that Bitbucket repository.<\/p>\n\n
Prerequisites<\/h2>\n
\n
Initializing a Hello_World project<\/h2>\n
hello_world<\/code> project. You can name this directory whatever you like – this tutorial uses hello_world<\/code>.<\/p>\nmkdir hello_world #creates the hello_world directory \r\n\r\ncd hello_world #goes into the hello_world directory \r\n\r\ncode . #opens up the hello_world directory via your \r\n #default code editor<\/pre>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-1.jpeg\")
<\/p>\nindex.html<\/code> file and paste in the code snippet below:<\/p>\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Bitcket App<\/title>\r\n <!-- Google fonts -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans:wght@100&display=swap\" rel=\"stylesheet\">\r\n <!-- Internal styles -->\r\n <style>\r\n * {padding: 0; margin: 0; box-sizing: border-box;}\r\n body {background-color: hsl(46, 100%, 50%); \r\n Font-family:'IBM Plex Sans', sans-serif; margin: \r\n 60px; display: flex; justify-content: center; \r\n align-items: center;}\r\n h1 {color: hsl(0, 4%, 10%); text-align: center;}\r\n div { border: 5px solid hsl(318, 73%, 22%); width: 500px;\r\n margin: 0 auto; padding: 10px;}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div>\r\n <h1>Hello World<\/h1>\r\n <\/div>\r\n<\/body><\/pre>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-2.jpeg\")
<\/p>\nHello World<\/code> to the browser.<\/p>\nCreating a Bitbucket Workspace and Repository<\/h2>\n
create workspace<\/code> button to create your Bitbucket workspace, just like what the output below does:<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-3.jpeg\")
<\/p>\nmy-helloworldworkspace<\/code> as the name of the workspace. You can name yours whatever you like. Additionally, you have the option of making this workspace public or private. In this tutorial, you\u2019ll on-check the checkbox to enable the workspace to be public as shown in the output below:<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-4.jpeg\")
<\/p>\ncreate<\/code> button on the navigation menu and select <\/em>Repository<\/code> from the drop-down menu. This will initialize the process of creating a Bitbucket repository in your current workspace:<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-5.jpeg\")
<\/p>\n\n
ReadMe<\/code> as you create your repository. This tutorial sets this field to Yes<\/em>.<\/li>\n*.gitignore*<\/code> file to your repository, this tutorial selects Yes<\/em>.<\/li>\n<\/ul>\nadvanced settings<\/code> option.<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-6.jpeg\")
<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-7.jpeg\")
<\/p>\nPushing your code to your Bitbucket repository<\/h2>\n
\".git\"<\/code> within the current directory, which contains all the necessary metadata and objects to manage version control for the project:<\/p>\ngit init<\/pre>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-8.jpeg\")
<\/p>\ngit status<\/pre>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-9.jpeg\")
<\/p>\ngit add . <\/pre>\n
commit<\/code>, which describes the changes being committed using the following Git command:<\/p>\ngit commit -m \"my first commit\"<\/pre>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-10.jpeg\")
<\/p>\nMain<\/code> branch as your default branch for your BitBucket remote repository, execute the Git command below to rename the current branch to \"main\"<\/code>.<\/p>\n\"-M\"<\/code> option specifies that it’s a branch rename operation.<\/p>\ngit branch -M main<\/pre>\n
git remote add origin \"YOUR_BITBUCKET_REPOSITORY_HERE\"<\/pre>\n
clone<\/code> button from the top right side, and copy the URL after the `git clone`<\/code> command highlighted below:<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-11.png\")
<\/p>\nReadME<\/code> and a .<\/em>gitignore<\/code> file while creating your repository, you\u2019ll need to execute the following Git pull<\/code> command to fetch and download the content from the remote repository and merge it with your local repository:<\/p>\ngit pull --rebase origin main<\/pre>\n
ReadME<\/code> and the .gitignore <\/code>file as shown in the below screenshot:<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-12.jpeg\")
<\/p>\npersonal settings<\/code> from the dropdown menu:<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-13.jpeg\")
<\/p>\nApp passwords<\/code> tab from the left panel. A new screen will be shown to you, click<\/em> on the create app password<\/code> button to create an app password:<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-14.jpeg\")
<\/p>\nhello-world<\/code>) as the label, check all the check-boxes under the permissions section and click<\/em> on the create <\/code>button to create this password.<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-15.jpeg\")
<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-16.jpeg\")
<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-17.jpeg\")
<\/p>\n\"origin\"<\/code> with the \"u\" <\/code>option set to track the remote branch as the local main branch.<\/p>\ngit push -u origin main<\/pre>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-18.jpeg\")
<\/p>\npages<\/code> feature that allows you to host static websites directly from your Bitbucket repository. Bitbucket Pages provides a simple, fast, and flexible way for developers, teams, and organizations to create and host websites without the need for dedicated hosting infrastructure.<\/p>\nusername\/workspaceID.bitbucket.io<\/code>. This is the required naming convention to setup pages for your Bitbucket repository.<\/p>\nrepository settings<\/code> tab from the left panel:<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-19.jpeg\")
<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-20.jpeg\")
<\/p>\nhttps:\/\/workspace_ID.bitbucket.io\r\nhttps:\/\/my-helloworldworkspace.bitbucket.io\/<\/pre>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-21.jpeg\")
<\/p>\nUsing a third-party CI tool with Bitbucket<\/h2>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-22.jpeg\")
<\/strong><\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-23.jpeg\")
<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-24.jpeg\")
<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-25.jpeg\")
<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-26.jpeg\")
<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-27.jpeg\")
<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-28.jpeg\")
<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-29.jpeg\")
<\/p>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2023\/04\/word-image-96630-30.jpeg\")
<\/p>\n