Launch my personal website
Tags: github, jekyll
Published: 2021-03-12 14:18:53

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](https://hantsy.github.io).

In this post, I will introduce how I created it using [Github Pages](https://pages.github.com/) and [Jekyll](https://jekyllrb.com/).

In the past years, I have written a lot of blog entries on [blogspot](https://hantsy.blogspot.com) and [Medium](https://hantsy.medium.com), 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](https://pages.github.com/), 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](https://jekyllrb.com/) 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](https://jekyllrb.com/docs/step-by-step/01-setup/) 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](https://jekyllrb.com/showcase/) and [Jekyll Themes](http://jekyllthemes.org/) which can reuse in your private website. After doing some research I finally choose [alshedivat/al-folio](https://github.com/alshedivat/al-folio).

The best way to reuse  [alshedivat/al-folio](https://github.com/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](https://github.com/alshedivat/al-folio/issues/208).

The [alshedivat/al-folio](https://github.com/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.

```bash
bundle install
```

Build the project.

```bash
bundle exec jekyll build
```

Run it in a local dev environment.

```bash
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](https://hantsy.medium.com), 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](https://talk.jekyllrb.com), I decided to use the [official RSS Importer](https://import.jekyllrb.com/docs/rss/) in a standalone [Github actions workflow](https://github.com/hantsy/hantsy.github.io/blob/source/.github/workflows/medium-sync.yml) 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](https://analytics.google.com) and [Disqus](https://disqus.com/), just go to their website and register your website and set the ID in the `_config.yml`.

## Display Github Projects

The [alshedivat/al-folio](https://github.com/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.

```rub
// 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}} &bull; <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](https://github.com/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/](https://hantsy.github.io/jakartaee9-starter-boilerplate/) is the online docs address for the repository [hantsy/jakartaee9-starter-boilerplate](https://github.com/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](https://github.com/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](https://hantsy.github.io/publications/) to browse all the docs I have gathered till now.

* [Upgrade to Jakarta EE 9](https://hantsy.github.io/jakartaee9-starter-boilerplate/)
* [Spring R2dbc by Examples](https://hantsy.github.io/spring-r2dbc-sample/)
* [Building RESTful APIs with NestJS](https://hantsy.github.io/nestjs-sample/)
* [Kickstart a Jakarta EE 8 Application](https://hantsy.github.io/jakartaee8-starter-boilerplate/)
* [RSocket by Examples](https://hantsy.github.io/rsocket-sample/)
* [Quarkus by Examples](https://hantsy.github.io/quarkus-sandbox/)
* [Helidon by Examples](https://hantsy.github.io/helidon-sandbox/)
* etc.

## Resources

* [Github Pages](https://pages.github.com/)
* [Embed Medium Blog Posts in Website](https://talk.jekyllrb.com/t/how-to-merge-medium-posts-and-local-posts-in-the-blog-list-page/5728)
* [Creating a Hybrid Jekyll/Medium Blog](https://jonbake.com/blog/2019/08/02/creating-a-hybrid-jekyll-medium-blog.html)
* [Displaying Medium Posts on Your Jekyll Website](https://medium.com/@jameshamann/displaying-medium-posts-on-your-jekyll-website-7eef230309e4)
* [How I improved my Jekyll SEO](https://blog.mastykarz.nl/improve-jekyll-seo/)
* [How to customize your github pages blog layout in five minutes](https://aregsar.com/blog/2019/how-to-customize-your-github-pages-blog-layout-in-five-minutes/)