Theme 的引入使得 Gatsbyjs 更加易用。使用 Gatsby Theme 比 Starter 建站,步骤更简单,也利于后期维护,个性化定制也更方便。

一、本地部署 Gatsby (非必须,因 Theme 而异,看说明)

全局安装命令行接口 Gatsby CLI

npm install -g gatsby-cli

创建存放文件的文件夹

c:/users/Github

导航到文件夹

cd c:/users/github

创建一个最基本的Gatsby站点

 gatsby new inote.xyz

导航到文件夹

cd inote.xyz
cd c:/users/github/inote.xyz

启动开发模式

gatsby develop

访问http://localhost:8000 测试项目是否成功


二、用 Git  把本地项目推送至 Github

导航至inote.xyz

cd c:/users/github/inote.xyz

删除旧的.git 文件夹并将本地目录初始化为 Git 存储库

rm -rf .git && git init

将文件添加到新的本地存储库中,为第一次提交准备文件

git add .

提交本地存储库中暂存的文件

git commit -m 'First commit'

在 Github 创建 Repositories inote.xyz,自定义名称和是否公开

在 GitHub 存储库的“快速设置”页面的顶部,单击剪贴板图标以复制远程存储库URL,然后添加将在其中推送本地存储库的远程存储库的URL

git remote add origin https://github.com/xiyizhou/inote.xyz.git

验证 URL

git remote -v

将本地存储库中的更改推送到 GitHub

git push -u origin master

三、 把项目从 Github 部署到 Netlify

用 Github 账号登录 Netlify

选择 New Site From Git,授权 Netlify 使用 Github

选择 对应的 Repository inote.xyz

配置

Branch to deploy: master

Build command:gatsby build

Publish directory:public/

点击 deploy site,等待 Netlify 自动部署完成.

后续配置

设置自定义域名,启用 SSL。建议使用 Netlify DNS,只需要在域名商处修改 DNS。netlify 会添加完成A 记录和came 。

启用 Identity ,修改 Registration preferences 为 Invite only,防止他人不经邀请修改项目。

如果要使用 Netlify CMS 启用 Git Gateway

如果 Algolia 等要使用密钥,可以在 Environment variables 配置。

要引用 js 代码,可以在 Post processing 中配置。

用 Github desktop pull 把项目pull到本地


四、安装主题,以 Casper 为例

导航到inote.xyz目录

cd c:/users/github/inote.xyz

安装主题

npm install gatsby-theme-casper

编辑inote.xyz根目录下gatsby-config.js配置主题

module.exports = {
  // add plugin gatsby-theme-casper,注意引号
  plugins: [`gatsby-theme-casper`],

  // setup your siteMetadata, further described below,注意不要把原主题的信息删除
  siteMetadata: {
    title: 'iNote',
    description: 'LIFE=ALPHA×PRINCIPLE×TIME',
    coverImage: 'img/blog-cover.jpg',
    logo: 'img/ghost-logo.png',
    lang: 'en',
    siteUrl: 'https://inote.xyz',
    facebook: 'https://www.facebook.com/inote_xyz',
    twitter: 'https://twitter.com/inote.xyz',
    showSubscribe: false,
    mailchimpAction: 'https://twitter.us19.list-manage.com/subscribe/post?u=a89b6987ac248c81b0b7f3a0f&id=7d777b7d75',
    mailchimpName: 'b_a89b6987ac248c81b0b7f3a0f_7d777b7d75',
    mailchimpEmailFieldName: 'MERGE0',
    googleSiteVerification: 'GoogleCode',
    footer: '',
    postsPerPage: 6,
  },
}

在根目录创建content文件夹,用于存放 markdown 文档。

content文件夹下创建author.yaml

- id: XiYiZi
  avatar: avatars/xiyizhou.jpg
  bio: We Will Sing In The Sunshine
  twitter: inote.xyz
  facebook: inote_xyz
  website: https://inote.xyz/
  location: Magee • Mississippi
  profile_image: img/authbg.jpg

content 文件夹下创建tag.yaml

- id: Alpha
  description: Never forget why you started, and you can     accomplish your mission
  image: img/alpha.jpg
- id: Principle
  description: Principles are ways of successfully dealing with reality to get what you want out of life
  image: img/principle.jpg
- id: Time
  description: People of all abilities is the mixture of patience and time
  image: img/time.jpg

content中创建 markdown 文章,文章模板如下。

---
layout: post
title: Github Source
image: img/xiyizhou.jpg
author: XiYiZi
date: 2019-03-10T10:00:00.000Z
draft: false
tags:
  - Time
---

my blog post content

content文件夹中创建文件夹img 存放图片。

content文件夹中创建文件夹 avatars 存放头像。

启动开发模式

gatsby develop

更多配置信息参考

module.exports = { 
  siteMetadata: {
    title: 'Ghost',
    description: 'The professional publishing platform',
    coverImage: 'img/blog-cover.jpg',
    logo: 'img/ghost-logo.png',
    /**
     * Specifying a valid BCP 47 language helps screen readers announce text properly.
     * See: https://dequeuniversity.com/rules/axe/2.2/valid-lang
     */
    lang: 'en',
    /**
     * blog full path, no ending slash!
     */
    siteUrl: 'https://gatsby-casper.netlify.com',
    /**
     * full url, no username, optional
     */
    facebook: 'https://www.facebook.com/ghost',
    /**
     * full url, no username, optional
     */
    twitter: 'https://twitter.com/tryghost'
    /**
     * hide or show all email subscribe boxes
     */
    showSubscribe: true
    /**
     * create a list on mailchimp and then create an embeddable signup form. this is the form action
     */
    mailchimpAction: 'https://twitter.us19.list-manage.com/subscribe/post?u=a89b6987ac248c81b0b7f3a0f&id=7d777b7d75',
    /**
     * this is the hidden input field name
     */
    mailchimpName: 'b_a89b6987ac248c81b0b7f3a0f_7d777b7d75',
    /**
     * name and id of the mailchimp email field
     */
    mailchimpEmailFieldName: 'MERGE0',
    /**
    /**
     * Meta tag for Google Webmaster Tools
     */
    googleSiteVerification: 'GoogleCode',
    /**
    /**
     * Appears alongside the footer, after the credits
     */
    footer: 'is based on Gatsby Casper',
    /**
     * adjust posts per page in pagination
     */
    postsPerPage: 6,
  },
}

五、自定义

升级 Gatsby,在package.json中查看Gatsby版本,升级到最新版本。

cd c:/users/txtid/onedrive/nutstore/github/inote.xyz
npm i gatsby@latest

升级Gatsby 相关安装包

查看相关安装包版本信息

npm outdated

全部升级

    npm install -g

比较版本信息后,决定是否升级,如果升级命令如下,举例如下。

    npm i gatsby-plugin-google-analytics@latest gatsby-plugin-netlify@latest gatsby-plugin-sass@latest

安装插件的对等依赖,比如你安装了插件 gatsby-plugin-typography,  你同时也需要安装他的插件。

npm i typography react-typography

更新主题

npm install --save gatsby-theme-blog

使用Shadowing

自定义原有组件。比如要修改 gatsby-theme-casper/src/components/bio.js (目录在node_modules\gatsby-theme-casper)在 src 中创建user-site/src/gatsby-theme-casper/components/bio.js 进行对应修改就会覆盖主题对应内容