Minimalistic Gatsby theme, mobile and SEO friendly and supports author, tag and static pages
gatsby new gatsby-blog akanshgulati/gatsby-theme-ghost- Code Snippet Support - Integration with remark-prismjs for beautifying code snippets on posts
- 100% performance optimisation - It has 98+ for both mobile and desktop as per Google lighthouse benchmarks
- Responsive lazy loading of images for desktop and mobile
- Preloading of important resource to improve Critical Rendering Path of page load
- Retina-rich images for iOS devices to prevent any blur images.
- Async loading of non-essential scripts like Google Analytics, etc.
- RSS Generator - Creates RSS for posts to be easily accessible by any RSS reader
- SEO Friendly - SEO score of the posts and entire website is 98+
- Sitemap - Generates sitemap for the posts, author page, tag page and static pages.
- Structured data - Contains JSON-LD format information about the content
- Alt info - All the images itself has alt attribute as per title of the image.
- Title info - Links has title attributes for better understanding of link
- Social Ready - All essential
meta-tagsadded for sharing posts and website over Facebook, Twitter, Instagram, etc. websites - Analytics - Integration of Google Analytics for analyses purposes.
- Mobile Friendly - Posts and rest of the pages are mobile friendly to be easily readable.
- Accessibility - Scores 98+ for the posts and home page.
- Deploy Ready - Contains configuration
netlify.tomlfor deploying on Netlify directly. - Customisations - Easy to customise home page, posts and other elements of website.
- Comment System - Integration of the Disqus commenting system
yarn dev- Runs local website with hot reloading by default at
8000port - Runs GraphQL for debugging at
localhost:8000/__graphqlpath
Change the website configuration at utils/siteConfig.js file.
- Add
Disqusshort name for enabling comments on posts - Update the
navigationlinks shown in header of website - Update username of the Twitter and Facebook for icons shown in header of website
module.exports = {
siteUrl: `https://gatsby-theme-ghost.netlify.com`, // Site domain. Do not include a trailing slash!
postsPerPage: 12, // Number of posts shown on paginated pages (changes this requires sometimes to delete the cache)
siteTitleMeta: `Gatsby Theme Ghost`, // This allows an alternative site title for meta data for pages.
siteDescriptionMeta: `Minimalistic Gatsby theme for blogs`, // This allows an alternative site description for meta data for pages.
siteTwitterHandle: `@akanshgulati`,
siteFacebookHandle: `akanshgulati`,
language: `en`
// ...- Create a directory for every post under
src/postsdirectory, having a markdown file (.md extension) - Add following meta information:
title*: The title of the postdate*: The creation date of the markdown fileslug*: Url of the postdraft*: Acceptstrue/falseas value for visibility of the posttags*: Addtag_idof different tags inyamlformatauthor*: Addauthor_idof authorcomment*: To show comment on the page bottomfeature_image*: The URL of the image shown at the top of the articlecreated_at*: Date of the creation of the post (same as date above)published_at*: The date of the publishing of the postupdated_at*: The date of the updating of the post-
- Add all images and other media content in the same directory as markdown file.
Note: Create all tags and authors markdown files before adding it in post.
- Create a markdown file by the new tag name under
src/tagsdirectory. - Add following meta information:
tag_id*: The id which is mapped with post's tagsname*: Name as shown on posts if addedslug*: Url of the tag pagedescription: Description shown on the tag pages before the list of posts
- Create a markdown file by the new tag name under
src/authorsdirectory. - Add following meta information:
author_id*: The id which is mapped with post's author namename*: Name as shown on posts if addedslug*: Url of the author pageprofile_image*: Url of the author image for each post on home page and author page.description: Description shown on the author pages before the list of poststwitter: Username of the Twitter for author pagefacebook: Username of the Facebook for author pagewebsite: URL of the personal website of the author
- Create a markdown file by the new tag name under
src/pagesdirectory. - Add following meta information:
title*: The title shown at the top of the pagedate*: Date of creation of the pagedraft*: Decides if the page is to be shown to public, can have true/false valueslug*: URL of the pagecreated_at*: Date of the creation of the page (same as date above)published_at*: The date of the publishing of the pageupdated_at*: The date of the updating of the page
- Add body content of the page after the meta information
*Required
.
โโโ plugins
โ โโโ gatsby-plugin-ghost-manifest
โโโ public
โโโ src
โ โโโ authors
โ โ โโโ akansh.md
โ โโโ pages
โ โ โโโ about
โ โโโ posts
โ โ โโโ best-practises-to-select-cdn
โ โ โโโ ...
โ โ โโโ ...
โ โโโ tags
โ โ โโโ javascript.md
โ โโโ components
โ โ โโโ common
โ โ โโโ meta
โ โโโ styles
โ โโโ templates
โ โโโ utils
โ โโโ rss
โโโ static
- plugins: Contains custom plugins created for Gatsby
- public: Contains build files accessible over web
- src: Contains React components as well as content of blog as followed
- authors: Has markdown files for each author specifying social links, image, name, etc.
- pages: Has directory for each static page in markdown format
- posts: Has directory for each blog post having images and markdown format post content
- tags: Has file for each tag having description, slug, featured image, etc. information
- components: Has React components for different sections of the website
- styles: Has CSS(stylesheet) file for the blog
- templates: Has template in React for post, static page, author page and tag page.
- utils: Has RSS generator script and site configuration.
- static: All the content is copied directly in the public folder on build, stores website favicon, robots.txt file and other files required at root of publicly accessible directory.
- Previous and Next post widget
- Add subscription widget
- Netlify CMS integration
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent