Gatsby.js

Have you seen the developer's blogs that ends with .github.io?

💁‍♀️ Why Gatsby.js??

1. Get familiar with git and git commands
2. Keep our one commit per day by leaving commit messages
3. Get improved what I learned new and can share with others!!

Making our own blog with HTML, CSS, and JavaScript would take forever, so we're going to use site generator, which alreay made a blog site for us and can be customized. Just install, edit the settings, write the contents, and deploy!! We're using github to deploy and domain offered by github as well!

Deploy

It is to open our work that we have developed to public so that anyone can access to it.

Domain

A website address that is converted from number, ip address, to string. We need to buy domain and connect to ip address by ourselves to create our own blog, but this time, we're using Github Pages in github. Now we have a domain username.github.io.

How to install blog?

1. Choose a Gatsby theme
2. Install a blog with Gatsby Starter
3. Pull up a blog in local
4. Edit the Gatsby config
5. Create a github.io repo
6. Deploy!

Prerequisite

get git and npm installed
create a new virtual environment

1. Chosse a Gatsby Theme

Choose in Gatsby Theme in Gatsby Starter. We'll use gatsby-starter-lumen.

2. Install a blog with Gatsby Starter

Install gatsby-cli globally to use gatsby command.

npm install -g gatsby-cli

Now we're getting a source code from our chosen blog theme.

gatsby new blog https://github.com/alxshelepenok/gatsby-starter-lumen

Make sure to edit package.json file to use npm as a default not yarn in package manager!!

"develop": "npm run clean && gatsby develop",

3. Pull up a blog in local

npm develop

See what's on the localhost:8000, which is called local environment.

4. Edit the Gatsby config

Get to config.js file and edit title, subtitle, and author.
In url.js file, edit like below.

module.exports = {
    url: 'https://RainaKim.github.io/',

In src/package.json, edit "deploy" part under "script".

"deploy": "npm run clean && gatsby build && gh-pages -d public -b master",

Then, after finishing our posting, deploy with

npm deploy

5. Create a github.io repo

Create a new repository with the name username.github.io

6. Deploy!

Setting git in blog root.

git init
git remote add origin https://github.com/username/username.github.io.git

Check if origin address is successfully connected

git remote -v

See if it's pushed properly.

git add .
git commit -m "first commit"
git push origin master

Then deploy!!!

npm deploy

If it works out well, go check the master branch and see how the source code has been uploaded. It might look different from the original source code. This source is not for customizing and developing but for deploying by changing from md file to html, js file.

Deploy command automatically builds and pushes to git master. Let's preserve our code by creating a new branch develop.

Creating and moving a branch

git branch develop
git checkout develop

Uploading a source code to git

git add .
git commit -m “blog posting~~”
git push -u origin develop

Make sure to change the default branch to develop!
Settings -> branches -> Default branch -> develop -> update