This template is based on the awesome Gatsby's default starter.
To learn more about Gatsby go to https://www.gatsbyjs.com/.
The live example of this blog template can be found here: https://gatsbyjs-blog-template.netlify.app/
Note: this page will feature all of the latest changes made to this template, so you can see them work.
This template is a minimalist blog template with the following features:
- Simple blog post creation wih markdown.
- Tags can be added to each post to group them together.
- Post history navigation with pages. Additionally the same navigation of pages with tags.
- About me page written in markdown to tell the world about yourself.
- Search bar implemented with elasticlunr to help readers find a specific blog by title or tag.
- Support for multiple languages.
- Automatic RSS feed creation from blog posts.
If you wish to take this template and modify it, go ahead. Some features may be added in the future, so this list could change.
If you just want to use it as it is and know it's limitations, then those are the following:
- There is no image preview added to each post, like some blogs do.
- There is no image preview when sharing posts on social media.
Show quick start guide
-
Copy this repository
Use the Gatsby CLI to create your new blog.
# create a new Gatsby site using the default starter gatsby new my-default-starter https://github.com/davidlunadeleon/gatsby-blog-template
or
git clone https://github.com/davidlunadeleon/gatsby-blog-template cd gatsby-blog-template npm install
-
Change your configuration
You probably want to change the configuration of your new blog to make it your own, so these are some thing to change:
- In
gatsby-config.js
insiteMetadata
:- Title: title of your blog. This will be used as your 'logo' and site name in each tab the site is open.
- Description: short description about your blog and it's purpose.
- Author: your name or alias.
- Further down in the same file in
gatsby-plugin-sharp
:- Name: long or detailed of your blog.
- Short name: short name of your blog.
- Icon: icon that will be used in each tab that has the site open.
- In
-
Develop and preview the changes
gatsby develop
This will open your site in
http://localhost:8000/
to preview how it looks. If you are interested in the development part of things, check the Gatsby tutorial. You can open the project in your code editor and explore how it all works. -
Write some blog posts
You should probably modify your
about-me.md
file located atcontent/
(do not change this name). To modify it follow the next steps.The following rules apply to every blog post you make:
- Add posts to the
content/posts/
directory. - All posts have the
.md
file extension. - The name of the file, will be the resulting name of the page in the website. For example
content/posts/test1.md
will result in http://www.my-blog.com/posts/test1. - The following properties are set inside the file. Add these lines to the beginning of each file you make:
--- title: "This is the second test" date: "2020-07-07" tags: ["test", "blog post"] ---
- Note:
about-me.md
does not have any tags in it. - After adding the post data, you can write anything you want below. To see examples check the files in
content/
- Add posts to the
See Gatsby's guide on how to deploy: https://www.gatsbyjs.com/docs/deploying-and-hosting/.
Specific pages:
- Add About me page.
- Add Posts page.
- Add Home page.
- Add Projects page.
- Add custom 404 page.
Templates:
- Add template for a Blog Post page.
- Add template to create page with list of blogs.
- Add template to create page with list of blogs filtered by tag.
- Add template to create page with list of projects.
- Add tempalte to create page with a specific project.
Components:
- Add search bar component to lookup posts.
- Add header component with nav bar for site navigation.
- Add pagination component to show number of pages and links to the previous or next page.
- Add tags component to display list of tags present in a blog post.
- Modify footer component to display site information.
- Modify footer component to show links to social media.
- Add language selection in navbar
General:
- Add image preview when sharing to social media.
- Add multiple language support
- Add RSS feed creation
This Gatsby blog template is licensed under the 0BSD license. To read more about it see the LICENSE file.