bluejacket98 / my-blog

The repository for this very blog.

How To Start

Install node.js

Install node.js and configure related environment variables. Choose stable version of v14.17.5. https://nodejs.org/en/\ Check node and npm version by

node -v
npm -v

Make sure it shows

v14.17.5
8.1.0

Upgrade npm if version doesn't fit

npm install -g [email protected]

Install Gatsby CLI

Install Gatsby globally using npm

npm install -g gatsby-cli

Install dependencies

cd .\my-blog\
npm install

Configure Github GraphQL API

Create 'token.env' at root folder, with content in following format

GITHUB_LOGIN=BlueJacket98
GITHUB_PERSONAL_ACCESS_TOKEN=YOUR_TOKEN

Do not upload .env to Github

Generate token at Github by:\

1. Settings
2. Developer Settings
3. Personal access tokens
4. Generate new token
5. Save token and paste in .env file

Build the project

cd .\my-blog\
gatsby develop

Explore

When console outputs

success Building development bundle - 0.534s

Go to

localhost:8000

in your browser.

Features

Main Page

• List blogs with the background of its header picture.

• Show title of the blog when hover on the picture.

• Using 2-1-2-1-... layout

Blog

• List of all blogs.
• Display the category, title, abstract of each blog in a card.

Blog Content

• Display the content of the blog.
• Support all syntax in markdown.
• Support Latex display.

Projects

• List all repositories in Github using Github GraphQL API.
• Display each repository's title, about, star and fork numbers.

Portfolio

• Display photos from Google Photos album.
• Hosting backend service querying Google Photos API on Glitch.
• List pictures in a two column waterfall (mansory) layout.