Edit files in a cloud-hosted Git repository
01 Mar 2024
Just got a new job, and wanting to help edit your colleagues’ Git repository?
Note: Presume this repository already has at least 1 “commit” in the cloud-hosted copy’s history. (If not, read “Fill an empty cloud-hosted Git repository.”)
How do you set yourself up so that you can add, edit, and delete files within it?
Let’s take a look at some of your options.
Basic web-based editors
Many Git cloud hosts (see the list of examples above) offer a web-browser-based interface for exploring the files (and file history) contained in the copy of a Git repository that the service is responsible for hosting.
Such interfaces often include buttons for adding, removing, editing, and renaming files.
Typically, each time you save your changes to 1 file in a basic web-based editor, you have to make a commit.
To save more than 1 file at a time per commit, see the “advanced web-based editor” list in the section below this one.
Some basic web editors include:
- GitHub - managing files.
- GitHub’s web interface even makes it easy to add your first file to the cloud-hosted copy of an empty repository!
- Atlassian BitBucket’s web interface comes with a triple-dot button labeled “more options,” under which you’ll find links for adding, removing and editing files.
- This only appears once BitBucket’s copy of the repository has at least 1 commit in its history.
- GitLab - web editor.
- Azure DevOps Repos’s web interface comes with buttons for adding, removing and editing files once Azure Repos’s copy of the repository is not empty anymore.
- This only appears once Azure Repos’s copy of the repository has at least 1 commit in its history.
- Sadly, Microsoft didn’t document their web portal, but you can find editing options by clicking triple-dot buttons with a tooltip of “more actions” that appears next to every file and folder name when you hover over it, as well as one at the top of the file structure navigator.
- AWS CodeCommit - working with files.
- OCI Code Repositories - manage files.
Advanced web-based editors
Advanced web-based editors’ main advantage is being able to batch changes to multiple files at a time in a single commit, just like when you are using Git on your desktop computer.
VSCode.dev and GitHub.dev
- VSCode.dev can edit the contents of Git repositories hosted on Azure DevOps Repos and on GitHub.
- GitHub.dev can edit the contents of Git repositories hosted on GitHub.
To edit code directly in the cloud-hosted copy of your repository:
- Open your repository in the web editor.
- For Azure Repos with VSCode.dev:
- Just hit “.” on your keyboard while browsing your repository’s contents in your web browser.
- Alternatively:
- If the URL of your repository’s file browser is
https://dev.azure.com/YOUR_ORG/YOUR_PROJECT/_git/YOUR_REPO
… - …Then instead open this URL in your web browser:
https://vscode.dev/azurerepos/YOUR_ORG/YOUR_PROJECT/YOUR_REPO
- If the URL of your repository’s file browser is
- For GitHub repositories:
- With GitHub.dev:
- Just hit “.” on your keyboard while browsing your repository’s contents in your web browser.
- This only does anything useful once GitHub’s copy of the repository has at least 1 commit in its history.
- Alternatively:
- If the URL of your repository’s file browser is
https://github.com/YOUR_REPOS_OWNER/YOUR_REPO
… - …Then instead open this URL in your web browser:
https://github.dev/YOUR_REPOS_OWNER/YOUR_REPO
- If the URL of your repository’s file browser is
- Just hit “.” on your keyboard while browsing your repository’s contents in your web browser.
- With VSCode.dev:
- If the URL of your repository’s file browser is
https://github.com/YOUR_REPOS_OWNER/YOUR_REPO
… - …Then instead open this URL in your web browser:
https://vscode.dev/github/YOUR_REPOS_OWNER/YOUR_REPO
- If the URL of your repository’s file browser is
- With GitHub.dev:
- For Azure Repos with VSCode.dev:
- Add/edit files and save your changes using the “Explorer” part of the VSCode.dev or GitHub.dev user interface.
- Commit and push your edits into the copy of the repository hosted on Azure Repos / GitHub.
- Be sure to click the extra buttons necessary to follow your team’s branching and pull request etiquette if applicable.
Notes:
- File-editing and commit/push instructions linked above are applicable to both GitHub.dev and VSCode.dev. They have exactly the same look and feel. Both websites are simply browser-based copies of a desktop tool called VSCode.
- GitHub.dev and VSCode.dev only work correctly once the corresponding cloud-hosted copy of the repository has at least 1 commit in its history. The user interface will look normal at first glance, but none of the functionality will work correctly if the underlying repository is empty.
GitLab Web IDE
- GitLab WebIDE can edit the contents of Git repositories hosted on GitLab.
AWS Cloud9
- AWS Cloud9 can edit the contents of Git repositories hosted on AWS CodeCommit.
GCP Cloud Shell Editor
- GCP Cloud Shell Editor can edit the contents of Git repositories hosted on GCP Cloud Source Repositories.
Specialty web-based editors
The following editors are technically web-based configuration editors that auto-sync to an underlying cloud-hosted Git repository.
However, they’re only meant for editing the contents of repositories containing certain types of codebase.
They’re not meant as all-purpose editors.
OCI Visual Builder Studio
- OCI Visual Builder Studio seems to be able to edit the contents of Git repositories hosted on OCI Code Repositories, but doesn’t seems to be for editing only repositories containing certain types of codebase, not an all-purpose editor.
Azure Data Factory
All kinds of cloud-hosted infrastructure/platform services can often auto-sync to various repositories.
For example, ETL tool Azure Data Factory, when provisioned in Azure’s Commercial Cloud, can auto-sync the configuration you do in its point-and-click web editor to a Git repository hosted at GitHub or at Azure DevOps Repos.
Desktop computer editors
Tip: If you’re completely new to working with Git repositories, please try one of the basic or advanced web-browser-based options above before worrying about trying to synchronize the cloud-hosted version of a Git repository to a local version stored on your computer.
Git repository synchronization isn’t as “automagic” as you might be used to with something like Dropbox or OneDrive. (It’s a complicated on purpose, because Git was invented by programmers, and programmers love to trade a little convenience for a lot of fine-grained control.) Web-browser-based editors have gotten incredibly good in the 2020’s. Git repository synchronization is a royal pain that you might not need to deal with at all. (One of my pet peeves is that not all Git hosting service “getting started” documentation has caught up to this reality – I think they might scare a lot of newbiew off with all of their “remote” and “cloning” jargon that can often be skipped altogether.)
If you’re a technical writer, you might not even need to test code on your own desktop computer – so why worry about the complex mechanics of synchronizing a copy between the cloud and your computer?
When I helped edit documentation during a Salesforce Open Source Commons community sprint, we exclusively used GitHub.dev. No participant ever installed a thing onto their own desktop computers.
The web editors work really well for tasks like editing documentation contained in README.md
files.
Bonus: you can use web editors from a smartphone when you need to fix a typo on the go!
Don’t let anyone tell you the web editors aren’t good enough. They probably just haven’t given the advanced web editors a fair try recently.
The basic web editors … yeah, they might not be good enough for serious projects. (It’s really annoying to have the history of the repository cluttered up with 1 commit per file edit.)
But the advanced web editors can do everything that the desktop editors can do when it comes to following your team’s agreed-upon style etiquette for “commits” and “branching” (which is what the old-timers are afraid you’ll accidentally break the in-house rules of if you don’t use a serious enough editing tool).
I use them all the time.
TODO: All this is junk so far
VSCode
- TODO
GitHub Desktop
- If you haven’t already, download a copy of the cloud-hosted repository into a folder of your choice on your desktop computer (e.g.
C:\example\
) with the File -> Clone repository menu option.- TODO: Does this actually work with an empty repository? SEE OTHER ARTICLE IF SO.
- Use the Fetch Origin button to make sure your computer’s copy of the repository is up-to-date with the cloud-hosted copy of the repository.
- TODO: Does this actually work with an empty repository? SEE OTHER ARTICLE IF SO.
- If you are expected to follow your team’s branching and pull request etiquette, then before you start editing any files, please create a new branch and switch over to using it.
- Using your favorite file-editing software, add/edit/remove files in
C:\example\
(or whatever folder you chose) and save your work. - Use the changes tab and the commit button when you’re at a nice stopping point that you’d like to put into your official file-change history.
- Use the push button to upload the “commit” you just made into the cloud-hosted copy of the repository. (Note: if you’re editing within the context of a
YOUR_NEW_BRANCH_NAME
branch, and if GitHub Desktop says you need to publish that branch to the cloud-hosted copy first, go ahead and do click its prompts that publish the branch to the cloud for you.)- Note: If you were editing files in a
YOUR_NEW_BRANCH_NAME
branch instead of the primary branch of the repository (for team etiquette), you’ll have to explore that branch in the cloud host’s web-based file explorer to see your work, and then you’ll have to:- Use GitHub Desktop’s “pull request” interface and, if necessary, the cloud host’s web editor’s “pull request” interface, to merge your changes into the cloud-hosted copy of the primary branch of the repository.
- Delete the
YOUR_NEW_BRANCH_NAME
branch both out of the cloud-hosted copy of your repository (if it’s still there after merging the pull request) and off of your local computer, using GitHub Desktop’s buttons for deleting branches.
- Note: If you were editing files in a
- Ready to make more edits? Repeat from step 2.
Git command line
Under the hood, all of the user-friendly desktop editors are more or less using a Git command line that’s also installed onto your computer.
If you’re a keyboard warrior and really can’t stand a mouse, knock yourself out.
Cheating by making it not empty
- Use one of the web-based approaches above to put a file such as
README.md
or a.gitignore
into the cloud-hosted copy of the repository.- This is also a great way to make sure that your new repository’s primary branch follows the naming conventions chosen by the rest of your team.
- Download a copy of the no-longer-empty cloud-hosted repository into a folder of your choice on your desktop computer (e.g.
C:\example\
) with thegit clone
command.- If you already cloned it a while ago, run the
git pull
command to make sure your computer’s copy of the repository is up-to-date with the cloud-hosted copy of the repository.
- If you already cloned it a while ago, run the
- If you are expected to follow your team’s branching and pull request etiquette, then before you start editing any files, please create a new branch and switch over to using it with [the
git checkout -b YOUR_NEW_BRANCH_NAME
command]. - Using your favorite file-editing software, add/edit/remove files in
C:\example\
(or whatever folder you chose) and save your work. - Use the
git add
,git commit
, etc. commands when you’re at a nice stopping point that you’d like to put into your official file-change history. - Use the
git push -u origin YOUR_NEW_BRANCH_NAME
command to upload the “commit” you just made into the cloud-hosted copy of the repository.- Note: If you were editing files in a
YOUR_NEW_BRANCH_NAME
branch instead of the primary branch of the repository (for team etiquette), you’ll have to explore that branch in the cloud host’s web-based file explorer to see your work, and then you’ll have to:- Use the cloud host’s web editor’s “pull request” interface to merge your changes into the cloud-hosted copy of the primary branch of the repository.
- Delete the
YOUR_NEW_BRANCH_NAME
branch both out of the cloud-hosted copy of your repository (if it’s still there after merging the pull request) and off of your local computer.
- Note: If you were editing files in a
- Ready to make more edits? Repeat from step 2 (using
git pull
instead ofgit clone
).