Starting new blog site

Modern website development technologies are changing so rapidly that I wanted to catch up and try one of the trendy technologies called JAMStack to develop my new blog site. That is why I am starting over this new blog site. My old blog is still here.

I adopted gatsby-blog-starter from Gatsby to develop my blog site, and Netlify to deploy to. It seems that they are getting along very well and popular.

All my blog posts are in Markdown, so I’m using gatsby-transformer-remark plugin that lets me query my Markdown files using GraphQL to show up.

One slight modification on post’s frontmatter section was done to avoid unnecessary loading of syntax highlight css files for posts that contain no code snippets. I added code entry in the frontmatter section of markdown and get the value of it in blog-post.js template’s grapql section like below, to see if the template will have to load the syntax hightlighting css files.

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        code
      }
    }
  }
`

If a post has any code snippet to syntax-highlight, it is added code: "yes" in the frontmatter section of the markdown to inform the blog-post template to load necessary css files. Otherwise, posts don’t load the css files.

Written by Sangche. Github