Gatsbyブログその1 ブログ公開まで

May 10, 2021

#gatsby

はじめに

Gatsbyを使ったブログ作成手順その1。 Web系全然わかってない状態でも公開まで簡単にできた。参考までにこのブログ公開までのステップを共有。対象はWindows10環境のみ。

セットアップ

各ツールをダウンロードし、インストール。

git
Git Extensions: Gitクライアントおすすめ
visual studio code: エディタおすすめ
nodejs: Download for Windows (x64)のLTSバージョン

Gatsbyインストール手順

gatsby-cliのインストール

npm install --global gatsby-cli

テンプレートであるgatsby-starter-blogを使用。

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog

開発用サーバの立ち上げ

gatsby develop

http://localhost:8000/にアクセスし、ブログが起動しているか確認。

カスタマイズ

テンプレートを編集し個人用ブログにカスタマイズする。仕組みはよくわかっていないが、Reactなる未知の技術を使っている。

タイトル

gatsby-config.jsを編集。

module.exports = {
  siteMetadata: {
    title: `いろいろやるブログ`,
    author: {
      name: `miyano`,
      summary: `いろいろやってみるブログ`,
    },
    description: `いろいろやってみるブログ`,
    siteUrl: `https://gatsbystarterblogsource.gatsbyjs.io/`,
    social: {
      twitter: `miyano45663062`, //twitterのアカウント名
    },
  },

プロフィール画像

src/images/gatsby-icon.pngとsrc/images/profile-pic.pngを個人の画像に差し替えます。画像ファイル名やパスを変更したい場合は、gatsby-config.jsとsrc/components/bio.jsの下記の行を合わせて変更します。相対パスで指定する必要があります。

  return (
    <div className="bio">
      <StaticImage
        className="bio-avatar"
        layout="fixed"
        formats={["AUTO", "WEBP", "AVIF"]}
        src="../images/profile-pic.png" //ここを変更する
        width={50}
        height={50}
        quality={95}
        alt="Profile picture"
      />

      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, //ここを変更する
      },

Copyright

  return (
    <div className="global-wrapper" data-is-root-path={isRootPath}>
      <header className="global-header">{header}</header>
      <main>{children}</main>
      <footer>
        © {new Date().getFullYear()}, miyano //ここを変更
      </footer>
    </div>
  )

記事

content\blog以下にフォルダとマークダウン.mdを追加。フォルダ単位で記事を作成していけば画像等の管理が簡単にできそう。

GitHubにブログをアップ

GitHubでブログ用のプライベートリポジトリを作成。 GithubのプライベートリポジトリにローカルリポジトリをPush。

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/*/my-blog.git
git push -u origin master

Netliftyで公開

GitHubと連携し、ビルドやドメインの設定する。ここらへんは参考サイトで詳しく載っている。

これからやりたいこと

デザイン変更
- フォントが気にくわない
- Table of Contentsをページ横に表示したい
- 見出しのサイズ、色、アイコン
- リストの表示が気に入らない
  - 見出しよりも左にいってほしくない
記事毎にタグをつけたい
Googleアナリティクスを使いたい