使用Gatsby Theme创建静态博客

生活 Mar 09, 2020
1

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

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

全局安装命令行接口 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 进行对应修改就会覆盖主题对应内容

席一舟

四野八荒,苦茶清禅。渔樵江渚,浊酒西风。 螽斯蓝寿,稀禾芡菱。嬉笑怒骂,行藏自由。 策马悬崖,雕弓满月。惊涛拍岸,毕力遐方。 银鞍白马,一剑寒霜。此生谁料,咸是妙明。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.