How I build a blog

I have considered building a blog a long time ago. Now, I finally give it a go. This is my first post in this blog; It's all about the building processes using Gatsby, contentful. Gatsby has a great development experience. To show something in the browser, we need webpack, babel. Gatsby sets the right defaults under the hood and can write code then show in the browser. To set up a blog, there is not much code needed to write. I spend most of my time reading documents and design my blog.

overview

the basic idea of creating a blog is using gatsby Programmatic to generate pages from a data source. So you need three parts: post data in MDX foram, some template for style post content, and some way to fill data to a template. The gatsby plugin I used is gatsby-source-contentful for the data source, gatsby-plugin-MDX for creating HTML for browser, and gatsby node API for generating page. Let's start.

Note: this is not a step-by-step tutorial. This post assumes some React and gatsby knowledge. There is an excellent tutorial in gatsby documents.

design

I want my blog to look pretty and fantastic, although I am not a designer. I think the more easy way is the rule of thirds and grid design.The rule of thirds is if you take a composition, you break it down into three pieces. And you pick one of those thirds and put the key part of the composition there instead of right in the middle. grid design divides the page into many pieces, put content into some pieces, like the newspaper.

home page

On the home page, I combine the rule of thirds with grid design. I create a grid with a CSS grid and put some elements to the line cross position.

      display: grid;
      grid-template-rows: 15vh 15vh 20vh 20vh 30vh;
      grid-template-columns: [side-start] minmax(6rem, 1fr) [center-start] 
                             repeat(8, [col-start] 1fr [col-end]) 
                             [center-end] minmax(6rem, 1fr) [side-end];

I create a 10 column grid; the first and last column preserves white space as padding.
Set length as 1fr allows evenly shrink in small screen.
put content using grid-column and grid-rows

post page

on the Post page, I only use grid design. The landscape screen has many white spaces on the left-right side. Usually, people center all content, but the magazine's text is aligned to the left or right side if there are many white spaces. I followed this template align text right side. the code looks as follows.

const article = css`
    display: grid;
    grid-template-columns: 4fr minmax(min-content, 30rem) minmax(30rem, 32rem) 1fr;
    row-gap: .8em;
    h1 {
      grid-column: 1 /-1;
    }

    > * {
      grid-column: 2 /4;
    }

    h2, h3, h4 {
      grid-column: 1 / 3;
    }
`

In the code above,

I first create 4 grids. The First 4fr and the last 1fr are for withe space.
CSS places elements to the grid following the auto-placement algorithm. Which is from left to right. But I don't want any of the elements to occur the first column. > * { grid-column: 2 /4; } select all children and put to 2, 3 column.
because of many spaces in the left, I move the headling to left side. h2, h3, h4 { grid-column: 1 / 3; }

Typography

typography is the art and technique of arranging type to make written language readable and beautiful. Sans-serif font for content text and a serif font for the title, heading. yes. one type for heading, one for the body. I want a relationship between these two typefaces. The stroke contrast will make text look beautiful. Another important thing is to make sure line-height is bid enough.
detail config

start building

Our first requirement is the gatsby-source-contentful plugin. What this plugin helps us is to fetch content you waited in cloud to local computer at build time. Follow this official guide to install. While installing the plugin, you can generate a token from contentful site - setting - API key - add API key.

Next, install the gatsby-plugin-MDX plugin; this plugin read files from gatsby-source-contentful and automatically generated code to render your post page.

export default function Post({ data }) {
  return (
    <Layout>
      <article css={article}>
        <MDXRenderer>{data.contentfulPosts.content.childMdx.body}</MDXRenderer>
      </article>
    </Layout>
  )
}

export const postQuery = graphql`
  query($slug: String) {
    contentfulPosts(slug: {eq: $slug}) {
        title
        content {
          childMdx {
            body
          }
        }
    }
  }

MDXRenderer is a component provided by MDX plugin for render MDX file
MDX add a node childMdx { body } to Grapghql, this is the automatically generated code

Programmatic page generation

create pages API. is for Create pages dynamically. Code in the file gatsby-node.js is run once in the process of building your site. You query post slug form contentful, then create a post with that slug. Each post received a slug; use slug query more data about this post.

Wrapping up

now, I have a not too lousy design, eye cares dark color theme, dynamically generate pages. Although some features are missing, such as tags, categories, search. At least the blog is online now.