DEV Community

Discussion on: How to use the new github.dev personal website generator

View post
Collapse
 
itsasine profile image
ItsASine (Kayla) •

Some other fun edits I made to mine:

  • Jekyll plugins! I added comments to blog posts and an RSS feed to the blog so it can be pulled into dev.to (now to actually start a blog...)
  • Making stars and forks actually links. When I forked, at least, the icons were links for styling but went nowhere. 
        {% if repository.stargazers_count %}
        <a href="{{ repository.html_url }}/stargazers" class="d-inline-block link-gray mr-4">
            <i class="far fa-star"></i> {{ repository.stargazers_count }}
        </a>
        {% endif %}
        {% if repository.forks_count %}
        <a href="{{ repository.html_url }}/network/members" class="d-inline-block link-gray mr-4">
            <i class="fas fa-code-branch"></i> {{ repository.forks_count }}
        </a>
        {% endif %}
  • Switching icons to fontawesome over octoicons. That way I can easily add links to other profiles on the sidebar (like DEV!). It is bloaty, but I want all those pretty icons.
  • Limit shown projects based on... a lot of filters, to be honest. I only wanted to show active and non-forked repos. I put a dying rose emoji in the description of dead repos already, so that was an easy filter. I'm iffy on filtering out code puzzles, too, but it seemed like a good idea since that's not really "original" work. 
  {% assign public_repositories = site.github.public_repositories | where:'fork', false | sort: 'stargazers_count' | reverse %}
  {% for repository in public_repositories limit: 12 %}
    {% unless repository.description contains "🥀" %}
    {% unless repository.description contains "🎲" %}
    <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
      {% include repo-card.html %}
    </div>
  {% endunless %}
  {% endunless %}
  {% endfor %}

My codebase is here if anyone wants to poke around my stuff:

GitHub logo ItsASine / itsasine.github.io

Canonical source of technical blog posts

Get started building your personal website

Showcase your software development skills

This repository gives you the code you'll need to kickstart a personal website that showcases your work as a software developer. And when you manage the code in a GitHub repository, it will automatically render a webpage with the owner's profile information, including a photo, bio, and repositories.

Your personal website is waiting to be personalized, though. It includes space to highlight your specific areas of interest in software development, like languages or industries. And it's standing by to publish your next great blog post.

It's all possible using the combination of Jekyll (for building your website), GitHub Pages (for hosting your website), and GitHub's API (for automatically populating your website with content).

Installation

Fork the github/personal-website repo

You'll be making your own copy of the "personal website starter" repository so you have your own project to customize. A…

View on GitHub
Collapse
 
dzello profile image
Josh Dzielak 🔆 •

Awesome additions 🎉 I hadn't noticed before that the stars and forks didn't have links properly set, I've added your code and now mine do too. Thank you!