Skip to content

Commit d5c8026

Browse files
azmaeenmahatab28azmaeenmahatab28
committed
google-homepage
1 parent 8fac985 commit d5c8026

18 files changed

+711
-0
lines changed

‎.github/dependabot.yml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
version: 2
2+
updates:
3+
- package-ecosystem: "github-actions"
4+
directory: "/"
5+
schedule:
6+
interval: "monthly"

‎.github/steps/-step.txt

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
0

‎.github/steps/0-welcome.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- readme -->

‎.github/steps/1-enable-github-pages.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!--
2+
<<< Author notes: Step 1 >>>
3+
Choose 3-5 steps for your course.
4+
The first step is always the hardest, so pick something easy!
5+
Link to docs.github.com for further explanations.
6+
Encourage users to open new tabs for steps!
7+
-->
8+
9+
## Step 1: Enable GitHub Pages
10+
11+
_Welcome to GitHub Pages and Jekyll :tada:!_
12+
13+
The first step is to enable GitHub Pages on this [repository](https://docs.github.com/en/get-started/quickstart/github-glossary#repository). 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.
14+
15+
### :keyboard: Activity: Enable GitHub Pages
16+
17+
1. Open a new browser tab, and work on the steps in your second tab while you read the instructions in this tab.
18+
1. Under your repository name, click **Settings**.
19+
1. Click **Pages** in the **Code and automation** section.
20+
1. Ensure "Deploy from a branch" is selected from the **Source** drop-down menu, and then select `main` from the **Branch** drop-down menu.
21+
1. Click the **Save** button.
22+
1. Wait about _one minute_ then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.
23+
> 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.
24+
> **Note**: In the **Pages** of **Settings**, the **Visit site** button will appear at the top. Click the button to see your GitHub Pages site.

‎.github/steps/2-configure-your-site.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!--
2+
<<< Author notes: Step 2 >>>
3+
Start this step by acknowledging the previous step.
4+
Define terms and link to docs.github.com.
5+
Historic note: previous version checked for empty pull request, changed to the correct theme `minima`.
6+
-->
7+
8+
## Step 2: Configure your site
9+
10+
_You turned on GitHub Pages! :tada:_
11+
12+
We'll work in a branch, `my-pages`, that I created for you to get this site looking great. :sparkle:
13+
14+
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. You can check out the `_config.yml` file on the **Code** tab of your repository.
15+
16+
We need to use a blog-ready theme. For this activity, we will use a theme named "minima".
17+
18+
### :keyboard: Activity: Configure your site
19+
20+
1. Browse to the `_config.yml` file in the `my-pages` branch.
21+
1. In the upper right corner, open the file editor.
22+
1. Add a `theme:` set to **minima** so it shows in the `_config.yml` file as below:
23+
```yml
24+
theme: minima
25+
```
26+
1. (optional) You can modify the other configuration variables such as `title:`, `author:`, and `description:` to further customize your site.
27+
1. Commit your changes.
28+
1. (optional) Create a pull request to view all the changes you'll make throughout this course. Click the **Pull Requests** tab, click **New pull request**, set `base: main` and `compare:my-pages`.
29+
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.

‎.github/steps/3-customize-your-homepage.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!--
2+
<<< Author notes: Step 3 >>>
3+
Start this step by acknowledging the previous step.
4+
Define terms and link to docs.github.com.
5+
Historic note: previous version checked the homepage content was not empty.
6+
-->
7+
8+
## Step 3: Customize your homepage
9+
10+
_Nice work setting the theme! :sparkles:_
11+
12+
You can customize your homepage by adding content to either an `index.md` file or the `README.md` file. GitHub Pages first looks for an `index.md` file. Your repository has an `index.md` file so we can update it to include your personalized content.
13+
14+
### :keyboard: Activity: Create your homepage
15+
16+
1. Browse to the `index.md` file in the `my-pages` branch.
17+
1. In the upper right corner, open the file editor.
18+
1. Type the content you want on your homepage. You can use Markdown formatting on this page.
19+
1. (optional) You can also modify `title:` or just ignore it for now. We'll discuss it in the next step.
20+
1. Commit your changes to the `my-pages` branch.
21+
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.

‎.github/steps/4-create-a-blog-post.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!--
2+
<<< Author notes: Step 4 >>>
3+
Start this step by acknowledging the previous step.
4+
Define terms and link to docs.github.com.
5+
Historic note: previous version checked the file path. Previous version checked the front matter formatting.
6+
-->
7+
8+
## Step 4: Create a blog post
9+
10+
_Your home page is looking great! :cowboy_hat_face:_
11+
12+
GitHub Pages uses Jekyll. In Jekyll, we can create a blog by using specially named files and frontmatter. The files must be named `_posts/YYYY-MM-DD-title.md`. You must also include `title` and `date` in your frontmatter.
13+
14+
**What is _frontmatter_?**: The syntax Jekyll files use is called YAML frontmatter. It goes at the top of your file and looks something like this:
15+
16+
```yml
17+
---
18+
title: "Welcome to my blog"
19+
date: 2019-01-20
20+
---
21+
```
22+
23+
For more information about configuring front matter, see the [Jekyll frontmatter documentation](https://jekyllrb.com/docs/frontmatter/).
24+
25+
### :keyboard: Activity: Create a blog post
26+
27+
1. Browse to the `my-pages` branch.
28+
1. Click the `Add file` dropdown menu and then on `Create new file`.
29+
1. Name the file `_posts/YYYY-MM-DD-title.md`.
30+
1. Replace the `YYYY-MM-DD` with today's date, and change the `title` of your first blog post if you'd like.
31+
> If you do edit the title, make sure there are hyphens between your words.
32+
> 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)".
33+
1. Type the following content at the top of your blog post:
34+
```yaml
35+
---
36+
title: "YOUR-TITLE"
37+
date: YYYY-MM-DD
38+
---
39+
```
40+
1. Replace `YOUR-TITLE` with the title for your blog post.
41+
1. Replace `YYYY-MM-DD` with today's date.
42+
1. Type a quick draft of your blog post. Remember, you can always edit it later.
43+
1. Commit your changes to your branch.
44+
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.

‎.github/steps/5-merge-your-pull-request.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!--
2+
<<< Author notes: Step 5 >>>
3+
Start this step by acknowledging the previous step.
4+
Define terms and link to docs.github.com.
5+
-->
6+
7+
## Step 5: Merge your pull request
8+
9+
_Nice work, friend :heart:! People will be reading your blog in no time!_
10+
11+
You can now [merge](https://docs.github.com/en/get-started/quickstart/github-glossary#merge) your pull request!
12+
13+
### :keyboard: Activity: Merge your changes
14+
15+
1. Merge your changes from `my-pages` into `main`. If you created the pull request in step 2, just open that PR and click on **Merge pull request**. If you did not create the pull request earlier, you can do it now by following the instructions in [step 2](/.github/steps/2-configure-your-site.md).
16+
1. (optional) Delete the branch `my-pages`.
17+
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.

‎.github/steps/X-finish.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!--
2+
<<< Author notes: Finish >>>
3+
Review what we learned, ask for feedback, provide next steps.
4+
-->
5+
6+
## Finish
7+
8+
_Congratulations friend, you've completed this course!_
9+
10+
<img src=https://octodex.github.com/images/constructocat2.jpg alt=celebrate width=300 align=right>
11+
12+
Your blog is now live and has been deployed!
13+
14+
Here's a recap of all the tasks you've accomplished in your repository:
15+
16+
- You enabled GitHub Pages.
17+
- You selected a theme using the config file.
18+
- You learned about proper directory format and file naming conventions in Jekyll.
19+
- You created your first blog post with Jekyll!
20+
21+
### What's next?
22+
23+
- Keep working on your GitHub Pages site... we love seeing what you come up with!
24+
- We'd love to hear what you thought of this course [in our discussion board](https://github.com/orgs/skills/discussions/categories/github-pages).
25+
- [Take another GitHub Skills course](https://github.com/skills).
26+
- [Read the GitHub Getting Started docs](https://docs.github.com/en/get-started).
27+
- To find projects to contribute to, check out [GitHub Explore](https://github.com/explore).

‎.github/workflows/0-welcome.yml

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
name: Step 0, Welcome
2+
3+
# This step triggers after the learner creates a new repository from the template.
4+
# This workflow updates from step 0 to step 1.
5+
6+
# This will run every time we create push a commit to `main`.
7+
# Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
8+
on:
9+
workflow_dispatch:
10+
push:
11+
branches:
12+
- main
13+
14+
# Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication
15+
permissions:
16+
# Need `contents: read` to checkout the repository.
17+
# Need `contents: write` to update the step metadata.
18+
# Need `pull-requests: write` to create a pull request.
19+
contents: write
20+
pull-requests: write
21+
22+
jobs:
23+
# Get the current step to only run the main job when the learner is on the same step.
24+
get_current_step:
25+
name: Check current step number
26+
runs-on: ubuntu-latest
27+
steps:
28+
- name: Checkout
29+
uses: actions/checkout@v4
30+
- id: get_step
31+
run: |
32+
echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT
33+
outputs:
34+
current_step: ${{ steps.get_step.outputs.current_step }}
35+
36+
on_start:
37+
name: On start
38+
needs: get_current_step
39+
40+
# We will only run this action when:
41+
# 1. This repository isn't the template repository.
42+
# 2. The step is currently 0.
43+
# Reference: https://docs.github.com/en/actions/learn-github-actions/contexts
44+
# Reference: https://docs.github.com/en/actions/learn-github-actions/expressions
45+
if: >-
46+
${{ !github.event.repository.is_template
47+
&& needs.get_current_step.outputs.current_step == 0 }}
48+
49+
# We'll run Ubuntu for performance instead of Mac or Windows.
50+
runs-on: ubuntu-latest
51+
52+
steps:
53+
# We'll need to check out the repository so that we can edit the README.
54+
- name: Checkout
55+
uses: actions/checkout@v4
56+
with:
57+
fetch-depth: 0 # Let's get all the branches.
58+
59+
- name: Create my-pages branch, initial Pages files, and pull request
60+
run: |
61+
echo "Make sure we are on step 0"
62+
if [ "$(cat .github/steps/-step.txt)" != 0 ]
63+
then
64+
echo "Current step is not 0"
65+
exit 0
66+
fi
67+
68+
echo "Make a branch"
69+
BRANCH=my-pages
70+
git checkout -b $BRANCH
71+
72+
echo "Create config and homepage files"
73+
touch _config.yml
74+
printf "%s\n%s\n%s\n\n" "---" "title: Welcome to my blog" "---" > index.md
75+
76+
echo "Make a commit"
77+
git config user.name github-actions[bot]
78+
git config user.email github-actions[bot]@users.noreply.github.com
79+
git add _config.yml index.md
80+
git commit --message="Create config and homepages files"
81+
82+
echo "Push"
83+
git push --set-upstream origin $BRANCH
84+
env:
85+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
86+
87+
# In README.md, switch step 0 for step 1.
88+
- name: Update to step 1
89+
uses: skills/action-update-step@v2
90+
with:
91+
token: ${{ secrets.GITHUB_TOKEN }}
92+
from_step: 0
93+
to_step: 1
94+
branch_name: my-pages

‎.github/workflows/1-enable-github-pages.yml

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
name: Step 1, Enable GitHub Pages
2+
3+
# This step triggers after we run a pages build.
4+
# This workflow updates from step 1 to step 2.
5+
6+
# This will run every time we run a pages build.
7+
# Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
8+
on:
9+
workflow_dispatch:
10+
page_build:
11+
12+
# Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication
13+
permissions:
14+
# Need `contents: read` to checkout the repository.
15+
# Need `contents: write` to update the step metadata.
16+
contents: write
17+
18+
jobs:
19+
# Get the current step to only run the main job when the learner is on the same step.
20+
get_current_step:
21+
name: Check current step number
22+
runs-on: ubuntu-latest
23+
steps:
24+
- name: Checkout
25+
uses: actions/checkout@v4
26+
- id: get_step
27+
run: |
28+
echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT
29+
outputs:
30+
current_step: ${{ steps.get_step.outputs.current_step }}
31+
32+
on_enable_github_pages:
33+
name: On enable github pages
34+
needs: get_current_step
35+
36+
# We will only run this action when:
37+
# 1. This repository isn't the template repository.
38+
# 2. The step is currently 1.
39+
# Reference: https://docs.github.com/en/actions/learn-github-actions/contexts
40+
# Reference: https://docs.github.com/en/actions/learn-github-actions/expressions
41+
if: >-
42+
${{ !github.event.repository.is_template
43+
&& needs.get_current_step.outputs.current_step == 1 }}
44+
45+
# We'll run Ubuntu for performance instead of Mac or Windows.
46+
runs-on: ubuntu-latest
47+
48+
steps:
49+
# We'll need to check out the repository so that we can edit the README.
50+
- name: Checkout
51+
uses: actions/checkout@v4
52+
with:
53+
fetch-depth: 0 # Let's get all the branches.
54+
ref: my-pages
55+
56+
# In README.md, switch step 1 for step 2.
57+
- name: Update to step 2
58+
uses: skills/action-update-step@v2
59+
with:
60+
token: ${{ secrets.GITHUB_TOKEN }}
61+
from_step: 1
62+
to_step: 2
63+
branch_name: my-pages

0 commit comments

Comments
 (0)