/tecno.engalvez.ar

Nerds en Galvez

Primary LanguageTypeScriptMIT LicenseMIT

gatsby-starter-song

gatsby-template

In this template...

  • 💄 Code highlight with NanumSquareRounds font
  • 😄 Emoji (emojione)
  • 💬 Comment feature (utterances)
  • 🤖 GA
  • ⭐ Enhance UX
  • ⚙ Configurable

screenshot

About this Template

Demo

Use case

If you're using this template, Please Pull Request for Use case!

😎 Quick Start

1. Create a Gatsby site

# create a new Gatsby site using the blog starter
$ npx gatsby new my-blog-starter https://github.com/FFM-team/gatsby-starter-song

If you are not using npx, following Gatsby Getting Started

$ npm install -g gatsby-cli
$ gatsby new my-blog-starter https://github.com/FFM-team/gatsby-starter-song

2. Start developing

cd gat-starter/
npm start
# open localhost:8000

3. Add your content

You can write...

  • contents to blog in content/blog directory.
  • resume content/__about directory.

With markdown syntax and some meta data

Support script for creating new post

npm run post

4. Fix meta data

You can fix meta data of blog in /gatsby-meta-config.js file.

5. Publish with netlify

Deploy to Netlify

💡 if you want to deploy github pages, add following script to package.json

💡 if you want to deploy github pages, add following script to package.json

"scripts": {
    "deploy": "gatsby build && gh-pages -d public -b master -r 'git@github.com:${your github id}/${github page name}.github.io.git'"
}

🧐 Customize

⚙ Gatsby config

/root
├── gatsby-browser.js // font, polyfill, onClientRender ...
├── gatsby-config.js // Gatsby config
├── gatsby-meta-config.js // Template meta config
└── gatsby-node.js // Gatsby Node config

⛑ Structure

src
├── components // Just component with styling
├── layout // home, post layout
├── lib
│    ├── remark
│    │      └── prismPlugin.js
│    ├── styles
│    │    ├── media         
│    │    ├── palette       
│    │    ├── responsive.ts  
│    │    ├── transitions.ts
│    │    ├── utils.ts
│    │    ├── zIndexes.ts
│    ├── heading.ts
│    └── utils.ts
├── pages // routing except post: /(home), /about
├── static
├── lib
│     └── blog-post.tsx
├── utils
├── lib
└── templates
└── typography.css

🎨 Style

You can customize color in src/lib/styles directory.

│    ├── styles
│    │    ├── media         
│    │    ├── palette       
│    │    ├── responsive.ts  
│    │    ├── transitions.ts
│    │    ├── utils.ts
│    │    ├── zIndexes.ts
│    ├── heading.ts
│    └── utils.ts

🍭 Tips (You can change...)

  • Profile image! (replace file in /content/assets/profile.jpg)
  • Favicon image! (replace file in /content/assets/felog.png)
  • Header UserName
  • Utterances repository! (replace repository address in /gatsby-meta-config.js)

🤔 currently writing in the Medium ...

If you are currently writing in the Medium, consider migration with medium-to-own-blog!

🐛 Bug reporting Issue

Issue

🎁 Contributing

Contributing guide

LICENSE

MIT

Project by @songc