Update (07/15/2020): Changing name server in gen.xyz results in unable to configure the email forwarding on their service, that's the major reason that I decided to switch to Google Domains.

This post records how I used Jekyll to build my previous portfolio site and host it on Heroku. The most tricky part is the DNS configuration so I write it down to reference in the future and I hope it can help you too.

What you need

Jekll

Jekyll is the content generator. If you know Ruby, Jekyll will be quite easy for you to start.

Heroku

Heroku is a platform as a service(PaaS) that can host all kinds of applications written in multiple languages.

The reason I chose Heroku is I already had some experience with it and it charges the same as Github. Of course you can consider Amazon Web Services(AWS) or Google Cloud Platform(GCP), but so far Heroku works pretty well for me and I think it is easier to use compared with others.

You can also utilize GitHub Pages, it's free if you don't mind "open source" your code. Besides, Github probably has the best support for Jekyll based sites.

A Domain Provider (optional)

You don't really need a domain, but with a domain it looks cooler.
I used gen.xyz but later I switched to Google Domains, which provides more options.

Steps

1. Have a simple local site ready

Simply run the start instructions from Jekll website:

➜  gem install bundler jekyll
➜  jekyll new my-awesome-site
➜  cd my-awesome-site
➜  bundle exec jekyll serve
# => Now browse to http://localhost:4000

Easy, huh? While You can feel free to read more about Jekll and add more details to your awesome site, I would suggest to make it deployed first. Why? Having the complete pipelined workflow ready actually takes most of the time and you can always come back to refurnish your site at any time.

Oh, you would also want to use a version control tool to manage code. For example, with git init or hg init if you use Git or Mercurial to start. You don't want to use version control? OK, fine. Don't get drown in your "final version", "really final version" and "ultimate version" directories!

2. Deploy to Heroku

Credits to this post. It provides very detailed steps to deploy your site.

3. Associate your domain:

➜  heroku domains:add <your domain>

Enable TSL/SSL (optional)

TSL (SSL was the old name) is the 's' in https. With https enabled, requests are encrypted. Most important for a personal page is that the browser won't pop out "warnings" saying this site is not safe when others visit.

If you do need https, you need upload your certificate and set up the SSL in Heroku. In my case, I used the Automated Certificate Management(ACM) provided by Heroku. It is automatically added by Heroku if your plan is Hobby+. It does require you to pay some money monthly. Well, no pain, no gain. It's a reasonal price so I'm buying it.

4. Set up DNS

This was the hardest part I had when I was with gen.xyz and it was easier to config when I later transfered the domain to Google Domains. I will list both here:

gen.xyz

Not after a while did I learned that gen.xyz doesn't support users to add DNSSEC target by themselves. Instead, it reuires user to provide information about the DNS target which Heroku doesn't provide.

Solution: What I ended with is that I found an add-on on Heroku named PointDNS. This add-on handles DNSSEC target nicely and you should config your DNS record in the add-on if your domain provider doesn't support DNSSEC. Then add the name servers listed in PointDNS to gen.xyz. So gen.xyz, please upgrade your service!

Bonus: "Naked" domain (Maybe not) Although Heroku doesn't support A record, you can get one since you are using an alternative DNS, by creating two records in the PointDNS Addon: 

ALIAS junhan.xyz www.junhan.xyz
CNAME www.junhan.xyz <DNSSEC target>

However "A record" is not recommended, so I can't tell it's a bonus or not.

Google Domains

Google Domain is straightforward, adding following records:

Add a subdomain forwarding under DNS->"Synthetic records": @ for subdomain, destination as https://www.junhan.xyz. Note www is needed because Google doesn't allow "naked" domain.
Add a CNAME in "Custom resource records" session:
www and provide the DNSSEC address provided by Heroku

* Wait for some time to allow your DNS change propagate.

What I learned

The most useful knowledge I learned is about DNS setup. I didn't know much about networking, how domain and DNS work together and why some people's sites show as name.com while others associated with www, but now I do. I wish this post can help those who struggle to set up domain and DNS save some time. Also this post provides an approach to build a personal website or whatever.