You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: content/01-getting-started-with-git-and-github/06-pulling-from-remote.md
+68-16
Original file line number
Diff line number
Diff line change
@@ -10,34 +10,86 @@ weight: 7
10
10
11
11
Now, what if you you make changes directly on the GitHub repository or using another machine ? These changes are not locally synchronized with your primary computer. This is where **pull** comes into play.
12
12
13
-
<br>
13
+
## Make a change on GitHub
14
14
15
-
- Navigate to your repository in GitHub and scroll down to *README.md*. GitHub automatically uses this file as a landing page to a repository which at the moment should be a mere *git-lesson*. To edit this file click on the small pencil icon. This icon is available for any file if you click on it but specifically for `README.md` it's also available as soon as you enter your repository.
Navigate to your repository in GitHub and scroll down to *README.md*. GitHub automatically uses this file as a landing page to a repository which at the moment should be a mere *git-lesson*.
18
18
19
-
<br>
19
+
### Open `README.md` for editing
20
20
21
+
To edit this file click on the small pencil icon on the top right hand corner. This icon is available for any file if you click on it but specifically for `README.md` it's also available as soon as you enter your repository.
21
22
22
-
- Now let's add some text, *Markdown* text (more on markdown [later](https://annakrystalli.me/open-source-workshop/practicalexercises/github/git-02-websites-with-github-pages)).
- Let's see how our Markdown code is rendered and check for typos in the text. If we are happy we can commit the changes. Since we are working online on GitHub there is no **push**.
26
+
This will open up an editable version of the `README.md` file on GitHub that we can edit in the browser.
-Now back in GitKraken Client, we see that our remote repository is ahead of our local. We can also see that it is the local README.md file that is out of date. In order to synchronize the local with the remote repository we can use **Pull**. This will "download" any updates from the remote repository to our local one.
32
+
Now let's **add some more details about the content's of our repo** to our README using *Markdown* text (more on markdown [later]({{< ref "/01-markdown-intro" >}}).
This repo was created as part of the Version Control for researchers workshop
42
42
43
-
<br>
43
+
**Location:** Online
44
+
45
+
```
46
+
47
+
When editing files on GitHub our issue, the main body of the editor contains two tabs:
48
+
49
+
-**<iclass="fa fa-file-code"aria-hidden="true"></i> Edit:** where you make your edits.
50
+
-**<iclass="fa fa-eye"aria-hidden="true"></i> Preview:** (if the content is markdown) where you can preview what the content will look like when it is rendered once the commit is made.
51
+
52
+
Toggle the tabs below to explore this feature. Note how `#` and `***` notation is rendered in the Preview tab.
53
+
54
+
{{< tabs groupId="readme" >}}
55
+
{{% tab name="Edit" %}}
56
+
{{< figure src="/images/work-7c-gk.png" >}}
57
+
{{% /tab %}}
58
+
{{% tab name="Preview" %}}
59
+
{{< figure src="/images/work-7d-gk.png" >}}
60
+
{{% /tab %}}
61
+
{{% /tabs %}}
62
+
63
+
### Commit changes to `README.md`
64
+
65
+
Once you are happy with your changes, go ahead and **commit** them by clicking the **Commit changes** button.
This opens up a panel that should look somewhat familiar to you by now. Go ahead and **enter an informative commit message**. Also, leave the option to **Commit directly to the `main` branch** selected and click on **Commit changes**.
In order to synchronize the local with the remote repository we can use **Pull**. This will "download" any updates from the remote repository to our local one.
Copy file name to clipboardexpand all lines: content/02-websites-with-github-pages/02-create-markdown-website.md
+107-9
Original file line number
Diff line number
Diff line change
@@ -3,21 +3,119 @@ title: Create a Markdown Website
3
3
weight: 2
4
4
---
5
5
6
-
## Add markdown to your Repository
6
+
## Create a website landing page (`index.md`)
7
7
8
-
1. On your computer, create a file in your repository called `index.md`. index is always the entry point to any website - the "Default" webpage.
8
+
In GitKraken create a file in your repository called `index.md`.
9
9
10
-
2. Add some content - perhaps this could be your to-do list or a "Welcome to my homepage" page if you like. Save it and commit it to your repository, then push to GitHub.
10
+
> `index` files have special meaning and represent the entry point to any website - the "Default" webpage.
11
11
12
-
## Enable the website component
12
+
To create a new file in GitKraken Client, we can **use the Command Palette**.
13
13
14
-
Now you need to **enable GitHub Pages** in order to see it turn into a live website.
14
+
To initiate the Command Palette, hit <imgsrc="/images/command-symbol.png"width="2px"style="align:left; display:inline; margin:0;"/> **| Ctrl + P**, type **Create File**, and hit Enter.
15
15
16
-
1. On your GitHub repository, go to the settings (top rightish tab with a cog icon).
16
+
Then enter the file name `index.md`.
17
17
18
-
2. Scroll down to the `GitHub pages` section. Under `Source`, select `master branch` or `main branch` and press save.
4. Once this is done, you should see a green message saying _"Your site is published at_**some-link.github.io**_"_. Click on it - and ta-da! You have a website.
21
+
## Add content to `index.md`
22
+
23
+
I've added some welcoming text to my landing page.
24
+
25
+
I also added:
26
+
27
+
- a **hyperlink** to the workshop materials.
28
+
- an **image** which I sourced from [Unsplash](https://unsplash.com/photos/6wAGwpsXHE0) and **downloaded to the root of my repository**. I also added the attribution tag for the photographer who took the picture. This is actually in HTML but as you will see, markdown files can also render HTML content.
I created this website during [this workshop](https://r-rse-git-github-zero2hero.netlify.app/)
38
+
39
+
40
+
41
+
Photo by <a href="https://unsplash.com/@bel2000a?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Belinda Fewings</a> on <a href="https://unsplash.com/photos/6wAGwpsXHE0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
- Leave the **Source** set tho **Deploy from a branch**.
76
+
- Under **Branch** choose the **`main`** branch and **<iclass="fa fa-folder"aria-hidden="true"></i>
77
+
`/(root)`** of the directory as the source for your website's content.
78
+
- Click **Save**.
79
+
80
+
Once you click on **Save**, GitHub will start building your website in the background (this might take a minute)
81
+
82
+
### Enable HTTPS
83
+
84
+
In the meantime, while our website is being built and in the interest of security, let's go ahead and **enable HTTPS** by scrolling down and ticking the **Enable HTTPS** option.
Once your page is built, the details including the URL to your site will be shown on your GitHub Pages panel (you might need to refresh the page for it to appear).
0 commit comments