Document (Borderless, en)

"Borderless" Documents (ENG)

Install
Basic Settings
Writing posts
- Markdown YAML Front matter
Deploy

"Borderless", Gatsby Blog Starter(Theme)

Static websites created with Gatsby,
Borderless Blog Theme.

This document is based on the distribution to Github Pages.

Borderless DEMO WebSite

Simple design with minimal color without border
Create Markdown Posts (Markdown + emoji, ktex)
Search Engine Optimization (SEO)
Support Reader Mode in posts such as Safari browser
Google Analytics support
Google Adsense support
Disqus comment function

Install

There are two ways to get started with this blog.

Use after the Repository Fork
Use after the Repository Clone

! Important

Don't work on master branch.

If you go through the steps above, the branch you're working on is develop.
Start working on this develop branch. You can modify the develop branch or create a branch separately from the develop branch.

The master branch is used for deployment, and the built file is located.
You can work on the develop branch and deploy it using the deploy command.
The deploy command automatically deploys to the master branch, which does not have direct access.

1. Use after the Repository Fork

After Fork the Repository,

Setting > Option - Repository name
Rename the Repository to "username.github.io"
Setting > Branches - Default branch
Change the default branch. Select develop and press the Update button to proceed.
clone your Repository.
$ npm i install packages
$ npm start Start local development environment Check URL "localhost:8000"

2. Use after the Repository Clone

$ git clone -b develop https://github.com/junhobaik/junhobaik.github.io.git [SITE_DIRECTORY]
$ npm install

This procedure clones the repository based on the develop branch.
Then install the required packages.

$ npm start

Start local development environment
Check URL "localhost:8000"

Basic Settings

Modify the default settings for you.

Modify `./config.js`

config.js example

module.exports = {
  /** Site MetaData (Required all)*/
  title: `Dev.White`,
  description: `Junho Baik's Development Blog`,
  author: `Junho Baik`,
  siteUrl: 'https://junhobaik.github.io',

  /** Header */
  profileImageFileName: 'profile.png',

  /** Home > Bio information*/
  comment: 'Jr. Web Front-end Developer. / javascript, react ...',
  name: 'Junho Baik',
  company: '',
  location: 'Korea',
  email: 'junhobaik@gmail.com',
  website: 'https://junhobaik.github.io',
  linkedin: '',
  facebook: '',
  instagram: 'https://www.instagram.com/junhobaik',
  github: 'https://github.com/junhobaik',

  /** Post */
  enablePostOfContents: true,
  disqusShortname: 'junhobaik',
  enableSocialShare: true,

  /** Optional */
  googleAnalytics: 'UA-123123123-0',
  googleAdsenseClient: 'ca-pub-5001380215831339',
  googleAdsenseSlot: '5214956675',
};

설정	타입	설명
title	(required) String	사이트의 제목이며, 각 페이지들의 제목에 들어갈 수 있고 Header에서의 Title입니다.
description	(required) String	사이트의 설명
author	(required) String	사이트의 저자
siteUrl	(required) String	해당 웹사이트의 주소를 입력. 배포 시에 해당 주소가 없으면 많은 오류가 발생할 수 있습니다.
profileImageFileName	String	`./src/images`경로에 프로필 사진을 위치한 후 해당 이미지의 파일명을 입력합니다. Header의 Title 옆 이미지에 들어가며 입력값이 없을때는 랜덤한 이미지를 보여줍니다.
comment, name, company, location, email, website	String	Home(index)페이지에서 좌측에 보일 개인정보입니다. 입력하지 않을 시 해당 항목을 출력되지 않으며 모든 값은 문자열로 입력합니다.
linkedin, facebook, instagram, github	String	Home(index)페이지에서 좌측의 개인정보 아래 표시될 소셜 아이콘 링크들입니다. 아이콘 클릭시 해당 링크로 이동하게 됩니다. ID가 아닌 전체 링크를 입력하세요.
enablePostOfContents	(필수) Boolean (true, false)	포스트(게시물)에 목차를 표시할지 설정합니다.
disqusShortname	String	댓글 기능을 활성화 할 수 있습니다. disqus에서 site생성 후 해당 site의 shortname을 여기 입력합니다. 값을 비우면 댓글 기능이 비활성화됩니다.
enableSocialShare	(required) Boolean (true, false)	게시물 하단의 게시글 소셜 공유 아이콘들을 표시할지 설정합니다.
googleAnalytics	String	구글 애널리틱스를 활성화 할 수 있습니다. 본인의 TrackingID를 입력합니다.
googleAdsenseClient	String	GoogleAdsense를 활성화시 구글 애드센스의 Client 입력. 추가적으로 `./static/ads.txt`에서 Client에 해당하는 숫자를 본인의 Client의 숫자로 변경해주세요.
googleAdsenseSlot	String	GoogleAdsense를 활성화시 구글 애드센스의 Slot 입력.

필수가 아닌 String(문자열) 값은 ''로 비워둘 수 있습니다.
비워둔 값은 연결된 기능에 따라서 표시를 생략하거나, 기능이 비활성화될 수 있습니다.

로컬 개발 중에는 Disqus Comments, Google Analytics, Google Adsense 기능은 비활성화되어 있습니다. 배포 후에 해당 기능을 확인 및 사용할 수 있습니다.

Writing posts

게시물(포스트)는 마크다운으로 작성합니다.

Markdown 문법 지원
emoji 지원
ktex 수학 표기법 지원

./_posts 폴더 내에 게시물이 위치합니다.
./_drafts 폴더 내에 임시 게시물이 위치합니다. (임시 게시물은 로컬 개발 중에서는 보이나, 배포된 웹에서는 보이지 않습니다)
_posts 폴더와 _drafts 폴더는 반드시 존재해야합니다. 두 폴더를 삭제하지 마세요.

파일의 제목이 포스트 게시물의 주소가 됩니다. Jekyll 의 포스트 파일 제목 형식처럼 날짜가 들어갈 경우 날짜는 주소에서 제외됩니다.

예시 1. ./_posts/first-post.md
주소: https://junhobaik.github.io/first-post

예시 2. ./_posts/2019-12-31-first-post.md
주소: https://junhobaik.github.io/first-post

이미지 포함 게시물 작성

마크다운 안에 이미지를 포함할 시 아래와 같은 구조로 작성합니다.

first-post 의 주소를 가질 게시물 작성 예시.
./_posts/first-post 폴더 생성 후,
마크다운 파일은 index.md 로 제목을 작성,
이미지 파일들은 해당 폴더 안에 위치시키면 됩니다.

  _posts/
    first-post/
      index.md
      image-file-1.png
      image-file-2.jpg
      ...

Series Posts

위와 같이 한가지의 주제로 여러 글을 쓸때 시리즈 기능을 활용하여 해당 글이 시리즈에 포함된 게시물인 것을 표시할 수 있습니다.
시리즈 기능을 활용하면 게시물의 상단에 시리즈 게시물의 목록이 표시됩니다.

블로그 만들기, 설치편
블로그 만들기, 설정편
블로그 만들기, 배포편

위와 같은 게시물을 작성한다면 파일명을 아래와 같이 작성합니다.

development-blog_1.md
development-blog_2.md
development-blog_3.md

언더바(_) 뒤의 숫자로 시리즈의 번호를 기제합니다.
언더바(_) 이전의 파일명은 동일해야합니다.
언더바(_)는 파일명에서 하나만 존재해야합니다. 언더바(_) 뒤에 숫자와 문자를 혼용해서는 안됩니다.

Markdown YAML Front matter

마크다운 게시물의 최상단에는 해당 게시물의 정보를 입력합니다. 두개의 --- 안에 정보를 입력하며 아래 예시와 같이 입력합니다.

---
title: title here...
date: 2018-01-01
tags:
  - javascript
  - ES6
keywords:
  - keyword1
  - keyword2
---

contents here...

Variable	Description
`title`	(필수값) 해당 포스트의 제목을 입력, `[`, `'`. `"`로 시작해서는 안됩니다.
`date`	(필수값) 해당 포스트의 작성일을 입력
`tags`	(선택) 게시물의 태그(#)를 입력
`keywords`	(선택) SEO meta keywords에 해당하는 것으로 검색엔진의 검색 결과에 추가 반영

+ 모든 값은 '', ""로 감싸지 않습니다.

data Examples

# date Examples

## Case 1
date: 2018-09-01

## Case 2
date: 2018-09-01 22:00:00

## 'Time zone' Not Support
## There is no error but ignores the time zone
date: 2018-09-01 20:00:00 +0900

tags & keywords Examples

# tags & keywords Examples

## Case 1
tags: onlyOneTag

## Case 2
tags: [tag1, tag2]

## Case 3
tags:
  - tag1
  - tag2

Deploy

배포 전 확인 사항

Github 저장소 이름이 username.github.io가 맞는지 확인해주세요.
./config.js 에서 siteUrl을 올바르게 작성했는지 확인해주세요.
혹시나 작업중인 브랜치가 master 브랜치가 아닌지 확인하세요. (해당 관련 설명은 Install 항목을 참고하세요)

$ npm run deploy

위의 명령어로 배포가 시작됩니다. master 브랜치로 commit이 자동으로 이루어지며,
반영되기까지는 수십초 정도, 때로는 최대 수분의 시간이 소요됩니다.

이제 본인의 주소로 들어가 확인할 수 있습니다.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Document (Borderless, en)

"Borderless", Gatsby Blog Starter(Theme)

Install

! Important

1. Use after the Repository Fork

2. Use after the Repository Clone

Basic Settings

Modify `./config.js`

Writing posts

Series Posts

Markdown YAML Front matter

data Examples

tags & keywords Examples

Deploy

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally

Document (Borderless, en)

"Borderless", Gatsby Blog Starter(Theme)

Install

! Important

1. Use after the Repository Fork

2. Use after the Repository Clone

Basic Settings

Modify ./config.js

Writing posts

Series Posts

Markdown YAML Front matter

data Examples

tags & keywords Examples

Deploy

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally

Modify `./config.js`