Skip to content

Commit 6cddd4c

Browse files
Invinsible-CoderInvinsible-Coder
authored
Initial commit
0 parents  commit 6cddd4c

13 files changed

Lines changed: 735 additions & 0 deletions

File tree

‎.github/steps/1-step.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
## Step 1: Enable GitHub Pages
2+
3+
### 📖 Theory: What is GitHub Pages?
4+
5+
GitHub Pages lets you turn your repository into a website. This is a great way to share your project, resume, portfolio, documentation, or even a blog with the world.
6+
7+
When you enable GitHub Pages on a repository, GitHub takes the content that's on the main branch and publishes a website based on its contents.
8+
9+
> [!NOTE]
10+
> Learn more in the [GitHub Pages documentation](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages).
11+
12+
### ⌨️ Activity: Enable GitHub Pages
13+
14+
15+
16+
1. Open this repository in a new browser tab so you can work on the steps while you read the instructions in this tab.
17+
1. Under your repository name, click **Settings**.
18+
1. Click **Pages** in the **Code and automation** section.
19+
1. Ensure **Deploy from a branch** is selected from the **Source** drop-down menu, and then select `main` from the **Branch** drop-down menu.
20+
1. Click the **Save** button.
21+
22+
1. With GitHub Pages enabled Mona will be preparing the next step in this exercise!
23+
24+
25+
<details>
26+
<summary>Having trouble? 🤷</summary><br/>
27+
28+
- Turning on GitHub Pages creates a deployment of your repository. GitHub Actions may take up to a minute to respond while waiting for the deployment. Future steps will be about 20 seconds; this step is slower.
29+
30+
</details>

‎.github/steps/2-step.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
## Step 2: Customize your homepage
2+
3+
Good job! You turned on GitHub Pages! :tada:
4+
5+
You can see the link to your website at the top of the [Pages](https://github.com/{{full_repo_name}}/settings/pages) section of your repository settings _(you may need to refresh it)_
6+
7+
> [!TIP]
8+
> Keep your GitHub Pages [website](https://{{login}}.github.io/{{repo_name}}/) open in a separate browser tab and keep it handy!
9+
>
10+
> As you progress through this exercise, you'll see your changes reflected on your live site.
11+
12+
### 📖 Theory: Customizing your homepage
13+
14+
You can customize your homepage by adding content to `index.md` file. As you commit it to the `main` branch your website will be updated to display your personalized content!
15+
16+
### ⌨️ Activity: Create your homepage
17+
18+
1. Browse to the `index.md` file in the `main` branch.
19+
1. In the upper right corner, open the file editor.
20+
1. Type the content you want on your homepage. You can use Markdown formatting on this page.
21+
1. (optional) You can also modify `title:` or leave it as it is.
22+
1. Commit your changes to the `main` branch.
23+
1. As you commit your changes Mona will prepare the next step in this exercise!
24+
25+
26+
<details>
27+
<summary>Having trouble? 🤷</summary><br/>
28+
29+
- Make sure you are editing the `index.md` file in the `main` branch.
30+
31+
</details>

‎.github/steps/3-step.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
## Step 3: Configure your site
2+
3+
Nice work updating your home page :sparkles:
4+
5+
It's time we give it a little bit of **configuration** so it looks nice!
6+
7+
### 📖 Theory: Jekyll and \_config.yml
8+
9+
Jekyll uses a file titled `_config.yml` to store settings for your site, your theme, and reusable content like your site title and GitHub handle. Learn more in the [Jekyll configuration documentation](https://jekyllrb.com/docs/configuration/).
10+
11+
For this activity, we will use a blog-ready theme named "minima".
12+
13+
### ⌨️ Activity: Configure your site
14+
15+
1. Browse to the `_config.yml` file in the `main` branch.
16+
1. In the upper right corner, open the file editor.
17+
1. Add a `theme:` set to **minima** so it shows in the `_config.yml` file as below:
18+
19+
```yml
20+
theme: minima
21+
```
22+
23+
1. (optional) You can modify the other configuration variables such as `title:`, `author:`, and `description:` to further customize your site.
24+
25+
<details>
26+
<summary>Example </summary><br/>
27+
28+
```yml
29+
theme: minima
30+
title: {{ login }}'s personal blog
31+
description: This is where I share cool stuff about my life
32+
author: {{ login }}
33+
```
34+
35+
</details>
36+
37+
1. Commit your changes to the `main` branch.
38+
1. As you commit your changes Mona will prepare the next step in this exercise!
39+
40+
41+
<details>
42+
<summary>Having trouble? 🤷</summary><br/>
43+
44+
- Make sure you are editing the `_config.yml` file in the `main` branch`.
45+
- Double-check your YAML formatting. Indentation and colons matter!
46+
47+
</details>

‎.github/steps/4-step.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
## Step 4: Create a blog post
2+
3+
Your home page is looking great! :cowboy_hat_face:
4+
5+
### 📖 Theory: Jekyll blog posts and frontmatter
6+
7+
8+
9+
Jekyll uses specially named files and frontmatter to create blog posts. The files must be named `_posts/YYYY-MM-DD-title.md` and must include `title` and `date` in the **front matter**.
10+
11+
**Front matter** is a yaml section at the **top** of your file that looks like this:
12+
13+
```yaml
14+
---
15+
title: "Welcome to my blog"
16+
date: 2025-05-15
17+
---
18+
```
19+
20+
> [!NOTE]
21+
> Learn more in the [Jekyll frontmatter documentation](https://jekyllrb.com/docs/front-matter/).
22+
23+
24+
### ⌨️ Activity: Create a blog post
25+
26+
1. Browse to the `main` branch.
27+
1. Click the `Add file` dropdown menu and then on `Create new file`.
28+
1. Name the file following the `_posts/YYYY-MM-DD-title.md` format.
29+
1. Replace the `YYYY-MM-DD` with today's date, and change the `title` of your first blog post if you'd like.
30+
> If you do edit the title, make sure there are hyphens (-) between your words.
31+
> If your blog post date doesn't follow the correct date convention, you'll receive an error and your site won't build. For more information, see "[Page build failed: Invalid post date](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/troubleshooting-jekyll-build-errors-for-github-pages-sites)".
32+
1. Type the following content at the top of your blog post:
33+
34+
```yaml
35+
---
36+
title: "YOUR-TITLE"
37+
date: YYYY-MM-DD
38+
---
39+
```
40+
41+
1. Replace `YOUR-TITLE` with the title for your blog post.
42+
1. Replace `YYYY-MM-DD` with today's date.
43+
1. Type a quick draft of your blog post. Remember, you can always edit it later.
44+
1. Commit your changes to the `main` branch.
45+
1. As you commit your changes Mona will prepare the next step in this exercise!
46+
47+
<details>
48+
<summary>Having trouble? 🤷</summary><br/>
49+
50+
- Double-check your file name and date format.
51+
- Make sure your frontmatter is at the very top of the file and formatted correctly.
52+
53+
</details>

‎.github/steps/x-review.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
## Review
2+
3+
_Congratulations, you've completed this exercise and learned a lot about GitHub Pages and Jekyll!_
4+
5+
<img src="https://octodex.github.com/images/constructocat2.jpg" alt="celebrate" width=300 align=right>
6+
7+
Here's a recap of your accomplishments:
8+
9+
- You enabled GitHub Pages.
10+
- You selected a theme using the config file.
11+
- You learned about proper directory format and file naming conventions in Jekyll.
12+
- You created your first blog post with Jekyll and GitHub Pages!
13+
14+
### What's next?
15+
16+
- Keep working on your GitHub Pages site... we love seeing what you come up with!
17+
- [Take another GitHub Skills exercise](https://learn.github.com/skills).
18+
- [Read the GitHub Pages docs](https://docs.github.com/en/pages).

‎.github/workflows/0-start-exercise.yml‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
name: Step 0 # Start Exercise
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
permissions:
9+
contents: write
10+
actions: write
11+
issues: write
12+
13+
env:
14+
STEP_1_FILE: ".github/steps/1-step.md"
15+
16+
jobs:
17+
start_exercise:
18+
if: |
19+
!github.event.repository.is_template
20+
name: Start Exercise
21+
uses: skills/exercise-toolkit/.github/workflows/start-exercise.yml@v0.6.0
22+
with:
23+
exercise-title: "GitHub Pages"
24+
intro-message: "Create a site or blog from your GitHub repositories with GitHub Pages."
25+
26+
create_initial_files:
27+
name: Create initial files
28+
runs-on: ubuntu-latest
29+
needs: [start_exercise]
30+
31+
steps:
32+
- name: Checkout
33+
uses: actions/checkout@v4
34+
with:
35+
ref: main
36+
37+
- name: Create empty _config.yml file
38+
run: |
39+
touch _config.yml
40+
41+
- name: Create index.md file
42+
run: |
43+
cat > index.md << EOF
44+
---
45+
title: Welcome to my blog!
46+
---
47+
EOF
48+
- name: Commit files
49+
uses: EndBug/add-and-commit@v9
50+
with:
51+
add: |
52+
- _config.yml
53+
- index.md
54+
message: 'Create config and homepages files'
55+
default_author: github_actions
56+
57+
post_next_step_content:
58+
name: Post next step content
59+
runs-on: ubuntu-latest
60+
needs: [start_exercise]
61+
env:
62+
ISSUE_URL: ${{ needs.start_exercise.outputs.issue-url }}
63+
64+
steps:
65+
- name: Checkout
66+
uses: actions/checkout@v4
67+
68+
- name: Get response templates
69+
uses: actions/checkout@v4
70+
with:
71+
repository: skills/exercise-toolkit
72+
path: exercise-toolkit
73+
ref: v0.6.0
74+
75+
- name: Build comment - add step content
76+
id: build-comment
77+
uses: skills/action-text-variables@v2
78+
with:
79+
template-file: ${{ env.STEP_1_FILE }}
80+
template-vars: |
81+
login: ${{ github.actor }}
82+
full_repo_name: ${{ github.repository }}
83+
84+
- name: Create comment - add step content
85+
run: |
86+
gh issue comment "$ISSUE_URL" \
87+
--body "$ISSUE_BODY"
88+
env:
89+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
90+
ISSUE_BODY: ${{ steps.build-comment.outputs.updated-text }}
91+
92+
- name: Create comment - watching for progress
93+
run: |
94+
gh issue comment "$ISSUE_URL" \
95+
--body-file "exercise-toolkit/markdown-templates/step-feedback/watching-for-progress.md"
96+
env:
97+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
98+
99+
- name: Enable next step workflow
100+
run: |
101+
gh workflow enable "Step 1"
102+
env:
103+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.github/workflows/1-step.yml‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
name: Step 1
2+
3+
on:
4+
workflow_dispatch:
5+
page_build:
6+
7+
permissions:
8+
contents: read
9+
actions: write
10+
issues: write
11+
12+
env:
13+
STEP_2_FILE: ".github/steps/2-step.md"
14+
15+
jobs:
16+
find_exercise:
17+
name: Find Exercise Issue
18+
uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.6.0
19+
20+
post_next_step_content:
21+
name: Post next step content
22+
needs: [find_exercise]
23+
runs-on: ubuntu-latest
24+
env:
25+
ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }}
26+
27+
steps:
28+
- name: Checkout
29+
uses: actions/checkout@v4
30+
31+
- name: Get response templates
32+
uses: actions/checkout@v4
33+
with:
34+
repository: skills/exercise-toolkit
35+
path: exercise-toolkit
36+
ref: v0.6.0
37+
38+
- name: Build message - step finished
39+
id: build-message-step-finish
40+
uses: skills/action-text-variables@v2
41+
with:
42+
template-file: exercise-toolkit/markdown-templates/step-feedback/step-finished-prepare-next-step.md
43+
template-vars: |
44+
next_step_number: 2
45+
46+
- name: Create comment - step finished
47+
run: |
48+
gh issue comment "$ISSUE_URL" \
49+
--body "$ISSUE_BODY"
50+
env:
51+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
52+
ISSUE_BODY: ${{ steps.build-message-step-finish.outputs.updated-text }}
53+
54+
- name: Build comment - add step content
55+
id: build-comment
56+
uses: skills/action-text-variables@v2
57+
with:
58+
template-file: ${{ env.STEP_2_FILE }}
59+
template-vars: |
60+
login: ${{ github.actor }}
61+
full_repo_name: ${{ github.repository }}
62+
repo_name: ${{ github.event.repository.name }}
63+
64+
- name: Create comment - add step content
65+
run: |
66+
gh issue comment "$ISSUE_URL" \
67+
--body "$ISSUE_BODY"
68+
env:
69+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
70+
ISSUE_BODY: ${{ steps.build-comment.outputs.updated-text }}
71+
72+
- name: Create comment - watching for progress
73+
run: |
74+
gh issue comment "$ISSUE_URL" \
75+
--body-file exercise-toolkit/markdown-templates/step-feedback/watching-for-progress.md
76+
env:
77+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
78+
79+
- name: Disable current workflow and enable next one
80+
run: |
81+
gh workflow disable "${{github.workflow}}"
82+
gh workflow enable "Step 2"
83+
env:
84+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

0 commit comments

Comments
 (0)