This section is following the example website repo that is created in Chapter 4 to show some basics on how to build a website. However, the tips shown in this section can be used for any website you build using GitHub Pages.
1. Modifying the title and tagline
To modify the title and tagline of your website, open the _config.yml file in Atom. Add two lines above the only line that is in the file, indicating the theme. Your code should look like this:
title: <Your Name>
description: <Your Description>
theme: jekyll-theme-cayman
2. Adding sections to your website
Adding sections to your website is made easy with Jekyll and GitHub Pages because you can use Markdown and HTML. First, include some social media usernames. Open your _config.yml file and add as many social media usernames as you want. In this example, we add a Twitter and GitHub username:
title: Your Name
description: Your Description
twitter_username: Your Twitter username
github_username: Your GitHub username
theme: jekyll-theme-cayman
Then, open the index.md file and change the code to include
sections. For example, our code looks like this:# My Projects
Here are a list of projects that I am have been working on:
# My Interests
I’m interested in teaching novice coders about computer science!
# My Blog
I’m really excited to blog my journey on GitHub.com.
# Get in Touch
<ul>
<li><a href=”https://twitter.com/{{ site.twitter_username }}”>
Twitter</a></li>
<li><a href=”https://github.com/{{ site.github_username }}”>
GitHub</a></li>
</ul>
Save, stage, commit, and push your changes to your branch and then create and merge the pull request into the master branch. After a couple of minutes, refresh the website page to see your changes.
3. Creating a blog
Having a blog on your site is a great way for you to share your GitHub journey with others. As you start to discover and create, you can share what you learn and build with a community of people with similar interests. This section guides you through creating the blog posts and linking them from your index.md file.
First, create a new folder called _layouts and create a file within that folder called post.html. The _layout/post.html file should contain the following code to create a blog-style:
layout: default
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }} – {{ page.author }}</p>
{{ content }}
Make sure that you correctly name the folder _layouts. Jekyll searches for the _layouts folder for any custom layouts. Otherwise, it uses the defaults for that theme. You can change the name of the specific layout — for example, post.md — but it should match the layout metadata, as shown in the following code snippet.
Using layouts and specific naming, Jekyll can extrapolate the title, date, and author to display that both on the blog post page and on the home page.
Then, create a new folder called _posts and a file inside with the date and a title. Typically, blog posts are made with YEAR-MONTH-DAY-TITLE.md. For example, this code is in a file called _posts/2019-01-01-new-year.md:
—
layout: post
author: sguthals
—
Write your blog post here.
Finally, in your index.md file, add the following code below the My Blog section:
<ul>
{% for post in site.posts %}
<li>
<a href=”{{ post.url }}”>{{ post.title }}</a>
</li>
{% endfor %}
</ul>
Save, stage, commit, and push your changes to your branch and then create and merge the pull request into the master branch. After a couple of minutes, refresh the website page to see your changes.
4. Linking project repos
You can link GitHub project repos to your website in the same way you link social media, described in the section “Adding sections to your website,” earlier in this chapter. Putting a link directly to a repo can be efficient. However, you can also create web pages for project repos as well, as described in Chapter 4.
Open the index.md file and add the following code, replacing the URLs with links to projects you’re the author of. This code shows linking to a project repo web page and directly to a project repo:
<ul>
<li><a href=”https://sarah-wecan.github.io/HelloWorld/”>Hello World Project</a></li>
<li><a href=”https://github.com/thewecanzone/
GitHubForDummiesReaders”>GitHub For Dummies Repo</a></li>
</ul>
Out of scope for this book are a vast number of ways you can customize your GitHub Pages website. Jekyll and GitHub come together to offer a unique experience that requires some coding, but handles a lot of the setup. To find out how to do something specific, start by visiting GitHub Help at https://help.github. com/categories/customizing-github-pages.
Source: Guthals Sarah, Haack Phil (2019), GitHub for Dummies, Wiley.