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.
- 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
- Create a folder in the
contentpath. 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). - In this folder create a file
index.md. - At the beginning of file, insert two
---, one above of the other. They are separators to define post's metatags. - 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.
- 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.
| Metatag name | Description | Mandatory (Yes/No) |
|---|---|---|
| title | The title of your post | Y |
| path | (Relative) url path of your post | Y |
| date | Date of your post | Y |
| tags | Tags to which your post belongs | Y |
| excerpt | A brief summary of your post | N |
| cover | Relative path of post's image preview | Y |
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
- Choose in the
contentpath the folder of the post to translate. - 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.