Skip to content

Commit 776d840

Browse files
github page update (#385)
Updated page layout Updated Github screenshots Checked for accuracy
2 parents 448e9aa + b41e02a commit 776d840

3 files changed

Lines changed: 55 additions & 203 deletions

File tree

source/common/develop/ide/editing/git.rst

Lines changed: 55 additions & 203 deletions
Original file line numberDiff line numberDiff line change
@@ -9,44 +9,20 @@ Git and GitHub are preinstalled, as well as Mercurial and SVN. You can open a :r
99

1010
You can also configure your **.codio** file to create a **Run** menu from which you can access common commands in the Codio IDE. See :ref:`Customize Run Button <customizable-run-menu>` for more information.
1111

12-
If you are new to Git, refer to the following to get started:
12+
If you are new to Git, refer to this reference page to get started `Git reference <http://git-scm.com/docs>`__
1313

14-
* `Git is simpler than you think <http://nfarina.com/post/9868516270/git-is-simpler>`__ (explains how Git works rather than teaching you usage).
1514

16-
* `Git reference <http://git-scm.com/docs>`__
17-
* `10 Git Tutorials for beginners <http://sixrevisions.com/resources/git-Tutorials-beginners/>`__
1815

19-
20-
Use Git without remote repos
16+
Use Git Without Remote Repos
2117
----------------------------
2218
You can use Git commands in your Codio project without using a remote repo, providing more collaborative capabilities and comprehensive version control. However, you can add a remote repository, such as GitHub (recommended), if you want to save your code in more than one location as a back up.
2319

2420
To add a repo, click **Tools > Git > Remotes**.
2521

26-
View GitHub repos
27-
-----------------
28-
GitHub let's you browse around a repo but it's not the same as using an IDE. Codio gives you a great way of viewing any GitHub (or Git) repo. For web apps, you can even run and :ref:`preview <preview>` in Codio.
29-
30-
Provide link to project in readme.md file
31-
-----------------------------------------
32-
You can include a link to your project in the project readme.md file that initiates the creation of a project and imports it from the repo into the users Codio account. When you make changes to your repo, the changes are automatically shown in Codio since a brand new Codio project is created whenever the link is clicked. If a project with the same name already exists, users can change the name on the project creation page.
33-
34-
.. figure:: /img/github-readme.png
35-
:alt: create from GitHub
36-
37-
To create the link in your GitHub README.md file (or anywhere else for that matter), enter the following:
38-
39-
::
40-
41-
https://codio.com/home/projects/new?importType=git&activeTab=3&name=your_codio_project_name&importGitUrl=git@github.com:your_github_name/your_repo_name&stackVersion=stack_version_id
42-
43-
To specify a specific branch (for example, you have a demo or GitHub Pages site that you want to load into Codio), enter the following:
44-
45-
::
22+
Alternatively, you can use the regular ``git`` commands in your terminal.
4623

47-
https://codio.com/home/projects/new?importType=git&activeTab=3&name=your_codio_project_name&importGitUrl=git@github.com:your_github_name/your_repo_name&branch=other_branch&stackVersion=stack_version_id
4824

49-
Find stack version ID
25+
Find Stack Version ID
5026
.....................
5127
To find the appropriate stack to use with your repo, go to **Stacks** in the Dashboard, choose the stack to be used, and click **Use Stack**. In the address bar, you can view the stack version ID to add to your link in the readme.md file.
5228

@@ -63,201 +39,77 @@ You can use any method for linking to Codio but we recommend using the following
6339
.. figure:: /img/demo-in-ide.png
6440
:alt: Demo in IDE
6541

66-
Manually import a Git repo into Codio
42+
43+
Manually Import a Git repo Into Codio
6744
-------------------------------------
6845
To manually import a Git repo into Codio, follow these steps:
6946

70-
1. In GitHub, click the **Clone URL** link in the right pane and copy to the clipboard.
71-
72-
.. figure:: /img/github-clone-url.png
73-
:alt: create from GitHub
74-
75-
If you are cloning using SSH, you must have already added the Codio SSH public key as described in :ref:`Upload SSH Key to Remote Server <upload-ssh-key-remote-server>`.
76-
77-
2. Log in to Codio and click **New Project**.
78-
79-
3. Click the **Click here** link for more options.
80-
81-
.. figure:: /img/github-create.png
82-
:alt: create from GitHub
83-
84-
4. In the **Select your Starting Point** area, click **Import**.
85-
86-
5. From the **Source** drop-down list, choose **Git**.
8747

88-
6. Paste the Git URL into the **URL** field and add details about the project.
89-
90-
7. Click **Create**. Codio loads the repo and displays it.
91-
92-
93-
Create new GitHub repo from Codio
48+
+--------------------------------------------------------------+--------------------------------------------------------------------+
49+
| 1. In GitHub, click the green **Code** button on the right | .. image:: /img/github-clone-url.png |
50+
| and copy to the clipboard. | :alt: create from GitHub |
51+
| | :width: 510px |
52+
| | |
53+
| 2. Log in to Codio and click **New Project**. | |
54+
| | |
55+
| | .. image:: /img/github-create.png |
56+
| 3. Click the **Click here** link for more options. | :alt: create from GitHub |
57+
| | :width: 350px |
58+
| | |
59+
| 4. In the **Select your Starting Point** area, click | |
60+
| **Import**. | |
61+
| | |
62+
| | |
63+
| 5. From the **Source** drop-down list, choose **Git**. | |
64+
| | |
65+
| | |
66+
| 6. Paste the Git URL into the **URL** field and add | |
67+
| details about the project. | |
68+
| | |
69+
| | |
70+
| 7. Click **Create**. Codio loads the repo and displays it. | |
71+
+--------------------------------------------------------------+--------------------------------------------------------------------+
72+
73+
74+
75+
.. raw:: html
76+
77+
<div style="margin: 0 0 10px 20px; padding: 10px; background: #f0f0f0; border: 3px solid #00ece5;">
78+
<strong>Note:</strong> If you are cloning using SSH, you must have already added the Codio SSH public key as described in <a href="https://docs.codio.com/common/settings/upload-ssh-key-remote-server.html#upload-ssh-key-remote-server">Upload SSH Key to Remote Server</a>.
79+
</div>
80+
81+
Create New GitHub Repo From Codio
9482
---------------------------------
9583
If you have code in Codio and want to create a new GitHub (or other remote) repo, follow these steps:
9684

85+
.. image:: /img/github-new-repo.png
86+
:alt: github repo
87+
:align: right
88+
:width: 400px
89+
9790
1. Create a new project in Codio or open up an existing project.
9891
2. Open the terminal (**Tools > Terminal**), type **git init** and press **Enter** to initialize Git.
9992
3. Create a new, empty repo on GitHub or other remote repo.
10093
4. Copy the repo url to the clipboard.
10194

102-
.. Note:: If you're using GitHub, use the **SSH url** rather than **https**. Also make sure that your Codio public key is uploaded to your GitHub account or repo settings as described in :ref:`Upload SSH Key to Remote Server <upload-ssh-key-remote-server>`.
95+
.. raw:: html
10396

104-
.. figure:: /img/github-new-repo.png
105-
:alt: github repo
97+
<div style="float: right; width: 350px; margin: 0 0 10px 20px; padding: 10px; background: #f0f0f0; border: 3px solid #00ece5;">
98+
<strong>Note:</strong> If you're using GitHub, use the <strong>SSH url</strong> rather than <strong>https</strong>. Also make sure that your Codio public key is uploaded to your GitHub account or repo settings as described in <a href="https://docs.codio.com/common/settings/upload-ssh-key-remote-server.html#upload-ssh-key-remote-server">Upload SSH Key to Remote Server</a>.
99+
</div>
106100

107101
5. In the Codio IDE, click **Tools > Git > Remotes** on the menu.
108102
6. Click the **Edit** icon and enter the **Name** and paste the **URL** into the field. It is recommended you use **origin** as the name to confirm the normal standards. You do not need to specify a username or password if you are using SSH.
109103
7. Click **Save**.
110104

111-
Check project status
112-
--------------------
113-
Whenever you want to see the Git status of your project, enter ``git status``. Initially, nothing will be returned until changes are committed.
114-
115-
.. code:: bash
116-
117-
$ git status
118-
# On branch master nothing to commit, working directory clean
119-
120-
Track files
121-
-----------
122-
Codio uses Git by default and if you import a project from a Git repo, all the existing files are ready to be tracked. Tracking means that Git knows about them. If you add a new file, Git does not know about it and needs to be explicitly told:
123-
124-
1. Add a new file (**test.txt**) and then add a few random characters to it.
125-
2. Open any other existing file and make a small change to it.
126-
3. Run ``git status`` and you should see results similar to the following, which shows the modified and the new (untracked) files:
127-
128-
.. code:: bash
129-
130-
# On branch master `
131-
# Changes not staged for commit:`
132-
# (use "git add ..." to update what will be committed)
133-
# (use "git checkout -- ..." to discard changes in working directory)
134-
#
135-
# modified: humans.txt
136-
#
137-
# Untracked files:
138-
# (use "git add ..." to include in what will be committed)
139-
#
140-
# test.txt no changes added to commit (use "git add" and/or "git commit -a")
141-
142-
4. To tell GitHub to track the file, enter one of the following commands:
143-
144-
- ``git add .`` - tells Git to track all files in the project that are not yet tracked. This is the quickest and simplest way to track any new files.
145-
- ``git add FILENAME`` - explicitly tracks a single file.
146-
147-
Stage files
148-
------------
149-
A staged file is one that is tracked and is ready to commit to the repository. Once you run ``git add``, the file is being tracked and staged. However, if you modify a tracked file, the modifications are not staged. To stage the file, rerun ``git add``.
150-
151-
Commit your changes
152-
-------------------
153-
Committing means that you want to add your staged files into the repository. You can commit using one of the following commands:
154-
155-
- ``git commit -m 'commit message'`` - commits all staged files to the repo.
156-
- ``git commit -a -m 'commit message'`` commits all staged files to the repo and also automatically stages any tracked files before committing them. If you use this command, you do not need to run ``git add`` unless you want to add new, untracked files.
157-
158-
The commit message is important as it allows you to see what general changes are included in the commit. For example:
159-
160-
``git commit -a -m "added test.txt and modified some stuff"`` and get
161105

162-
.. code:: bash
163-
164-
[master d3e6bb1] added test.txt and modified some stuff
165-
2 files changed, 2 insertions(+)
166-
create mode 100644 test.txt`
167-
168-
If you run a ``git status``, you can see that everything is clean and up-to-date.
169-
170-
.. code:: bash
171-
172-
# On branch master nothing to commit, working directory clean
173-
174-
Revert code
175-
-----------
176-
You can revert your code back to an earlier commit to roll back your changes. Use one of the following commands to revert:
177-
178-
- ``git revert 'commit id'`` - reverts back to the SHA (uid); you can see when you type ``git log``.
179-
- ``git revert HEAD`` - reverts back to the last commit, deleting any uncommitted changes.
180-
- ``git revert HEAD~n`` - reverts to the last n commit; for example, HEAD~3 reverts to the 4th last commit.
181-
- ``git revert HEAD^^^`` - (count of ^ is like ~n) - reverts to the last n commit; for example, HEAD^^^4 reverts to the 4th last commit.
182-
183-
For more information about reverting code, see http://git-scm.com/docs/git-revert.html.
184-
185-
Push to a remote repository
186-
---------------------------
187-
If you have a remote repository configure, commit your changes using the ``git push origin master`` command, where:
188-
- ``origin`` - is the name of the remote repo.
189-
- ``master`` - is the name of the branch. When you create a new Codio project, a ``master`` branch is automatically created and appears in brackets at the top of the file tree next to the project name.
190-
191-
You can view your pushed commits in the GitHub repo.
192-
193-
Pull from a remote repository
194-
-----------------------------
195-
If others are working remotely on the same code (not in Codio), they are also pushing their code to the GitHub repo. Run the ``git pull origin master`` command to pull in changes from the remote repo and automatically merge the code.
196-
197-
Resolve conflicts
106+
Github Commands
198107
-----------------
199-
When you pull in from the remote, you may get a conflict warning. This occurs if someone else has modified code in a way that Git cannot automatically resolve it, usually because you have been editing the same code.
200-
201-
You can minimize conflicts by committing small changes and pulling from master often.
202-
203-
To resolve the conflict, follow these steps:
204-
205-
1. Open the file. Something similar to the following is displayed:
206-
207-
.. code:: bash
208-
209-
<<<<<<< HEAD:index.html
210-
<div id="footer">contact : email.support@github.com</div>
211-
=======
212-
<div id="footer">
213-
please contact us at support@github.com
214-
</div>
215-
>>>>>>> iss53:index.html
216-
217-
2. Remove the code block that you do not want to keep. The top block is your code and the bottom comes from the code that is being merged. If you want to keep your code, modify as follows:
218-
219-
.. code:: html
220-
221-
<div id="footer">contact : email.support@github.com</div>
222-
223-
224-
If you want to keep the merged code, modify as follows:
225-
226-
.. code:: html
227-
228-
<div id="footer">
229-
please contact us at support@github.com
230-
</div>
231-
232-
Branches
233-
--------
234-
When you create a branch, you are creating a new area to code. You then merge another branch (usually the master branch), into your new branch. From this point on, you can do whatever you want (add, commit, push etc) without impacting the master branch on any other branch. For more information about branching, see http://git-scm.com/book/en/Git-Branching-What-a-Branch-Is.
235-
236-
Use the following commands for branching:
237-
238-
- ``git branch`` - creates a new branch.
239-
- ``git checkout`` - switches to that branch (be sure to commit your current branch before switching to another branch so you don't lose any unstaged files).
240-
- ``git merge from-branch`` - merges code from ``from-branch`` into your current branch.
241-
242-
It is recommended that you switch to your master branch and pull in changes from the remote, and then switch back to your working branch and merge changes. This practice will minimize conflicts.
243-
244-
You can switch branches using the command line interface or from the **Tools > Git > Switch Branch** menu.
245-
246-
Active branch
247-
.............
248-
You can see which branch is active by looking in the file tree. The top level item is the project name and the current branch is in brackets.
249-
250-
251-
Basic commands
252-
..............
253-
254-
- ``git status`` - shows the status of your current branch.
255-
- ``git add .`` - adds all files, tracked or not, to the staged files.
256-
- ``git commit -a -m`` - stages and commits all files to the snapshot.
257-
- ``git push --set-upstream origin master`` - Run this command the first time you push to track the new remote.
258-
- ``git push`` - used for subsequent pushes; this command pushes all committed changes of the ``master`` branch to the tracked remote (origin).
259-
260-
261108

109+
GitHub functions normally within Codio, giving you access to all the standard Git commands and GitHub features you're familiar with.
262110

111+
.. raw:: html
263112

113+
<div style="margin: 0 0 10px 20px; padding: 10px; background: #f0f0f0; border: 3px solid #00ece5;">
114+
<strong>Note:</strong> The Guides folder is automatically included in your project, unless you manually remove it</a>.
115+
</div>

source/img/github-clone-url.png

166 KB
Loading

source/img/github-new-repo.png

74.5 KB
Loading

0 commit comments

Comments
 (0)