Exercise: GitHub Pages

[github-actions]

GitHub Pages

👋 Hey there @how512! Welcome to your Skills exercise!

Create a site or blog from your GitHub repositories with GitHub Pages.

As you complete each step, I will respond in the comments to:

• check your work and give feedback
• share next steps
• occasionally share tips
• congratulate you when you finish!

Good luck and have fun!
- Mona

[github-actions]

Step 1: Enable GitHub Pages

📖 Theory: What is GitHub Pages?

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.

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.

Note

Learn more in the GitHub Pages documentation.

⌨️ Activity: Enable GitHub Pages

1. Open this repository in a new browser tab so you can work on the steps while you read the instructions in this tab.

2. Under your repository name, click Settings.

3. Click Pages in the Code and automation section.

4. Ensure Deploy from a branch is selected from the Source drop-down menu, and then select main from the Branch drop-down menu.

5. Click the Save button.

6. With GitHub Pages enabled Mona will be preparing the next step in this exercise!

Having trouble? 🤷

• 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.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐

[github-actions]

Step 2: Customize your homepage

Good job! You turned on GitHub Pages! 🎉

You can see the link to your website at the top of the Pages section of your repository settings (you may need to refresh it)

Tip

Keep your GitHub Pages website open in a separate browser tab and keep it handy!

As you progress through this exercise, you'll see your changes reflected on your live site.

📖 Theory: Customizing your homepage

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!

⌨️ Activity: Create your homepage

1. Browse to the index.md file in the main branch.
2. In the upper right corner, open the file editor.
3. Type the content you want on your homepage. You can use Markdown formatting on this page.
4. (optional) You can also modify title: or leave it as it is.
5. Commit your changes to the main branch.
6. As you commit your changes Mona will prepare the next step in this exercise!

Having trouble? 🤷

• Make sure you are editing the index.md file in the main branch.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐

[github-actions]

Step 3: Configure your site

Nice work updating your home page ✨

It's time we give it a little bit of configuration so it looks nice!

📖 Theory: Jekyll and _config.yml

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.

For this activity, we will use a blog-ready theme named "minima".

⌨️ Activity: Configure your site

1. Browse to the _config.yml file in the main branch.

2. In the upper right corner, open the file editor.

3. Add a theme: set to minima so it shows in the _config.yml file as below:

   theme: minima

4. (optional) You can modify the other configuration variables such as title:, author:, and description: to further customize your site.

   Example

   
   

   theme: minima
   title: how512's personal blog
   description: This is where I share cool stuff about my life
   author: how512

5. Commit your changes to the main branch.

6. As you commit your changes Mona will prepare the next step in this exercise!

Having trouble? 🤷

• Make sure you are editing the _config.yml file in the main branch`.
• Double-check your YAML formatting. Indentation and colons matter!

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐