Upgrade as of May 1st, 2023 to Gatsby 5.8.1
- ๐ Serverless Functions
- ๐ Authentication (with Netlify Identity)
- ๐ Authenticated Serverless Functions
- ๐ป External Provider login with GitHub, Bitbucket, Google, etc.
- ๐ Protected Routes
- ๐๐ผ Dynamic Client side Pages in Gatsby (enabling all the above)
- ๐ต๐ผโโ๏ธ Hide API Secrets from being exposed to Frontend
This is starter template for a full featured marketing and blog website based on the following:
- Gatsby Starter Default
- How To Set Up a Gatsby Project with TypeScript
- Gatsby
- TypeScript
- TailwindCSS and TailwindUI
- HeroIcons
- Hero Patterns
- HeadlessUI
- unDraw for illustrations
- MDX and Markdown
- ESLintfor type-checking
- Schema.org and JSON for Linking Data
- Open Graph used by Facebook
- Twitter Cards
- Full-featured blog with frontmatter (title, description, author, date, image, tags)
- Tags index page and individual tag pages
- Pagination in posts and tag pages
- Support for RSS feed, sitemap and robots.txt
- Automatic optimization of images in Markdown/MDX posts
- SVG design (unDraw, Hero Patterns, HeroIcons)
- Support for code syntax highlighting
- Manifest and offline support
- Contact form using sendgrid email and Gatsby functions
- Full SEO support (via Gatsby v4.22.0 Head ) including Open Graph, Twitter Cards and Schema.org via JSON-LD
- Tailwind Css v3.0.7, for super styling
- Clone your own version of the starter template or fork the repository. Run
yarn
thenyarn build
oryarn develop
. - The default colour scheme is purple to match the Gatsby logo. Change to your preferred hue by doing a global search and replace of '-gray-' to your favourite colour.
- The home (landing) page consists of a number of components (Hero, Feature, CTA, ...) - edit these components in
src/components
to customise. - The
/contact
page displays an OpenStreetMaps map via Leaflet - customise by changing to your preferred set of coordinates. gatsby-config.js
has all the site parameters - edit site metadata to suit.- Create new MDX pages in
src/mdx
(using either.md
or.mdx
extension). Add React components to MDX in thesrc/pages/{mdx.slug}.tsx
file. - Any content created in the
src/mdx/blog
subdirectory will automatically be a blog post. Usesrc/mdx/blog/2000-01-01-template.md
as a base for creating a new blog post. - If you create a new tag (eg.
newtag
) a new tag page will be created ie./tags/newtag
. The/tags
page will enumerate all tags. - If you want to change the navigation menu, edit
src/components/header.tsx
. Similarly, editsrc/components/footer.tsx
to customise the footer. - If you make a lot of changes, use
yarn lint
andyarn type-check
to check everything is okay.
Using react spring for menu animations from desktop to mobile, image gallery useChain animations for hidden gallery's display
๐ธ This website is built as static HTML with React component-modular Docker Container builds, using React components with GraphQL, Built with WebPack. Including a user data, todo's backend. The data structure is using a second github repo for json data on the fly with OctoCat Rest and a GitHub App for Auth.
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.
Feel free to reuse any part of this repo to create your own Gatsby site.
A Gatsby v4 ๐ธ 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.
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
- React Spring for Animated Menus, Blogs Lists and Image Gallery's
- 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
- 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 start
Get an optimized production build for your site generating static HTML and per-route JavaScript code bundles.
yarn build
gatsby serve โ Gatsby starts a local HTML server for testing your built site.
yarn serve
Lint the code according to eslintrc file, for consistency.
yarn lint
Remove the .cache and public for a scratch compile.
yarn clean
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