How to launch a website with Github Pages and Jekyll

0. Useful resources

• https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll
• https://yxtay.github.io/blog/understanding-jekyll-and-github-pages/

1. Install Jekyll

Jekyll is a Ruby application that transforms markdown files into a static website. Install it locally by following the instructions here: https://jekyllrb.com/docs/installation/macos/

2. Set up a new git repo for your site

• Create a new repo in github and clone to your local machine.
• In your local copy of the repo run the following command:

jekyll new --skip-bundle . --force

This will create a bunch of files that specify the website.

• In the Gemfile, comment out the line gem "jekyll", "~> 4.2.2" and uncomment the line gem "github-pages", group: :jekyll_plugins

• In the _config.yml file, comment out the lines below:

#baseurl: ""
#url: ""

Why? This is because Github Pages will automatically set these. Before removing these lines, my page would not build on the server.

• lastly, run

bundle install

This will 'build' the website locally.

3. Testing the site locally

Run the following commands in order to test the website locally:

bundle add webrick
bundle exec jekyll serve

This will output a local URL. Paste this into your browser to preview the website.

4. Deploy the site

• commit all local changes and push them to master.
• on github, deploy the website under Settings --> Pages --> Deploy from branch, and select the branch (e.g. master) you want to deploy from.
• each time you push new content, it will automatically be deployed to your website within a few minutes.
• you can also force a rebuild by clicking on the 'deployed' link and then on 're-run all jobs'

5. Adding a custom domain

• Go to domains.google.com to check if the domain name you want is available. If so, purchase it.
• Follow instructions from this link to connect the Github page with the Google domain: https://dev.to/trentyang/how-to-setup-google-domain-for-github-pages-1p58

Note: ⚠ The CNAME record should always point to <user>.github.ioor <organization>.github.io, excluding the repository name. ⚠️ It can take up to 24 hours for the domain's DNS settings to propagate.

• To confirm everything is working, type

dig www.xyz.com +nostats +nocomments +nocmd

If the output looks like this:

> dig www.xyz.com +nostats +nocomments +nocmd

www.samflender.com. 3600 IN CNAME xyz.github.io.
sflender.github.io. 3600 IN A 185.199.108.153
sflender.github.io. 3600 IN A 185.199.109.153
sflender.github.io. 3600 IN A 185.199.110.153
sflender.github.io. 3600 IN A 185.199.111.153

that means everything is working!

• Now, go to your repo on github, settings --> Pages --> Custom Domain, add your custom domain, and click "Save".
• If everything goes well, you can now access your site via the custom domain!

6. Integrating blog posts from Medium

Work in progress. This could work: https://medium.com/@jameshambunann/displaying-medium-posts-on-your-jekyll-website-7eef230309e4