DEV Community

Cover image for How to use the new github.dev personal website generator

How to use the new github.dev personal website generator

Josh Dzielak πŸ”† on February 25, 2019

github.dev is a new community project by GitHub that lives on the .dev TLD. With it, you can fork, customize and deploy a personal site that shows ...
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…

Collapse
 
joshed 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!

Collapse
 
gazhay profile image
GazHay

Although out of the scope of this article, you will have to add your ssh key to github to allow the clone. You may even have to create ssh key-pairs for that.

Also, the gems didn't build on my pixelbook, didn't have time to figure out why.

Collapse
 
ben profile image
Ben Halpern

This could make a good standalone #help post.

Collapse
 
nikodermus profile image
NicolΓ‘s M. Pardo

Any help there? I'm getting a blank page with no info but the topics that were already in the template

Collapse
 
vip3rousmango profile image
Al Romano

Ok, what is a "devsigner"... And why do I feel you could make a whole post on just the backstory of this term.

As a frontend developer I can't tell if it's funny or I should be #triggered.

:D

Collapse
 
joshed profile image
Josh Dzielak πŸ”†

Haha, great question! I think it was at Algolia when I first heard the term. We had a guy who was a designer and illustrator by background but had gotten very good at front end coding, enough where he could make his project ideas come to life end-to-end. He called himself a devsigner, and since then I've seen some other people doing it too.

I'm sure there is more backstory here though widely speaking, so many titles out there πŸ˜›

Collapse
 
ludamillion profile image
Luke Inglis

Usually devsigned/devsigner has a more negative (though not usually too negative) connotation than that. Usually it refers to a page or app or feature &c which has not been fleshed out by an actual designer and for which a developer has done their best to make it look good. Obviously the results depend on the design chops of the dev

Thread Thread
 
vip3rousmango profile image
Al Romano

+1.

This was my thought when I saw it.

Collapse
 
ben profile image
Ben Halpern

I haven’t fully examined this yet, but I think there should be an option to include your DEV link somewhere here.

If anyone wants to look into this project and make a PR to add that, it would be awesome!!

Collapse
 
patrickjwoods profile image
Patrick Woods

I just walked through this to make mine: patrickjwoods.github.io Excited to see what everyone else creates!

Collapse
 
kylepw profile image
Kyle

I'm curious if it's possible to display your merged pull requests using Github Dev?

Collapse
 
joshed profile image
Josh Dzielak πŸ”†

It looks like you could accomplish it with the v3 REST API using the search functionality to filter by user and merged status.

help.github.com/en/articles/search...

Once you had the right query, you could add that into GitHub Dev as another API call and display it on the UI.

Collapse
 
kylepw profile image
Kyle

Yeah, I was looking at that earlier. I assume API calls are hidden in the jekyll-github-metadata plugin, so I'd have to find another way to make API calls. Don't want to setup a server, though. AJAX, maybe?