Repository files navigation

This blog uses Next.js for SSR & Firebase Firestore API for storing and fetching data. Create and edit your content in simple custom content managementsystem built with React, Mobx State Tree and Styled Components.

Clone this repo and use it as starting point to create your own fancy blog.

• React
• Next.js
• Firebase Firestore & Auth
• Styled-Components
• Mobx-State-Tree
• Ant Design
• Marksy
• ESLint
• Prettier
• Webpack
• Husky &Lint-Staged

• Posts feed
• Featured posts
• Posts by tags and category
• Multi language support
• Multi author support
• Markdown with ability to use custom React components
• Simple and convenient CMS inspired by Ghost
• CMS is protected by Firebase Auth
• Quick and SEO-friendly responses with SSR
• Good results in Lighthouse

• ClickSet up sign-in method on Authentication section.
• Enablejust Google authentication provider.
• Add your domain (if you have one) toAuthorized domains.

• Go toDatabase section and create Firestore instance.

Firestore is still in beta, but it doesn't make it less awesome.

• Go toRules section in your database and paste configuration from.firebase-rules in project root.
• Publish new rules.

• Create.env at the root of the project. Do not commit this file. It is personal data that should not be available for everyone.
• Go toProject settings in Firebase console (click on the gear icon next toProject Overview).
• Copy data from this page to.env in the following format:

F_PROJECT_ID=<your Project ID>F_AUTH_DOMAIN=<your Project ID>.firebaseapp.comF_API_KEY=<your Web API Key>

In order to be able to initialize database with initial seed we need to generate private Firebase Admin service key.

• Go toProject Settings >Service Accounts and clickGenerate new private key button.
• Save downloaded file asfirebase-service-key.json at project root.** Do not commit this file. It's added to.gitignore by default.

We almost finished. Let's initialize our database with initial data.

yarnyarn run seed

We need manually setup indexes in our Firestore database to be able to make REST requests to our Firebase.

• Go toDatabase >Indexes and create the following index.

We're ready to launch our blog locally.

yarn dev

Blog is up and running onhttp://localhost:3000.

Wait.. But what's about CMS part?

• Go tohttp://localhost:3000/admin and click on"Click to start writing".
• Sign-in with your Google Account in popup window.
• Go toFirebase Console and add author rights to account you just signed in with.
  • CopyUser UID inAuthentication section.
  • Createauthors collection inDatabase
  • Create a record inauthors collection, wheredocumentId is UID of the user andname isid of user inconfig.js file.

• Go tohttp://localhost:3000/admin
• Create new post or edit existing and publish changes.

Licensed under the MIT License, Copyright © 2018-present Alexander Suevalov

SeeLICENSE for more information.