Get Started (Step-by-step)

🙆‍♂️

Already familiar with using bash commands & npm package? Read this post instead

Get Started 🚀

This post walks you through how to install the blog on your device and create your own blog posts.

You will need to install a few softwares if not previously installed: Nodejs, Git, VS Code

1. Install Node.js & Git

Download (Node.js)

If you don't have Node.js installed, download it with above link. This is to use npm/npx (node package manager) to download the blog & run it on your browser.

Download (Git)

Git also needs to be installed prior to download. While installing, use default/recommended settings

2. Install VS Code (text editor)

Download (VS Code)

You'll need a text editor in order to write blog posts and to customize the blog. There are many popular text editors you can choose from: VS Code, Sublime, Vim, Atom, etc..

I recommend installing VS Code as this guide explains setting up with VS Code

3. Install gatsby-blog-mdx (Mac & Window Users)

• Open your installed VS Code
  • On Windows, run as admin

• Click Open folder... and browse over to wherever you want to save your blog then select folder

• Open integrated terminal on View --> Terminal

• (Windows only) on terminal, run the following command. Then proceed to the last step

  BASH

  Copy

  npm i -g --production windows-build-tools@4.0.0

• Last step: on terminal, run the following command

  BASH

  Copy

  npx gatsby new my-blog https://github.com/EllisMin/gatsby-blog-mdx

  This may take some time, but this is it for installation

• If you're Windows user running into an issue, this page might help

4. Run your blog locally

On your terminal, go to my-blog directory. This can be done with cd command.

npm start is to start developing on your local server. Whenever you want to stop, press Ctrl + C to stop

cd my-blog
npm start

If not sure, use pwd to print current directory or cd .. to move to a parent directory

After npm start, open your web browser and go to localhost:8000. Now, you should be able to view your website on your browser.

5. Create your first post

Create your post under /_posts directory

Post Example

---
title: First Post
date: 2020-05-20
tags: [category1]
---

## First post
This is first post

Save the file then refresh the webpage to view the created post

What's next? 🤔

- Learn about creating post

- Customize your blog

- Deploy Blog on Netlify💫