🎁 
- 🚋Serverless Functions
- 🔏Authentication (with Netlify Identity)
- 🔐Authenticated Serverless Functions
- 😻External Provider login with GitHub, Bitbucket, Google, etc.
- 🏠Protected Routes
- 👋🏼Dynamic Clientside Pages in Gatsby (enabling all the above)
- 🕵🏼♂️Hide API Secrets from being exposed to Frontend
No added external Style sheets no more Bluma which as of March 1, 2020 to March 6th I removed and, used the below to style my site. That was fun! My first attempt using my own styling Globally.
Styled Components 💅 with custom React Hooks screen window.matchMedia mediaQuery's 💍
Beautiful media queries better than CSS @media for styled-components with ability to specify custom breakpoints.
Gallery and Logo Grids with custom-screen mediaQuerys 🍱 Masonry Post 💅.
styled-css-grid 🍱
A tiny (~2kb) [CSS grid] layout for React, built with [styled-components] 💅.
JavaScript Standard
🍸 This website is built as static HTML with Gatsby component-modular Docker Container builds using React components and GraphQL, Built with WebPack. Including a user data backend on FaunaDB.
Served on Netlify via a continuous deployment (CD) workflow. Pull requests are automatically built into preview apps, while commits to the master branch trigger the production build and deploy onto Netlify’s CDN edge node infrastructure. Since the whole site is just a bunch of static files copied onto multiple CDN nodes around the world, time to first byte (TTFB) is consistently fast at around 1ms to 2ms. Instant Notifications through my Slack Bots or GMail and phone notifications using Netlify Functions for my Mansbooks.com publiuslogic.com workspace.
🚀 This repo powers the Gatsby site hosted at publiuslogic.com. I use it to write about my personal interests, ranging from theoretical physics and spiritual learning to sustainability, web development and spending time outdoors... oh and not to forget breaking conventions like a Gatsby Site with Json-Ld per template for SEO, Internet Positioning.
The site is built with Gatsby, Bulma and styled-components. It's fully responsive, relies heavily on React Hooks for stateful components such as Image Gallery's, Modal's and ToTop & ToBottom. Prism for syntax highlighting, withUtterances for blog post comments and Lunr for custom search.
Feel free to reuse any part of this repo to create your own Gatsby site.
A Gatsby v2 🗸 and Netlify CMS 🗸 powered generic business website starter based on gatsby-starter-netlify-cms 🗸
🔥 No run time dependency or vulnerable server stack required Pre-built pages served over a CDN for fastest time to first byte Fast and cheap CDN scaling results in ultra-high availability worldwide Server-side processes abstracted into microservice APIs for reduced attack surface areas Modern Continuous Deployment (CD) Git workflows with instant rollbacks Headless CMS for complete separation from your app/site and with full version control Modern authentication methods such as OAuth 2 for ultimate security.
🔐 A Custom Styled and Build for Publius, a component used to authenticate with Netlify's Identity service. 🆔 Live demo 🗸
For a lower level library to the underlying GoTrue 🗸 API, see gotrue-js 🗸
Utilizing Netlify Identity in Gatsby to make public and private pages easily.
Learn more about this service from this Blog Post 🗸
It follows the JAMstack architecture 🗸 by using Git as a single source of truth, and Netlify 🗸 for continuous deployment, and CDN distribution.
Static + content management = ❤️ 🗸
🖥️ Netlify CMS is Always the latest Netlify CMS GitHub repo pull, with my custom Webpack hashed build, not the Gatsby plugin and netlify-cms node module way; which builds it into the frontend = slowing Gatsby way down; TEST it to see for yourself.
My custom dark build of the Netlify Identity Widget is used on the Gatsby frontend and in my git-gateway back-end.
Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content.
An integrated part of your Git workflow Content is stored in your Git repository along side your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.
❤️ Netlify CMS is built as a single-page React app. Create custom-styled previews, UI widgets, and editor plugins or add backends to support different Git platform APIs. My Netlify CMS backend will build and add Pages, Posts, My layout components with Event data for Bulma GCal fullCalendar localized events, Notifications, Authors, Products, Site Updates and charts data using charts.js displaying build, sales and analytics charts data on individual pages and posts. All edited from a CMS Backend on a Static Website!
✔️ Complete Website Suite - Pages = Home, Blog, About, Privacy, Sitemap and Contact
- Netlify CMS for Content Management
- Netlify Identity for Authentication
- FaunaDB for Authentication - Users Backend and Admin
- SEO Friendly (Sitemap, Schemas, Meta Tags, GTM etc.)
- All Twitter Widgets, Meta and SEO
- Styled Components, screen mediaMatch mediaQuerys & Bulma for styling
- Table Of Contents, on or off through frontmatter
- Tags, Categories and a RSS Feed for Blog
- Time to Read tags categories and published time meta
- Comments with React withUtterances as GitHub Issues
- Follow, Mention, Star and Fork GitHub buttons
- Share Support
- Elastic-Lunr Search
- Pagination for Blog and Posts Previous Next
- Contact Form (Lambda Netlify Forms)
- Easy Configuration using
config.jsfile
PubliusLogic has a GlobalContextProvider wrapper for its light and dark Theme, Users{CTX} and FaunaDB{CTX}
A custom React Hook to help you implement a "dark mode" component for your application.
The user setting persists to localStorage.
❤️ it? ⭐️ it on GitHub or Tweet about it.
PubliusLogic is using use-dark-mode and its suggested install instructions with gatsby-plugin-dark-mode | GatsbyJS, plugin for Gatsby integration injecting noflash.js.
- Node
- Gatsby CLI (globally installed)
Create your own project with Gatsby CLI:
gatsby new yourbusinessname https://github.com/donaldboulton/publiuslogic.git Start a hot-reloading development environment accessible at localhost:8000
yarn startGet an optimized production build for your site generating static HTML and per-route JavaScript code bundles.
yarn buildgatsby serve — Gatsby starts a local HTML server for testing your built site.
yarn serveLint the code according to eslintrc file, for consistency.
yarn lintRemove the .cache and public for a scratch compile.
yarn cleanTo personalize and configure this Starter open data/config.js file and replace the default values.
module.exports = {
siteTitle: 'Gatsby Starter Publius', // Site title.
siteTitleAlt: 'Business', // Alternative site title for SEO.
siteLogo: '/logos/icon-512x512.png', // Logo used for SEO and manifest.
siteUrl: 'https://publiuslogic.com', // Domain of your website without pathPrefix.
// Do not use trailing slash!
pathPrefix: '/', // Prefixes all links. For cases when deployed to example.github.io/gatsby-starter-business/.
siteDescription: 'Leverage Gatsby Publius Starter for fun or your Business.', // Website description used for RSS feeds/meta description tag.
siteRss: '/rss.xml',
siteFBAppID: '', // FB Application ID for using app insights
googleTagManagerID: '', // GTM tracking ID.
disqusShortname: 'mansbooks-1', // Disqus shortname.
userName: 'Donald Boulton',
userTwitter: 'donboulton',
userLocation: 'OKC, Oklahoma',
userDescription: '',
copyright: 'Copyright © Gatsby Starter Publius 2019. All Rights Reserved.', // Copyright string for the footer of the website and RSS feed.
themeColor: '#1d1d1d', // Used for setting manifest and progress theme colors.
backgroundColor: '#1d1d1d', // Used for setting manifest background color.
}Clicking the button will ask for authentication via GitHub, which will create a repo in your github account with this starter. Then, it will build and deploy the site to Netlify.
💫
You can read up on how to set up Identity(Authentication for CMS User) here How To Set Up Netlify CMS