Start blogging with Jekyll, GitHub and NetlifyDec 10, 2018 | Utkarsh Shigihalli Jekyll Netlify GitHub
Jekyll - static site generator
Creating a simple blog
Once you have Jekyll working, you can create a simple blog post by running the following command
jekyll new .
This will create a basic a blog structure which will look like below.
_posts folder will contain all your blog posts and each post is a markdown file. Each markdown contains a front matter which allows you to add the meta data for the post.
Now to run your website locally run
jekyll serve and you will see the blog up and running in local machine under port 4000.
Jekyll will build your site using
jekyll buildand store the generated static content in
_sitefolder. Your site will be served from this
Source control your website using GitHub
Create a repository in GitHub and commit the folder your created. I committed mine here.
You now have following advantages
- Your full website is fully source controlled
- Has a full history of your changes to any part of the site
- Writing blog post is just adding a markdown file.
Hosting your site using Netlify
Netlify hosts your static websites for free and serves your site using CDN (Content Delivery Network). Few of the advantages hosting your site on Netlify are
- Geo-redundant CDN for your site
- Continuous deployment - You push your code to GitHub and Netlify builds your site and your site is live within minutes.
- Provides a free TLS certificate via Let’s Encrypt - this means your site is served on HTTPS free of cost.
- You can add custom domain - We have done just that :)
- Lastly, Netlify has something called as branch sub-domains - meaning you can modify your site in a new branch and test it out as a sub-domain before merging it to
Head over to Netlify and create the account if you already don’t have one.
Importing your git repository
- Click on
New site from Git
GitHubto import our repository
- Authorize Netlify to your GitHub account
- If you have access to multiple accounts, you will be asked to select the account where your repository lives
- Next screen will prompt you to select the repository which hosts your Jekyll site. Select the appropriate repository and click
- Click on the repository link on the screen
- Finally, you will select the
branchfrom your site will be live (typically
master) which will be pre-populated. You will also have an option to specify the command to build your Jekyll site. I will leave it as
jekyll build. Click
If you need to customize and need advanced options, take a look at Netlify’s toml file
Within few minutes Netlify will build your site (displays full console log during deployment) and your website is live under a random sub-domain. You have an option to change the name under
Settings - I changed mine to
See our blog live here
Isn’t it cool? Oh I almost forgot, notice our blog is being served from HTTPS and has a full valid certificate!
In this blog post we saw how easy it is to host a free blog/website using Jekyll, Netlify and GitHub. I hope you found this blog post useful.
Few features not covered in this post, but you should checkout:
- For our blog post we also do many SEO optimizations by setting custom headers etc - Again Netlify makes it easy for us as it allows use to specify custom headers based on the folder path. Finally, our contact form in this site is hosted using Netlify’s Form feature.