These days I was trying to start my personal homepage. It is open to the public now. Open your browser and navigate to https://hantsy.github.io.
In this post, I will introduce how I created it using Github Pages and Jekyll.
In the past years, I have written a lot of blog entries on blogspot and Medium, the new homepage will be a central place to aggregate all resources, including blog entries, development notes, etc.
Personal HomePage
Follow the guide of Github Pages, firstly create a repository named <your github name>.github.io, it will be built automatically by a built-in GitHub Pages workflow and deployed to https://<your github name>.github.io.
Jekyll is used for building static websites and blogs from markdown text documents. Github Pages has built-in Jekyll support.
Jekyll website has a great step-by-step tutorial to help you to set up a Jekyll driven static website from scratch. Once you have understood how Jekyll works, you can choose an existing template or themes to speed up the website building. There are plenty of themes in Jekyll showcases and Jekyll Themes which can reuse in your private website. After doing some research I finally choose alshedivat/al-folio.
The best way to reuse alshedivat/al-folio is cloning it and renaming it to <your github name>.github.io. But I've created a repository(hantsy.github.io). When I cloned it into my local machine and pushed it into my Github repository, I encountered a small issue, check alshedivat/al-folio#208.
The alshedivat/al-folio includes two branches: source and master. It includes a Github actions workflow to automate the build progress. Any modification in the source branch will deploy to the master branch.
Install the dependencies.
bundle install
Build the project.
bundle exec jekyll build
Run it in a local dev environment.
bundle exec jekyll serve
The next step is to configure the website information. Open _config.yml in the project root folder, set the essential properties, eg. first_name, last_name, description etc. And change the profile info in the about page, replace the photo image with yours on the about page.
Import Medium Posts
I have maintained my current blog on Medium, I do not want to duplicate the work and republish all posts on the posts page again. I think the best way is to sync the posts automatically.
After researching myself and discussing with the Jekyll gurus from Jekyll Talk, I decided to use the official RSS Importer in a standalone Github actions workflow to sync the posts.
The solution is not ideal but works well. It will be changed in the future if I found better solutions.
It is easy to enable Google Analytics and Disqus, just go to their website and register your website and set the ID in the _config.yml.
Display Github Projects
The alshedivat/al-folio itself includes a jekyll-github-metadata plugin to access the metadata of Github repositories.
To replace projects in the projects page, I changed the _pages/projects.md to the following.
// omitted the page headers
<div class="projects">
{% assign sorted_projects = site.github.public_repositories | sort: "stargazers_count"|reverse %}
{% for project in sorted_projects %}
<div class="card hoverable mt-2">
<div class="card-body">
<h5 class="card-title text-lowercase">
<a href="{{ project.html_url }}" target="_blank">{{ project.name }}</a>
</h5>
<h6 class="card-subtitle mb-2 text-muted">{{project.language}} • <i class="fa fa-star"></i> {{project.stargazers_count}} </h6>
<p class="card-text">{{ project.description }}</p>
</div>
</div>
{% endfor %}
</div>
There is no need a access token to read the metadata of the Github public repositories. More details see jekyll/github-metadata.
Gather my Docs
In the past years, I have written plenty of docs via blog entries, project wikis, etc. The Github Pages also support Jekyll-driven static web pages for single repository.
There is a Github Pages option in the repository settings page, set it to discover docs from master branch and docs folder. Then create an index.md in the docs folder. In general, the index.md should contain a table of content for all documents in the docs folder.
After it is done, the docs for the repository are available via http://hantsy.github.io/<your repository name> , eg. https://hantsy.github.io/jakartaee9-starter-boilerplate/ is the online docs address for the repository hantsy/jakartaee9-starter-boilerplate.
Some of my docs are available on GitBook.io, where it provides a better web UI to read online.
The alshedivat/al-folio itself includes a publications page and enables jekyll-scholar to display the essays, books, etc. I reuse it to organize my docs.
Go to the publications to browse all the docs I have gathered till now.
- Upgrade to Jakarta EE 9
- Spring R2dbc by Examples
- Building RESTful APIs with NestJS
- Kickstart a Jakarta EE 8 Application
- RSocket by Examples
- Quarkus by Examples
- Helidon by Examples
- etc.
Top comments (0)