Introduction

Jekyll is a blog-aware static site generator written in Ruby which we use to build our website and we deploy our site to Netlify. Netlify is primarily used for serverless application hosting and they have a lot of add-ons like forms to hook up with our website later, free SSL certificate and DNS Server management and they also offer 100GB free traffic per month😊. Some alternative hosting options to Netlify are Azure Static Web App, Github Pages and others. In this post, I’d be covering deployment to Neltify only.

Taking off a server and using a static website has huge benefits.

• Don’t have to pay for a expensive server to host
• If there’s a need for dynamic content we can use Javascript and API’s to deliver content(JAMStack).
• Deploy our website to Content Delivery Networks(CDN) for super fast loading of pages and so on..

How to setup our website with Jekyll

Install Jekyll on Windows/Linux/Mac

Follow the installion instructions listed on Jekyll website to install Ruby languge on your desktop and install Jekyll, bundler as gems.

Initialize the project

Create a new Jekyll Site with the below command

jekyll new my-blog

cd into my-blog

cd my-blog

You’ll see the default files and folders that Jekyll new command created inside my-blog folder. Jekyll new command includes a simple starter blog site using Minima theme.

To run and test the website on local server, run the below command and go to http://localhost:4000 to see it live.

bundle exec jekyll serve

If you see any Depreciation Warnings in the terminal after running bundle exec jekyll serve, Don’t worry and please ignore them as it won’t affect our website.

Also, Use Code Editor like VS Code as it makes our development flow very smooth with features like integrated Terminal and code highlighting and so on..

Use theme Minimal Mistakes

The easiest way to build our website is to use a Jekyll theme and Minimal mistakes theme has lot of documentation and customization options and I believe it fits all your blog needs. All you have to do is edit one file _config.yml to do most customizations for our website.

There are a couple ways to install the theme. But I’d recommend gem based installion as it is easy to update the theme in the future.

1. To add theme as a gem add below line at the end of Gemfile.

   gem "minimal-mistakes-jekyll"
   

2. To install Minimal Mistakes theme as gem and update existing gems, type below bundler command in terminal.

   bundle
   

3. Now, change the default theme from minima to minimal-mistakes-jekyllin _config.yml file to set your theme to Minimal Mistakes.

   theme: minimal-mistakes-jekyll
   

Setup the theme

1. Change the front matter of the home page in index.markdown to the following

   ---
   layout: home
   author_profile: true
   ---
   

2. Change the layout: post in YYYY-MM-DD-welcome-to-jekyll.markdown to layout: single
3. Remove about.markdown

Now, run the website with bundle exec jekyll serve and go to http://localhost:4000 to check the changes.
Press Ctrl + C to stop local server.

Customize the website

Customize the website following the docs of theme especially visiting Configuration, working with posts and pages first.

Deploy site to Netlify.

The best way to deploy is to connect Netlify to GitHub Repository instead of manually uploading site files to Netlify.

Create a git repository and push to GitHub

1. Initialize the git repository

   git init
   

2. Stage the current directory files to commit

   git add .
   

3. Make your first commit in your local repository

   git commit -m "Initial commit"
   

4. Now, Create a empty github repository. Go to Github, click on + icon and create a new repository, give a repository name, For ex., my-blog and click on Create repository
5. Add the URL of the remote github repository to your local repository.

   git remote add origin your_git_repository_URL
   

6. Push your local local repository code to Github.

   git push -u origin master
   

Connect Github and Netlify

1. Go to Netlify and sign up for an account. Create a new team with a name. Now, click on Import an existing project under Add new site.

2. Now select, Deploy with Github and Authroize Netlify on next screen to connect to Github

3. Search for your repository.If your repository won’t show up when you search, press Configure Netlify On Github.

4. Scroll down on the pop-up window and add your specific repository from the dropdown or give access to all repositories and press save.

5. Now, you see your repository. Select it.

6. On the next page, we configure deployment settings for the website. The default options populated by Netlify are sufficient. Now, hit on that deploy button.

7. Our website is deployed to netlify sub-domain. Now, Setup a custom domain with Https.

Everytime you make changes on your website, like adding a new post or configuring a setting. Commit your changes and push to github(see below commands).

git add .
git commit -m "your-commit-message"
git push

For some reason, the changes to _config.yml won’t load automatically when using Minimal Mistakes and you have to stop and start local server to check your changes locally on the website.

Netlify will automatically deploy your new changes whenever there’s a change in Github repository.

Hope you enjoyed this post. If you have any comments/suggestions on this post or need help type them below, I’ll reply to every single one of them.

In this post, we go through on how to create a free Azure SQL Database.

Azure SQL Database runs on the stable version of Microsoft SQL Server database engine. If we follow the Microsoft Docs tutorial on how to create an Azure SQL Database, there is no free tier available. The least tier is basic with approximately $5 US Dollar per month.

There is a little workaround here. We have to create a combo of Web App + SQL to get a free database. Then, delete the Web App (because it is not needed), after that you can use database.

Steps to create free database:

Go to Azure Portal and click on create a resource icon. Search for Web App + SQL.

Click on create button to create Web App + SQL resource.

In Web App + SQL create Page, fill all the data that is required.

If you click on SQL Database you can create a new database or select existing databases. In our case we create a new database. Before creating database configure Target Server settings for database.

click on SQL Database

select create a new database.

Enter database name and select Target Server.

Enter new server details and click select.

Now change Pricing tier. click on Pricing tier.

click on Looking for basic, standard, premium tab.

click on free tab and apply.

Now click on apply in SQL Database page.

Create a free App Service Plan for web app. It would be better if you create web app and database in same location. And press Create button.

Limitations of free database

The maximum size of database is 32 MB of shared storage and compute is 5 Database Transaction Units (DTUs).

This database is a trial for one year and after a year it gets upgraded to Basic tier.

This database is useful for learning and testing purposes only as it has low storage.

Starting from macOS Catalina, Python2 & Python3 is installed by default in macOS.You can check by entering python3 --version command in Terminal.

Now Enter python2 --version or python --version to check if python2 was installed. Remember entering just python defaults to python2.

Pip

Pip also called as Pypi is a package manager for python. For installing new packages and to update existing packages for our projects, we need pip.

Download pip

But there’s no pip installed by default. We have to install pip by downloading and running python file get-pip.py.

• Download get-pip.py file.
• Go to the directory where get-pip.py file exists and execute file by entering python3 get-pip.py
• You can check installation by entering pip --version

Note: Open new terminal window to check pip installation so that environment variables take in effect.

Virtual Environments

Because different projects may have different python versions and packages, it is a better approach to create virtual environments for your projects to avoid dependency errors across projects.
Creating a virtual environment makes less overhead in future.

Create Virtual Environment

Install python packge virtualenv by using below command.

pip install virtualenv

To create a virtual environment you have to specify the path to the directory virtualenv <path and name of virtual environment>
To create virtual environment named ‘myvenv’ in current directory enter below command.

virtualenv myvenv

Activate Virtual Environment

To activate virtual environment on mac/linux enter

source myvenv/bin/activate

for windows enter

myvenv\Scripts\activate

You can see the name of virtual environment preceeding in your terminal.

Deactivate Virtual Environment

For getting out of virtual environment to use your actual environment type ‘deactivate’.

deactivate

Happy Coding!