A customizable personal blog template built with GatsbyJS and Reac

by React

DevBlog

DevBlog is a fully customizable blog template designed for developers (or anyone else) wanting to get into blogging. It comes ready to go and deploy (with ease) or can be edited and extended however you like. The blog is completely statically generated via GatsbyJS, comes with syntax highlighting (via PrismJS) out of the box, and has server-side rendering built-in, among other things.

View demo Download Source

Features

  • Fully responsive
  • Minimalistic
  • Customizable via a config.js file
  • Easy to deploy
  • Statically-generated via markdown files
  • Server-side rendering
  • Syntax highlighting via PrismJS

Setup and Configuration

Setup

1. Install Gatsby CLI

The first step is to get the GatsbyJS CLI installed locally. This can be accomplished by running the command npm install --global gatsby-cli

2. Create a new Gatsby Site using this repo

When creating a new Gatsby site, the CLI allows you to specify a starter, in this case simply provide the URL for this repo. This can be accomplished by running the command gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog

3. Edit or use the template as needed

Now you that you are setup, you can simply use the blog or make edits as needed. For example, run gatsby develop to start up a hot-reloaded development environment availalbe at localhost:8000 or run gatsby build to build an optimized production build. For a complete list of CLI commands for Gatsby, take a look at their documentation.

Alternative Setup

Alternatively, if you wish to simply fork this repo or clone it, then you simply need to run npm install and then gatsby develop afterwards and you'll be up and running.

Configuration

Basic configuration can be done via the config.js file in the root of the project repo. Through this file you can make edits to the primary color of the blog, add a blog author and description, and more. The defaults are as follows:

module.exports = {
  title: 'Dev Blog', // Required
  author: 'Ryan Fitzgerald', // Required
  tagline: 'Full-stack Web Developer',
  primaryColor: '#3498db', // Required
  showHeaderImage: true,
  showShareButtons: true,
  postsPerPage: 5, // Required
  social: {
    website: 'https://ryanfitzgerald.ca',
    github: 'https://github.com/ryanfitzgerald',
    twitter: 'https://twitter.com/ryanafitzgerald',
    linkedin: 'https://ca.linkedin.com/in/ryanafitzgerald'
  }
};

Note: Any configuration option labelled as "Required" is needed for basic presentational purposes. Anything without the "Required" comment can be removed should you not want it used.

Understanding the configuration variables

The configuration variables referenced above are used as follows:

Variable Description of Use
title The title of the blog. This is used for the page title primarily.
author The author of the blog. This is used for the header name and page title.
tagline The tagline of the author. This is used for the header under the author.
primaryColor The primary color of the blog.
showHeaderImage Flag to show the header image or not.
showShareButtons Flag to show social media share buttons on each blog post or not.
postsPerPage The number of posts per page on the blog homepage. This is used for pagination.
social Social media profiles of the blog author. Currently only personal website, Github, Twitter, and LinkedIn are supported.

Changing the main header image

To change the default header image, simply override the main.jpg file in the /src folder.

Changing the favicon

To change the default favicon, simply override the favicon.ico file in the /src folder.

Creating New Posts

All blog posts can be found in /src/pages and are statically built once the gatsby build command is run. To create a new post, simply create a new folder in /src/pages with the name of the url you'd like to have. For example, if you wish to have the url appear as myblog.com/hello-world you would create the folder as hello-world. Once the folder is created, simply create an index.md file within it.

The top of the pages must all contain the same markdown which tells Gatsby the needed information about the specific post. The basic template is:

---
title: New Beginnings
date: "2018-07-01"
featuredImage: './featured.jpg'
---

This top portion is the beginning of the post and will show up as the excerpt on the homepage.

<!-- end -->

In the above code snippet all that is required is the title and the date. The featured image is optional and can be added by simply adding an image to the page folder you just created and referencing like the above example. The excerpt portion is optional as well and if you do not use the <!-- end --> marker, the first bit of the post will be used as the excerpt automatically.

This template ships with 3 blog post examples which contain everything from code snippet usage, inserting images, using featured images and excerpts, and more.

Deploying

Once you are ready to deploy the blog and make it live, you have a couple of options available to you.

Manual Deploy

Manually deploying the blog simply requires you run a gatsby build in order to create a production build. After that, you can use any server you'd normally a React app to, such as a Digital Ocean droplet or an AWS instance. All that is required is some way to serve the static files.

If you are unfamiliar with deploying React applications, there are a number of other options.

GitHub