博客设置文档 / README

“Borderless” 文档 (英文)

• 安装
• 基本设置
• 撰写文章
  • Markdown YAML Front matter
• 部署

“Borderless”, Gatsby 博客启动器 (主题)

使用 Gatsby 创建的静态网站， Borderless 博客主题。

本文档基于分发到 Github Pages 的版本。

Borderless 演示网站

• 极简设计，无边框，颜色极简
• 创建 Markdown 文章 (Markdown + emoji, ktex)
• 搜索引擎优化 (SEO)
• 支持 Safari 浏览器等文章的阅读器模式
• Google Analytics 支持
• Google Adsense 支持
• Disqus 评论功能

安装

有两种方法可以开始使用此博客。

1. Fork 仓库后使用
2. Clone 仓库后使用

! 重要

不要在 master 分支上工作。

如果您完成了上述步骤，您正在工作的分支是 develop。 在这个 develop 分支上开始工作。您可以修改 develop 分支或从 develop 分支单独创建一个分支。

master 分支用于部署，构建的文件位于此处。 您可以在 develop 分支上工作并使用 deploy 命令进行部署。 deploy 命令会自动部署到 master 分支，该分支没有直接访问权限。

1. Fork 仓库后使用

• Fork 仓库后：

1. Setting > Option - Repository name 将仓库重命名为 “username.github.io”
2. Setting > Branches - Default branch 更改默认分支。选择 develop 并按更新按钮继续。
3. Clone 您的仓库。
4. $ npm i 安装包
5. $ npm start 启动本地开发环境。检查 URL “localhost:8000”

2. Clone 仓库后使用

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

此过程基于 develop 分支克隆仓库。 然后安装所需的包。

$ npm start

启动本地开发环境。 检查 URL “localhost:8000”

基本设置

为您修改默认设置。

修改 ./config.js

config.js 示例：

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',
};

String (String) 值不需要为空 ''。

Disqus 评论、Google Analytics 和 Google Adsense 功能在本地开发期间被禁用。部署后，您可以使用这些功能。

撰写文章

文章是用 Markdown 编写的。

• Markdown
• Emoji 支持
• KaTeX 支持

您的文章将位于 ./_posts 文件夹中。 您的草稿文章将位于 ./_drafts 文件夹中。（草稿文章在本地开发期间可见，但在分发的网络上不可见）。 _posts 文件夹和 _drafts 文件夹必须存在。不要删除这两个文件夹。

文件的标题成为文章的地址。如果输入了日期，例如 Jekyll 的文章文件标题格式，则日期将从地址中排除。

ex 1. ./_posts/first-post.md address: https://junhobaik.github.io/first-post

2. ./_posts/2019-12-31-first-post.md address: https://junhobaik.github.io/first-post

创建带有图像的文章

在 markdown 中嵌入图像时，结构如下：

创建一个地址为 /first-post 的文章的示例。创建 ./_posts/first-post 文件夹后： Markdown 文件标题为 index.md， 将图像文件放在该文件夹中。

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

系列文章

当您如下所示在一个主题上写几篇文章时，您可以使用系列功能来指示该文章包含在系列中。使用系列功能，您将在文章顶部看到一系列文章列表。

• 创建博客，安装
• 创建博客，设置
• 创建博客，分发

如果您这样写文章，请按如下方式编写文件名。

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

下划线 (_) 后面的数字是系列的编号。 下划线 (_) 前面的文件名必须相同。 文件名中必须只有一个下划线 (_)。 不要在下划线 (_) 后混合数字和字母。

Markdown YAML Front Matter

在 Markdown 文章的顶部，输入该文章的信息。在两个 --- 中输入信息，如下所示。

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

contents here...

+ 所有值不包含在 '', "" 中。

Data 示例

# 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 示例

# tags & keywords Examples

## Case 1
tags: onlyOneTag

## Case 2
tags: [tag1, tag2]

## Case 3
tags:
  - tag1
  - tag2

部署

部署前的检查清单：

1. 确保您的 Github 仓库名为 username.github.io。
2. 确保您在 ./config.js 中正确编写了 siteUrl。
3. 确保您正在使用的分支不是 master 分支。（请参阅安装部分以获取相关说明）。

$ npm run deploy

使用上述命令开始部署。提交会自动对 master 分支进行。这需要几十秒，有时甚至几分钟才能反映出来。

您现在可以输入并验证您的地址。