Raink is a Progressive Web App (PWA) blog starter for Gatsby.js.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
content
scripts
src
static
.babelrc
.editorconfig
.eslintignore
.eslintrc.json
.gitignore
.prettierrc.json
Dockerfile
LICENSE
README.md
README_CN.md
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
package-lock.json
package.json
stats.json
webpack-stats.json
yarn.lock

README.md

Raink - Personal blog starter for Gatsby.js

Chinese README

Preview and feature

Lighthouse score:

Lighthouse

  • Markdown posts, pages and fragments
  • Table of contents
  • Themes switch (dark and light)
  • Contact form
  • Searching (by Algolia)
  • Progressive Web App (PWA)
  • Favicons generator
  • RSS, Sitemap, SEO
  • Social sharing
  • Google analytics
  • Disqus and FB comments
  • Headroom
  • Filtering by tag
  • multi-language
  • Support PWA notification
  • Resume page

Getting started

Enable external services (Required)

The starter uses external services for some functions: contact form, comments, searching, analytics. To use them you have to secure some access data. Don't worries, all services are free or have generous free tiers big enough for a personal blog.

The starter needs an .env file like this in the root folder:

GOOGLE_ANALYTICS_ID = ...
ALGOLIA_APP_ID = ...
ALGOLIA_SEARCH_ONLY_API_KEY = ...
ALGOLIA_ADMIN_API_KEY = ...
ALGOLIA_INDEX_NAME = ...
FB_APP_ID = ...
DISQUS_ID = ...

The contact form does not need any settings it should work out of the box if you deploy the website to Netlify.


There are various ways to get started with Raink:

Deploying with Docker

NOTE: Your GatsbyJS site static files will be created into ~/raink/public automatically.

Clone this repository:

$ git clone https://github.com/izuolan/raink.git ~/raink && cd $_

deploy (production)

This command will be build your site and generate app icons, then run a monitor to monitoring the content folder, automatically build and redeploy when file changes:

$ docker run -dit --restart=always --name raink \
    -v ~/raink:/site \
    -v ~/content:/site/content \
    zuolan/raink deploy

# Check the container build log
$ docker logs -f raink

Now, everything is ready, you can host the ~/raink/public folder to any http service, such as Github Pages.

develop (development)

Use develop command to deploying your site, then open SERVER_IP:8000:

$ docker run -it --rm -p 8000:8000 \
    -v ~/raink:/site \
    -v ~/content:/site/content \
    zuolan/raink develop

build and serve

Use build command to building your site, then the static files will output the public folder:

$ docker run -it --rm \
    -v ~/raink:/site \
    -v ~/content:/site/content \
    zuolan/raink build

Use serve command to run a http serve:

$ docker run -dit --name raink-public \
    -p 8000:8000 \
    -v ~/raink:/site \
    -v ~/content:/site/content \
    zuolan/raink serve

other

For example to install a new NPM-module:

$ docker run -it --rm \
    -v ~/raink:/site \
    -v ~/content:/site/content \
    zuolan/raink yarn add gatsby-transformer-yaml
Deploying with Netlify (Recommended, Serverless)
  1. Fork this repository, and sign in Netlify.

  2. Create a new site and select your forked repository.

  3. Set .ENV in Netlify.

    How

    Set ENV in Netlify

  4. Keep all default Basic build settings, just click Deploy site button.

That's all.

Deploying from Source
$ git clone https://github.com/izuolan/raink.git && cd $_
$ npm install --global gatsby-cli
$ yarn install
$ yarn develop

Thanks

Note: This starter forked from an educational project. Some features will be merged into the original project in the future (My code seems terrible, lol).