Naoufal The Tech LeadNavigate back to the homepage

Here is how to setup a free personal blog using Gatsby, Github, Narative and Netlify

Naoufal El hassnaoui
June 6th, 2020 · 2 min read

I used the following services to lunch this blog as quickly as possible.

Gatsby: used by Narative’s Novela theme.

Github: for hosting the blog’s git repository.

Narative Novela theme.

Netlify: to host the blog.

Here is the steps to do all this and lunch your own blog:

Getting Started with Gatsby Starter Novela

This guide will take you through setting up Novela with Gatsby Starter Novela.

Here is just the first 2 steps the rest is in the guide in Novela theme github repository.

Step 1: Starter installation

With gatsby-cli

Here how to install gatsby-cli

1npm install -g gatsby-cli
1gatsby new novela-site https://github.com/narative/gatsby-starter-novela
With git clone:
1git clone git@github.com:narative/gatsby-starter-novela.git novela-site
2
3cd novela-site
4
5yarn

Step 2: Develop & Build

Once installed or cloned locally and all packages are installed you can begin developing your site.

1# Run localhost
2yarn dev
3
4# Build your Gatsby site
5yarn build

Step 3: Github private or public git repository

Create a private or public repository in Github and push your code there.

Go here https://github.com/new

Create the repository.

Then inside your blog code in your machine push the code to Github

1git remote add origin git@github.com:naoufalelh/my-blog-repo.git
2git push -u origin master

Change naoufalelh to your Github username and my-blog-repo to the name of the repository you created in Github.

Step 4: go to Netlify

Netlify website
Netlify website

Go to https://www.netlify.com setup an account and then in https://app.netlify.com click on new site from git, chose GitHub and pick the repository your created in GitHub.

You are ready to go your website is online by the end of this process.

Now whenever you change something in your code and you push it to your git repository master branch Netlify will deploy a new version in seconds and you will find your website up to date.

Step 5: Novela theme configurations

This theme has a lot of things you can change, to not repeat the same thing from their guide I will leave this useful links for you to find what you need quickly.

To add a author or change existing authors

https://github.com/narative/gatsby-theme-novela#step-4-adding-an-author

To add a new post

https://github.com/narative/gatsby-theme-novela#step-5-adding-a-post

To change meta tags and some site settings

https://github.com/narative/gatsby-theme-novela#step-6-configuring-sitemetadata

Step 6: domain name and certificate

GitHub Student Pack website
GitHub Student Pack website

If you have GitHub Student Pack (if you are a student) you can get free 1 year .me domain name or some other domain names like .digital for free.

I got my GitHub Student Pack when I was in my last year in university and it’s valid for 2 years so I used the pack to get my naoufal.digital domain name for free.

I will buy another domain name when I decide which one to pick lol.

Last thing is SSL certificate, you can set it up for free too from Let’s Encrypt.

Step 7: only if you want to use Netlify CMS

Netlify CMS website
Netlify CMS website

To easily write new blog post you can use Netlify CMS in local.

In terminal (in project folder):

1yarn dev

In another terminal (also in project folder):

1yarn proxy

Then visit http://localhost:8000/admin/

You can also setup Netlify CMS online. To do this you need to go here https://app.netlify.com/sites/naoufal/settings/access#oauth change naoufal by your Netlify username then follow the steps to add access to your GitHub account.

Then you go to your_link/admin and login with your Github to the admin page where you can add, change posts and authors directly and Netlify will update the code in Github and deploy a new version of your website.

I hope you find this useful.

Happy blogging everyone ! :)

More articles from Naoufal The Tech Lead

Personal branding for engineers part 1

What is personal branding? Why I need to build a personal brand? a lot more

December 13th, 2020 · 4 min read

What to do when you get stuck on a problem?

I have a quick tip for you to get you out from that loop of trying to figure out a technical problem...

December 3rd, 2020 · 1 min read
© 2020 Naoufal The Tech Lead
Link to $https://twitter.com/Naoufal_ELHLink to $https://www.linkedin.com/in/naoufalelh/Link to $https://dev.to/naoufalelh