A file-driven generator made with Gatsby.js for creating fast loading, customizable, scalable and SEO-friendly blogs.

If you are looking for a site ready to go in production and with most common features out of the box, you should give a change to this starter! Not every blog needs of a CMS or other complex solutions. This blog is made for who want share its thoughs in minutes without care of SEO, server or database concerns. You can deploy it on the host you want at the cheapest price because it is built only with HTML, CSS, JS and it doesn't need of backend to work. It is mostly designed for blogs and portfolios. But despite the fact that it allows to automates the most common features of these types of site (ex. tags, SEO, archive...), it is high customizable and extensible.

• Stack
• Features
• Guide
• Credits
• Contribute

• Content
  • Posts in Markdown
  • Syntax highlighting
  • Images optimized for fast loading
  • Support for multi-language posts
  • Tags
  • Archive
  • Various available icon sets: Material Design, Font Awesome, Ionicons, Typicons, Github Octicons, Feather
  • Social share buttons
  • Comments (Disqus)
  • RSS Feed
  • Favicon
  • Web App Manifest (manifest.json)
• Style
  • Less styling
  • Responsive design
  • Dark and Light themes
• SEO
  • OpenGraph Tags
  • Twitter Tags for Twitter Cards
  • HTML title and alt attributes for post's cover
  • HTML hreflang attribute for multi-language versions posts
  • Sitemap
  • Roboto.txt file
• Development tools
  • PropTypes for checking data passed to components
  • ESlint for linting
  • Prettier for code style
  • TravisCI support

• How add a post
• How edit metatags of a post
• How add a translated version of a post
• How change theme

1. Create a folder in the content path. Since folder's name will not be used in any part of site, you can rename it as you want in order to organize better your contents (ex. 2019-01-20-my-post).
2. In this folder create a file index.md.
3. At the beginning of file, insert two ---, one above of the other. They are separators to define post's metatags.
4. Between above two separators, insert metatags. They are couples key/value to define additional info useful for process your post. Read here for more info about them.
5. Under the second separator --- write your post using Markdown syntax.

Metatags are additional informations that you provide in your posts to allow them to be processed correctly. Some metatags are used for some site's features and others for SEO purposes. You have to list all fields but you can omit values of non-mandatory ones. Here a table for list them and explain how use each one.

Example

title: My new blog post
path: blog/my-new-blog-post
date: 2019-01-20
tags: [technology, seo, writing]
excerpt: In this post we'll see a post example...
cover: ./preview.png

1. Choose in the content path the folder of the post to translate.
2. Place here the translated version of post and rename the file with the ISO code according to its language (ex. index.it.md, index.de.md).

You've finished! Now in your post you'll get a link to translated version and viceversa.

Metatags for SEO are automatically added in each version of post pages using the ISO code choosen for the filename. Tags will only be added for posts with translated versions. Note that for index.md, the ISO code used in metatags is taken from the config.js' variable defaultLanguage.

Themes available with this starter are in src/style/themes, but you can also create your own following these as example. Import what you prefer in src/style/index.less file.

• 404 page's image by Freepik

Everyone can contribute to enhance this starter! Here a not-exhaustive list of how to do.

• If you are a developer you can improve the code.
• If you are a designer you can propose new themes or enhance the UX.
• If you are a blogger you can propose new features that you would have.
• If you are a user you can improve the guide or give me a feedback.

Even the smallest help is precious and matters to improve this project!