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
@@ -26,14 +26,14 @@ In this workshop, we will create GitHub accounts, learn the terms used to build
26
26
27
27
## Create GitHub account
28
28
29
-
Navigate to https://github.com/.
30
-
Click Sign up.
31
-
Follow the prompts to create your personal account.
32
-
Email
33
-
Password (Password should be at least 15 characters OR at least 8 characters including a number and a lowercase letter.)
34
-
Username* (Username may only contain alphanumeric characters or single hyphens, and cannot begin or end with a hyphen. (NOTE: You will want to pick a professional username because it will be in all of your URLs))
29
+
1.Navigate to https://github.com/.
30
+
2.Click Sign up.
31
+
3.Follow the prompts to create your personal account.
32
+
-Email
33
+
-Password (Password should be at least 15 characters OR at least 8 characters including a number and a lowercase letter.)
34
+
-Username* (Username may only contain alphanumeric characters or single hyphens, and cannot begin or end with a hyphen. (NOTE: You will want to pick a professional username because it will be in all of your URLs))
35
35
36
-
Create Account>
36
+
4.Create Account>
37
37
38
38
(During sign up, you'll be asked to verify your email address. Without a verified email address, you won't be able to complete some basic GitHub tasks, such as creating a repository.)
39
39
@@ -81,149 +81,83 @@ Navigate to this URL in your web browser
81
81
2. Find and select the "Fork" button near the top right
82
82
OPTIONAL: You can rename the repository for your own account
83
83
3. Select the green 🟩 "Create fork" button
84
-
[Create a GitHub account](https://github.com/signup) if you do not already have one. (NOTE: You will want to pick a professional username because it will be in all of your URLs)
85
-
3. Navigate back to [this repository](https://github.com/Makeademic/dream-lab-blog/) and click the green 🟩 "Use this template" button and then "Create a new repository"
86
-
4. Type a name for your new repository (NOTE: lowercase and no spaces is best for URLs with hyphens or underscores separating each word)
87
-
5. Select "Public" repository visibility and you only need to include the "main" branch (We will build the gh-pages branch in a later step)
88
-
6. Click the green 🟩 "Create repository from template" button
89
84
90
-
**Review**
91
-
So far, what we have done is created a copy of a public project on our individual accounts so that we can edit and make changes to the files
85
+
## Create GitHub Pages
92
86
93
-
## Setting Up Your Project in GitHub Codespaces
87
+
1. Navigate to ⚙️Settings in the top menu bar
88
+
2. Find and select the Pages button in the left sidebar
89
+
3. Click on the Branch dropdown menu that says None and change it to main
90
+
4. Select the Save button
91
+
5. This will build your GitHub pages site
94
92
95
-
93
+
## Create GitHub Codespace
96
94
97
-
1. On your repository's homepage, click the green 🟩 "Code" button and switch from the "Local" to the "Codespaces" tab. Then click the green 🟩 "Create codespace on main" button.
98
-
2. This will open up a new tab in your browser and will take some time, so be patient with it. [NOTE: As of authoring this document, GitHub provides 60 free hours of Codespaces every month]
99
-
3. You should see the **Explorer** on the left (this helps you see folder hierarchy), the **Editor** on the right (this is where you can edit the code), and the **Terminal** at the bottom (this is where we will provide instructions for building our project). The far left toolbar will let you switch between options: **Explorer**, **Search**, **Source Control**, **Run and Debug**, **Extensions**, and **GitHub**.
100
-
4. In the **Explorer** (stacked pages icon), navigate to `_data/metadata.js` and double-click to open the file in the **Editor** space. Change the title, URL (https://username.github.io/repositoryname), description, and author data.
101
-
5. In the **Terminal**, install dependencies (the needed files for this version of the project) by copying and pasting the code below and then pressing enter/return.
102
-
```
103
-
npm install
104
-
```
105
-
6. You should see new lines of text being generated in the **Terminal**.
106
-
107
-
## Editing Files in Your Project
108
-
109
-
### Previewing Changes
110
-
1. If you want to see a local test of your site before you put it on the web, copy and paste the following code in the **Terminal**
111
-
```
112
-
npx @11ty/eleventy --serve
113
-
```
114
-
2. Command + click on the local link to view a preview of your site in a new browser tab
115
-
3. This process will be constantly running, so any changes you make in the editor will populate in the
116
-
> Note: Type Control+C in the **Terminal** to terminate the command if you don't want it running in the background.
117
-
118
-
### Editing Text
119
-
>Your text files will be in the "content" folder, your assets like images and documents will be in the "public" folder, and your styling will be in the "css" folder. Some file extensions you will want to know are:
120
-
>- .html (Hypertext Markup Language (HTML) is the standard markup language for **documents** designed to be displayed in a **web** browser)
121
-
>- .css (Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and **styling** of a document written in a markup language such as HTML)
122
-
>- .js (JavaScript (JS) is the programming language for creating interactive, dynamic websites)
123
-
>- .md (Markdown is a lightweight markup language for creating formatted text using a **plain-text** editor)
124
-
>- .njk (Nunjucks is a templating language for JavaScript)
125
-
>- .svg (Scalable Vector Graphics (SVG) is an XML-based vector graphics format for defining two-dimensional graphics, having support for interactivity and animation)
126
-
>- .jpg (jpg or jpeg, short for Joint Photographic Experts Group, is a compressed image format used for photos)
127
-
>- .ico (short for icon, this file format is for square icons like the favicon in your browser tab, can be based on a transparent .png (Portable Network Graphics))
95
+
1. Navigate to <>Code in the top menu bar
96
+
2. Find and select the green <>Code dropdown menu
97
+
3. Toggle from Local to Codespaces
98
+
4. Select the green Create codespace on main button
99
+
5. This will open up a new tab in your browser and will take some time, so be patient with it. [NOTE: As of authoring this document, GitHub provides 60 free hours of Codespaces every month]
100
+
6. You should see the **Explorer** on the left (this helps you see folder hierarchy), the **Editor** on the right (this is where you can edit the code), and the **Terminal** at the bottom (this is where you can provide instructions for building a more advanced project). The far left toolbar will let you switch between options: **Explorer**, **Search**, **Source Control**, **Run and Debug**, **Extensions**, and **GitHub**.
128
101
129
-
---
102
+
## Edit GitHub Code
130
103
131
-
1.Navigate in the **Explorer** to `package.json`and double-click to edit the file in the **Editor**
132
-
2.Edit lines 2, 9, 11, 18, 23, 30 and 30 to your own username and repository name
133
-
3.Edit line 4, 20, and 21 with your own description, name, and email
104
+
1.In the Explorer left sidebar, find and double-click index.html
105
+
2.Note the color coding: the HTML tags and CSS are in colors and the text to edit is in black
106
+
3.Scroll down to lines 138-139 in the code and edit First and LastName, PhD candidate, and Digital Humanities to match your own info
134
107
135
-
---
108
+
## Push GitHub Changes
136
109
137
-
1. Navigate in the **Explorer** to `content/index.njk` and double-click to edit the file in the **Editor**
138
-
2. Edit line 16 between the opening and closing `<h1>` tags (primary header) to your preferred heading
139
-
3. Edit line 32 between the opening and closing `<h2>` tags (secondary header) to your preferred typewriter message
140
-
4. You can delete the SVG on lines 17-28 and paste in your own SVG code, or if you have an image file, you can replace it with `<img src="image.jpg" alt="text description of image" width="300px">`
110
+
1. In the far left menu, go to Source Control
111
+
2. Type the commit description “renamed homepage”
112
+
3. Select the blue Commit button
113
+
4. Select the blue Yes button in the pop up modal
114
+
5. Select the blue Sync Changes button
115
+
6. Select the blue OK button in the pop up modal
116
+
7. Exit out of GitHub Codespaces and return to your GitHub Dashboard
141
117
142
-
---
118
+
## View GitHub Site
143
119
144
-
5. Navigate in the **Explorer** to `content/about.md` and double-click to edit the file in the **Editor**
145
-
6. Edit lines 7 and 8 between the opening and closing `<p>` tags (paragraph) to your preferred text description
146
-
7. Edit lines 16, 17, and 18; 26, 27, and 28; and 36, 37, and 38 with your top 3 research interests and descriptions
147
-
8. You can delete line 6 if you do not want to include an image
120
+
Select the Actions button in top menu
121
+
This will show your pages build and deployment
122
+
Select the <>Code in the top menu bar
123
+
Select the ⚙️ gear icon next to About in the right sidebar
124
+
Check the Use your GitHub Pages website checkbox
125
+
Select the green Save changes button
126
+
Click on the blue link to open your site in a new tab in your browser
148
127
149
-
---
150
128
151
-
9. Navigate in the **Explorer** to `content/blog.njk` and double-click to edit the file in the **Editor**
152
-
10. Edit line 12 between the opening and closing `<h2>` tags (secondary header) to your preferred blog title
153
129
154
-
---
130
+
### Editing Code
131
+
>Some file extensions you will want to know are:
132
+
>- .html (Hypertext Markup Language (HTML) is the standard markup language for **documents** designed to be displayed in a **web** browser)
133
+
>- .css (Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and **styling** of a document written in a markup language such as HTML)
134
+
>- .js (JavaScript (JS) is the programming language for creating interactive, dynamic websites)
135
+
>- .md (Markdown is a lightweight markup language for creating formatted text using a **plain-text** editor)
136
+
>- .njk (Nunjucks is a templating language for JavaScript)
137
+
>- .svg (Scalable Vector Graphics (SVG) is an XML-based vector graphics format for defining two-dimensional graphics, having support for interactivity and animation)
138
+
>- .jpg (jpg or jpeg, short for Joint Photographic Experts Group, is a compressed image format used for photos)
139
+
>- .ico (short for icon, this file format is for square icons like the favicon in your browser tab, can be based on a transparent .png (Portable Network Graphics))
155
140
156
-
11. Navigate in the **Explorer** to `content/blog/firstpost.md` and double-click to edit the file in the **Editor**
157
-
12. On line 2 you can edit the title, line 3 edit the description, line 4 edit the date, and line 5 create any tags
158
-
13. On lines 7 and below, delete and replace with your own text
1. Navigate in the **Explorer** to the `content/blog/` folder and select so you are in that folder rather than the root directory.
164
-
2. At the top of the **Explorer** menu, select the "New File" button (document with a + sign) and rename to `fifthpost.md`
165
-
3. Navigate in the **Explorer** to `content/blog/firstpost.md` and copy and paste everything into your new `fifthpost.md` file
166
-
4. Edit the date so that it is later than your fourthpost.md so that it will be located properly in the blog order, and edit the title and description
145
+
1. Create your own CV as a .pdf and navigate to + Add File, Upload Files, to replace your own CV with the sample CV
167
146
168
147
169
148
### Editing Styles
170
149
171
-
1. Navigate in the **Explorer** to `css/index.css` and double-click to edit the file in the **Editor**
172
150
> To find and replace, type Command+F for find, and then click the drop down arrow to the left of "Find" to show the option for "Replace".
173
151
174
152
#### Colors
175
153
>Hexcode is a color system on a scale from 0-9,A-F that designates a color RRGGBB. You can calculate a color using this [HTML Color Picker](https://www.w3schools.com/colors/colors_picker.asp) or you can type in a [HTML color](https://www.w3schools.com/colors/colors_names.asp)
176
154
177
-
2. Edit line 7 to change the background color, 9 to change the text color, 10 to change the link color, 11 to change the link hover color, and 12 to change the visited link color
178
-
3. Edit line 87 to change the text color for h1-h3 headers, line 94 to change the text color for h4-h5 headers, and line 106 for paragraph text color
179
-
4. Edit lines 306 and 330 to change the color of the blinking cursor in the typewriter CSS animation
180
-
5. Edit line 365 for title class color
181
-
6. Edit line 400 for background color of cards on about page
182
-
183
-
#### Fonts
184
-
7. Edit line 38 to change the base font for the entire site
185
-
8. Edit line 88 to change the font for h1-h3 headers
186
-
9. Edit line 95 to change the font for h4-h5 headers
187
-
10. Edit line 104 to change the font for paragraph text
188
-
11. Edit line 116 to change the font for links
189
-
12. Edit line 119 to change the [font variant](https://www.w3schools.com/cssref/pr_font_font-variant.php) for links
190
-
13. Edit line 171 to change the font for preformatted code
155
+
#### Fonts
191
156
192
157
14. To add Google Fonts, go to [https://fonts.google.com/](https://fonts.google.com/), browse/search for fonts, select as many fonts as you want, click the blue 🟦 "Get font" button, click the blue 🟦 "<>Get embed code" button, and in the <link> option, copy the code from "Embed code in the <head> of your html"
193
-
15. Navigate in the **Explorer** to `_includes/layouts/base.njk`
194
-
16. Paste your <links> on lines 10-12
195
158
196
159
### Editing Assets
197
-
1. Rename the files on your local machine to CV.pdf for your CV and biophoto.jpg for your About photo
198
-
2. You can drag-and-drop files into the public folder in **Explorer**, or select the public folder and secondary click and choose the Upload... option
160
+
1. Rename the files on your local machine to CV.pdf for your CV and profile.jpg for your About photo
161
+
2. You can drag-and-drop files in **Explorer**, or in the main repository
199
162
200
-
## Push Changes to GitHub and Run Eleventy to Create Site
201
-
202
-
1. In the toolbar to the left of the **Explorer**, go to **Source Control** (branch icon with 3 circles).
203
-
2. Write a short description of the changes you plan to "commit" from this local Codespaces copy of your repository to the remote copy of the repository that is publicly available at github.com/username/repository/
204
-
3. Click the blue 🟦 "Commit" button and answer Yes to any pop-up boxes.
205
-
4. In the **Terminal**, use the node package manager command npx (Node Package eXecute) to run eleventy, which will convert your markdown and nunjucks files to html files, by copying and pasting the code below and then pressing enter/return.
206
-
```
207
-
npx @11ty/eleventy
208
-
```
209
-
5. You should see new lines of text being generated in the **Terminal**. You may need to troubleshoot any errors.
210
-
211
-
212
-
213
-
## Deploy to GitHub Pages
214
-
215
-
1. Exit Codespaces and return to the main branch of your repository at github.com/username/repository.
216
-
2. Click on the ".github/workflows/" folder link
217
-
3. Click on the "gh-pages.yml.sample" link
218
-
4. Select the pencil icon in the toolbar to edit this file
219
-
5. At the top in the breadcrumbs (a graphical element showcasing folder hierarchy), edit the title "gh-pages.yml.sample" to "gh-pages.yml" and select the green 🟩 "Commit changes..." button
220
-
6. Navigate to Actions and you will see that the gh-pages branch is being created
221
-
7. Once the gh-pages branch is finished, navigate to Settings>Pages
222
-
8. Change the branch from None to gh-pages and click the "Save" button
223
-
9. Navigate back to Actions and you can see your site being built
224
-
10. Once you have the green ✅ checkmark, navigate back to Settings>Pages and you should see a link in a message that says "Your site is live at https://username.github.io/repository/"
225
-
11. Now that the gh-pages.yml is running, every time you commit a new change to your GitHub repo, it will build and deploy your changes to your gh-pages branch and your github.io site.
226
-
227
-
228
-
### Implementation Notes
229
-
- The `public` folder in your input directory will be copied to the output folder (via `addPassthroughCopy` in the `eleventy.config.js` file). This means that anything in your public folder will live in your gh-pages branch after your build completes.
0 commit comments