Personal-site NPM

Summary

Stack
Features
Guide
Credits
Contribute

🔧 Stack

🔌 Features

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

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).
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.

How edit metatags of a post

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

How add a translated version of a post

Choose in the content path 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.

How change theme

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.

📃 Credits

404 page's image by Freepik

🤝 How contribute

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!

Based on Gatsby starter developer blog