Creating a pretty Github page

This guide is tailored for Windows 10 .

Choosing a theme

The first step starts with selecting a theme from the following sites:

• http://jekyllthemes.org/
• https://jekyllthemes.io/free
• http://themes.jekyllrc.org/
• https://github.com/topics/jekyll-theme

Choose any theme that aligns with your purpose, whether it’s for a name card, blog, or CV. I have chosen jekyll-theme-chirpy, an appealing option for blogging.

Creating a static website on your local computer

Let me proceed with jekyll-theme-chirpy. Download the repository using “Download Zip” and extract it into the directory where you previously created “hello world!”. Next, execute the following commands:

bundle install
bundle update
bundle install

To generate a static website, run:

bundle exec jekyll serve

This command executes the code implemented by the author in the directory. You’ll notice the creation of directories such as ‘_site’. Now, type http://localhost:4000/ into the address bar. Voila! Your website is now generated locally.

Customizing the generated website

Apparently, the website you have now is barebone; it is not yours. The first step is to modify:

• _config.yml

Simply input your information, and Jekyll will generate the website accordingly. Here’s an example of what I’ve done:

# Change to your timezone › https://kevinnovak.github.io/Time-Zone-Picker
timezone: America/New_York

# jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
# ↓ --------------------------

title: Grand master Chulminator # the main title

tagline: CodeCraft Chronicles # it will display as the sub-title

description: >- # used by seo meta and the atom feed
  Posting programming skills and mechanics

# Fill in the protocol & hostname for your site.
# e.g. 'https://username.github.io', note that it does not end with a '/'.
url: "https://Chulminator.github.io"

github:
  username: Chulminator # change to your github username

Additionally, make changes in these files:

• ./assets/css/jekyll-theme-chirpy.scss
• ./_include/*.html
• ./_sass/typography-light.scss

These are the things I adjusted for my own customization. For instance, the default setting for the left side bar was in order of photo, title, and some buttons. I rearranged the elements by changing ‘./_include/sidebar.html’ from:

<a href="/" id="avatar" class="rounded-circle"><img src="/assets/img/ProfilePhoto.png" width="112" height="112" alt="avatar" onerror="this.style.display='none'"></a>

<h1 class="site-title">
  <a href="/">Grand master Chulminator</a>
</h1>
<p class="site-subtitle fst-italic mb-0">CodeCraft Chronicles</p>

to:

<h1 class="site-title">
  <a href="/">Grand master Chulminator</a>
</h1>
<p class="site-subtitle fst-italic mb-0">CodeCraft Chronicles</p>

<a href="/" id="avatar" class="rounded-circle"><img src="/assets/img/ProfilePhoto.png" width="112" height="112" alt="avatar" onerror="this.style.display='none'"></a>

Finally, you need to rename a file from .github/workflows/pages-deploy.yml.hook to .github/workflows/pages-deploy.yml. Before pushing your webpage to the GitHub repository, you should modify the first part of .github/workflows/pages-deploy.yml as follows:

name: 'Automatic build'
 on:
 push:
     branches:
     - main          # from master to main
     paths-ignore:
     - .gitignore
     - README.md
     - LICENSE

Additionally, in the settings tab of your GitHub repository, navigate to the “Pages” section on the left side. Under the “Build and deployment” options, change “Deploy from a branch” to “GitHub Actions”. After making this modification, push your changes to git, and your website will be visible to the public within 10-15 minutes.

Conclusion

I hope you can successfully create your customized website. If you have any questions, feel free to contact me.

reference

https://wlqmffl0102.github.io/categories/github-blog/ https://github.com/cotes2020/jekyll-theme-chirpy/wiki