Gatsby Theme for Tech blogs by CódigoFacilito
Bootstrap your blog with the power of Gatsby and the Gatsby Theme for Tech blogs. The theme handles all the basic functionality for you.
Quick Start
Install the theme on your Gatsby project
npm install gatsby-theme-tech-blog
Add the theme to yout gatsby-config.js
file:
plugins: `gatsby-theme-tech-blog`
Whatch the magic happen.
Features
The Gatsby Theme for Tech blogs aims to handle all the basic features you would look for in a technical blog. For now, these are the features contained in the theme:
- Transform markdown to HTML
- Automatically generates thumbs for social media
- Code highlight with Prism
- Tagging and categorization
- SEO URLs and metadata
- More to come
Would you like to suggest a feature? Feel free to open an issue with the feature request label.
Configuration
The project looks to provide a solid foundation for you to build on top of it. These are now some of the settings you can tune up:
Option | What it does |
---|---|
contentPath | Path to search for markdown files |
navYMLPath | Path to search for YAML file with navigation items |
basePath | This path will prefix all the paths that the blogs generate |
prefixWithDate | Boolean value, when set to true, post paths will be prefixed with their date |
plugins: resolve: `gatsby-theme-tech-blog` options: prefixWithDate: true // Will generate paths like 2019/12/02/foo basePath: '/posts' // Will generate paths like /posts/2019/12/02/foo
Note: If you set the basePath
value to the root path /
you will only see the template for all the posts if you don't have an index.js
file.
UI configuration
This project uses Theme UI to build the interface, you can configure the theme based on the one that comes with the project which you can find here
Navigation configuration
The items on the nav bar are generated based on the content of the items.yaml
file which can be found on the navYMLPath
which defaults to src/nav-items
.
To add a new item to the nav bar just add an item to the items.yaml
file with the following pattern:
- title: About link: /about
How to contribute
First, fork the repo to your profile, then clone your fork into your local machine.
The tech-blog
repo is a monorepo that contains both the theme project which you can find in the gatsby-theme-tech-blog
folder and a site that you can use to test your changes to the theme, this project is found on the site
folder.
You'll need to use yarn
to manage the repositories, due to the monorepo configuration. To install the dependencies for both the site and the theme:
yarn workspace site installyarn workspace gatsby-theme-tech-blog install
To start the site
project which is linked to the local theme, use this command:
yarn workspace site develop
Once you have made your changes to the theme, submit a pull request to this repo.