Gatsby's blog starter

Kick off your project with this blog boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.

Have another more specific idea? You may want to check out our vibrant collection of official and community-created starters.

更新

支持travis集成，提供持续构建与自动部署

使用方式：更改generate_rsa.sh、.travis.yml文件中的配置，然后手动执行./generate_rsa.sh可以了，已安装过的用户可以直接copy这两个文件到到自己的项目中使用。

特性

开箱即用
支持系统主题切换(详细查看CSS3 媒体查询-Dark 模式)
TypeScript 支持
RSS 支持
SCSS 支持
Google 分析同级
MarkDown 图片懒加载
MarkDown 草稿支持
自定义主题一键切换
使用FiraCode 英文字体
使用 FontaweSome 图标
git commit 消息检查 commitlint

提供开箱即用的博客模板posts和sample(默认为posts样式),也可以开发自定义模板并修改src/data/config.yml中配置一键切换.

# crate page config
createPageConfig:
  activeLayout: posts
  posts:
    homePath: /posts/page/1
    list: posts-list.tsx
    listPath: /posts/page/:page
    detail: posts-detail.tsx
    detailPath: /posts/:date/:title
    tag: posts-tag.tsx
    tagPath: /tags/:tag
  sample:
    list: sample-list.tsx

posts为默认模板,可修改activeLayout: sample,将会使列表页替换为posts模板的列表页.

🚀 开始

创建一个 Gatsby 项目:

使用 Gatsby 命令后工具创建一个新的站点
```
gatsby new my-blog-starter https://github.com/zhouyuexie/gatsby-starter-quiet
```
开始开发:

切换到你的项目目录并启动
```
cd my-blog-starter/
gatsby dev
```
打开你的编辑器开始编写代码

你的站点运行在 http://localhost:8000!

注意: 这是第二个链接 http://localhost:8000/___graphql. 这是一个可以查询你所有数据的工具,如果你需要更多关于此工具的消息,请查看官方文档Gatsby tutorial.

打开并编辑src/templates/posts-list.tsx文件. 保存后浏览器中会即时刷新.
编译上传

运行 yarn build 编译你的网站,所有静态内容都在./public文件夹中. 如果需要上传到自己服务器,请先编辑./deploy.sh文件增加你的服务器信息,再执行yarn deploy

上传前可以运行yarn local命令本地测试开发模式(没有 hot reload 功能)

🧐 项目里面有什么?

项目目录如下:

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── .babelrc
├── tsconfig.json
├── tslint.json
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── yarn-lock
├── tasks
├── static
├── posts
├── package.json
└── README.md

主要的文件含义:

/node_modules: 项目依赖.
/src: 包含所有的项目源代码,会被编译成静态页面.
.gitignore: git 忽略的文件
.prettierrc: 这是Prettier的配置文件. Prettier 将保持你的代码被正确格式化.
gatsby-browser.js: Gatsby browser APIs文件.
gatsby-config.js: 这是 Gatsby 主要的配置文件,所有插件都在此配置,也包含了 metadata 数据,查看config docs获取更多的信息.
gatsby-node.js: Gatsby Node APIs文件.
gatsby-ssr.js: Gatsby server-side rendering APIs文件
tsconfig.json: typescript 配置文件
tslint.json: typescript 代码检测
tasks: gatsby-node.js相关的任务.
static: 静态文件,会简单 copy 到public文件中提供访问.
posts: MarkDown 格式博客,相关图片引用也在内部文件夹中的images.

其它

关于 MarkDown 的编写请访问: Gatsby 的 MarkDown 使用示例
sitemap(站点图)请访问网站跟路径/site.xml
RSS 请访问网站跟路径feed.xml
移动端使用 Chrome 访问可以添加网站到桌面

obetame / gatsby-starter-quiet

Gatsby's blog starter

更新

特性

🚀 开始

🧐 项目里面有什么?

其它

About

Languages