1.0.2 ā¢ Published 4 years ago
gatsby-theme-ghost v1.0.2
š¦ Installation
NPM
npm install gatbsy-theme-ghost
YARN
yarn add gatbsy-theme-ghost
Gatsby
gatbsy new gatsby-blog akanshgulati/gatsby-theme-ghost
š„ Features
- 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-tags
added 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.toml
for deploying on Netlify directly. - Customisations - Easy to customise home page, posts and other elements of website.
- Comment System - Integration of the Disqus commenting system
šØāš» Development
yarn develop
- Runs local website with hot reloading by default at
8000
port - Runs GraphQL for debugging at
localhost:8000/__graphql
path
āļø Configuration
Change the website configuration at utils/siteConfig.js
file.
1. Add Disqus
short name for enabling comments on posts
2. Update the navigation
links shown in header of website
3. 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`
// ...
š Adding Content
New Post
- Create a directory for every post under
src/posts
directory, 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/false
as value for visibility of the posttags
*: Addtag_id
of different tags inyaml
formatauthor
*: Addauthor_id
of 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.
New Tag
- Create a markdown file by the new tag name under
src/tags
directory. 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
New Author
- Create a markdown file by the new tag name under
src/authors
directory. 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
New Page
- Create a markdown file by the new tag name under
src/pages
directory. - 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
š Directory Structure
.
āāā 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.
āļø Todo
- Previous and Next post widget
- Add subscription widget
- Netlify CMS integration