GatsbyJS + Netlifyで技術ブログを作った

技術書を読んで写経したりライブラリを試したりはしていたものの 外部にアウトプットしていなかったので作った。
ホスティングサービスは技術ブログの運用なら無料で済みそうなNetlifyにした。

大体チュートリアルと各種プラグインのドキュメント通りに作成してる。
その辺は別記事で解説する。

以下コンフィグの設定

module.exports = {
  siteMetadata: {
    title: 'suke blog',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    'gatsby-transformer-remark',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'src',
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: 'language-',
              inlineCodeMarker: null,
              aliases: {},
            },
          },
        ],
      },
    },
  ],
}

シンタックスハイライトにPrism.js、CSS in JSにstyled-componentsを採用した。
コンポーネントはスタイリングとレイアウトを分離している。 どうやるのがベストかはよく分かっていない。

// Authorコンポーネントの定義
import React from 'react'
import styled from 'styled-components'
import TwitterIcon from './twitterIcon'
import icon from '../img/icon.jpg'

export default ({ className }) => (
  <Container className={className}>
    <Icon src={icon} alt="suke icon" width="70" height="70" />
    <div>
      <div>
        suke<br />
        Web engineer
      </div>
      <TwitterIcon />
    </div>
  </Container>
)

const Container = styled.div`
  display: flex;
  padding: 0.5rem 0;
`

const Icon = styled.img`
  border-radius: 50%;
  margin-right: 30px;
  margin-bottom: 0;
`
// レイアウト側
import React from 'react'
import styled from 'styled-components'
import Author from './author'

export default ({ className }) => (
  <Wrapper className={className}>
    <Container>
      <StyledAuthor />
      <Copyright>© 2018 suke</Copyright>
    </Container>
  </Wrapper>
)

const Wrapper = styled.div`
  color: white;
  background: #2ac1f4;
`

const Container = styled.div`
  margin: 0 auto;
  max-width: 960px;
  padding: 1rem 1.5rem 0.8rem;
`

const Copyright = styled.div`
  text-align: center;
`

// Authorコンポーネントのレイアウトを定義する
const StyledAuthor = styled(Author)`
  border-bottom: 1px solid white;
  margin-bottom: 10px;
`

SEO対応等やっていないことが大量にあるので少しずつ対応させる。