Netlify

Move Jekyll from shared hosting to Netlify

26/04/2018
mDfRg
web

I used to host mindefrag.net on a shared hosting from my country. I would use FTP as a mean to deliver updates of this jekyll-generated blog. Every time I was satisfied with the result of my changes I would run jekyll build/serve and then navigate to /_site directory with filezilla and upload it to /domains/mysite/public_html overwriting old files. Oh look, I made a typo in that post - let’s do it again! Not that I’m complaining, but I knew from the first time I used jekyll that there must be a more elegant and efficient way to push changes online. And there certainly is!

Jekyll website provides rich documentation of the project and also mentions about deployment methods. Beside Netlify it enumerates Aerobatic, Kickster, and other more sophisticated methods that require a bit of coding like Amazon s3_website, rack-jekyll etc.

I’ve chosen Netlify because:

  • it’s simple, requires no additional coding
  • provides one-click deploy of Let’s Encrypt SSL certificate
  • it’s well documented.

Here is a simplified tutorial of how to migrate your site to Netlify. This guide assumes you are already familiar with git version control system.

Prerequisites: git repository on either one of those: Github, Gitlab or Bitbucket. Create an repo, then copy the url to it. Then type:

git clone git@gitlab.com:mDfRg/test-project.git
cd test-project
jekyll new .
git add .
git commit -am "my new jekyll site"
git push

Create account on Netlify. Once you log-in, from app.netlify.com:

  1. Click ‘New site from Git’ new site
  2. Choose between Github, Gitlab and Bitbucket
  3. After being authorized to one of the accounts above, pick a repo pick a repository
  4. If you’re not changed anything in main settings (especially in _config.yml), stick to the default settings, namely:
    • branch: master
    • build command: jekyll build
    • publish directory: _site/ new site defaults
  5. Congrats! Your site is deployed! Now you can change site name: Site settings->General->Site details new site deployed
  6. Add/Change DNS, Use HTTPS (Domain management)

What about DNS?

Sleek thing about Netlify and DNS is that you don’t really need to to buy a domain - you can have your .netlify.com address (same as with .github.io) and be done with it. However, if you fancy having your own address, you can either:

Use Netlify as your DNS provider

The ns address will show after you set it up in your settings panel. Then you can create a DNS zone and create @ and www A/AAAA records pointing to your page. Detailed documentation is located in chapter custom domains and dwells about specific configs like custom subdomain (blog.mywebsite.com).

Easier: change your hosting DNS

If you, like me, already purchased domain along with shared hosting, chances are you are provided with email. That’s something I don’t want to loose switching to Netlify, so instead of changing my site’s NS servers I put following settings in my DNS configuration:

DNS settings

Note the @ A record pointing to Netlify’s load balancer’s IP: 104.198.14.52 and the CNAME record for www subdomain.


Hostname Type Value
@ A 104.198.14.52
localhost A 127.0.0.1
mail A 185.204.218.251
pop A 185.204.218.251
smtp A 185.204.218.251
mindefrag.net.   NS ns1.hekko.net.pl.
mindefrag.net.   NS ns2.hekko.net.pl.
mindefrag.net.   MX 10 mail
www CNAME   mindefrag.netlify.com.
_domainkey TXT ***
mindefrag.net. TXT “***”
x._domainkey TXT “v=***”

Thanks to this settings I can benefit from Netlify CDN and Let’s Encrypt SSL deployment whilst having my email settings unchanged.

For basic settings, like this blog Netlify is free of charge. Now all I have to do to publish my post / web change is git push to origin/master!