Portfolio Website

February 25, 2019 Web

GitHub has released a new personal website generator recently — a Jekyll template that allows to showcase your work as a software developer. I thought it was a good sign to create a portfolio site for myself, too.

I used the following setup:

  • Fedora 29
  • Jekyll 3.8.5
  • personal-website 7b775d5

Installing Jekyll

First, install Ruby:

$ sudo dnf install ruby ruby-devel

Install Jekyll and Bundler:

$ gem install jekyll bundler

Fixing access error on Android

I use Termux for development on Android. I tried to run Jekyll server this way

$ bundle exec jekyll serve

but encountered an error:

jekyll 3.8.2 | Error: Permission denied @ rb_sysopen - /proc/version

To get rid of it, apply the following patch (source):

diff --git a/lib/jekyll/utils/platforms.rb b/lib/jekyll/utils/platforms.rb
index 710ca20ad2..5265e4b249 100644
--- a/lib/jekyll/utils/platforms.rb
+++ b/lib/jekyll/utils/platforms.rb
@@ -73,7 +73,7 @@ def proc_version
         @proc_version ||=
-          rescue Errno::ENOENT
+          rescue Errno::ENOENT, Errno::EACCES

See jekyll/#7045 for details.

Fixing installtion error on Fedora

$ gem install jekyll
Building native extensions. This could take a while...
ERROR:  Error installing jekyll:
        ERROR: Failed to build gem native extension.

    current directory: /home/developer/.gem/ruby/gems/http_parser.rb-0.6.0/ext/ruby_http_parser
/usr/bin/ruby -r ./siteconf20190222-7844-1g3e3as.rb extconf.rb
creating Makefile

current directory: /home/developer/.gem/ruby/gems/http_parser.rb-0.6.0/ext/ruby_http_parser
make "DESTDIR=" clean
rm -f 
rm -f ruby_http_parser.so  *.o  *.bak mkmf.log .*.time

current directory: /home/developer/.gem/ruby/gems/http_parser.rb-0.6.0/ext/ruby_http_parser
make "DESTDIR="
gcc -I. -I/usr/include -I/usr/include/ruby/backward -I/usr/include -I.   -fPIC -O2 -g -pipe -Wall -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -Wp,-D_GLIBCXX_ASSERTIONS -fexceptions -fstack-protector-strong -grecord-gcc-switches -specs=/usr/lib/rpm/redhat/redhat-hardened-cc1 -specs=/usr/lib/rpm/redhat/redhat-annobin-cc1 -mtune=generic -fasynchronous-unwind-tables -fstack-clash-protection -fcf-protection -fPIC -I/home/developer/.gem/ruby/gems/http_parser.rb-0.6.0/ext/ruby_http_parser -m64 -o ruby_http_parser.o -c ruby_http_parser.c
gcc: error: /usr/lib/rpm/redhat/redhat-hardened-cc1: No such file or directory
make: *** [Makefile:243: ruby_http_parser.o] Error 1

make failed, exit code 2

If you get similar message, install redhat-rpm-config package:

$ sudo dnf install redhat-rpm-config

Customizing site template

Fixing CSS URL

The template didn’t load CSS styles for me. It turned out the absolute URL must be replaced with a relative one.

diff --git a/_includes/header.html b/_includes/header.html
index 77ee9a1..6b173c2 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -16,6 +16,6 @@
     <meta charset="utf-8">
     <title>{{ user.name }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link href="{{ "/assets/styles.css" | absolute_url }}" rel="stylesheet" type="text/css">
+    <link href="{{ "/assets/styles.css" | relative_url }}" rel="stylesheet" type="text/css">
   <body class="bg-white" {% if site.style == 'dark' %}style="background-color: #2f363d !important"{% endif %}>

Changing the way how repositories are ordered

Sort repositories by stars count, without forks (source):

diff --git a/_includes/projects.html b/_includes/projects.html
index f676188..902fcbb 100644
--- a/_includes/projects.html
+++ b/_includes/projects.html
@@ -1,7 +1,8 @@
 <h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>My Projects</h2>
 <p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">GitHub repositories that I've built.</p>
 <div class="d-sm-flex flex-wrap gutter-condensed mb-4">
-  {% for repository in site.github.public_repositories limit: 9 %}
+  {% assign public_repositories = site.github.public_repositories | where:'fork', false | sort: 'stargazers_count' | reverse %}
+  {% for repository in public_repositories limit: 9 %}
     <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
       {% include repo-card.html %}

Bottom line

GitHub’s new personal website template looks beautiful, though it seems like it needs some more polishing. There is already a plenty of feature requests by the community. Anyway, thanks to GitHub for having created it.

comments powered by Disqus