検索結果0件」

    【基本無料】高機能でデータベースに依存しないブログの始め方

    【基本無料】高機能でデータベースに依存しないブログの始め方

    こんにちは、シンヤです!
    先日、以下のようなツイートをしました。

    僕のブログはGatsbyで作られているのですが、いいですよこれは😊
    DBがないから基本無料だし、ハッキングやメンテナンスコストがほぼない
    SPA(Single Page Application)だから高いUXが実現できるし、APIも使える
    画像圧縮やLazyloadにも標準対応
    今時WordPressを使う必要性は全くないですね😅

    こちらのツイートについて、深掘りして解説していきたいと思います。


    データベースに依存しないブログとは?

    これは文字通り、データベース(以下DBと呼称)を使わないブログということです。
    現代の技術を使えば、かんたんに作ることができます😊

    DBを使うと何が問題なのでしょうか?
    具体的には、以下のようなものが挙げられます。

    • サーバーを契約するのでお金がかかる
    • ハッキングされる可能性がある
    • ブログを移行する場合、DBも移行しないといけない
    • DB接続エラーが起こる可能性がある
    • 記事をDBから読み込むので、若干表示速度が遅い

    という感じですね。

    高機能なWebアプリなら、ユーザーのデータや決済の記録を保存しないといけないので、DBが必要です。 しかし現代に、わざわざブログのためにDBを使うのは、コストもリスクも高いと僕は考えています😱


    高機能でDBに依存しないブログとは?

    技術的にいえば、上記を実現するのは十分可能です。
    具体的なやり方は・・・

    「静的サイトジェネレーター」を使ってブログを作る

    以上になります。

    「静的サイトジェネレーター(以下SSGと呼称)」とは?

    DBを使わずにブログサイトを作ることができる技術

    ざっくりいうと、上記のような技術です。
    これがあるからこそ、WordPressのデメリットを解消できるブログを作ることができます。
    SSGのメリットは・・・

    1. DBがないのでハッキングリスクが低い
    2. 表示速度が速い
    3. ブログの移行リスクが低い
    4. Webアプリ化もできる

    ということです。
    以下に詳しく解説いたします。


    SSGのメリット1:DBがないのでハッキングリスクが低い

    DBがあるとハッキングリスクがあるのは、先ほどご説明した通りです。

    SSGはMarkdown(マークダウン)でブログ記事を書くので、そもそものDBが存在しません。
    DBがないので、ハッキングされて記事が全て消されるような事故も、限りなく防ぐことができます。

    外部からのハッキングリスクが低いことを、IT業界では「セキュア」といいます。
    意味は文字通り、「安全な」という意味です。
    「絶対とは言えないけど、限りなく安全な環境」という意味で使われます。

    SSGならDBがないので、セキュアな環境が作れるということです😊


    SSGのメリット2:表示速度が速い

    SSGは、

    • 限りなくページを軽く圧縮してくれる
    • DBがないので記事の表示速度も速い

    というメリットもあります。
    表示速度が速くなれば、

    • 検索順位が上がりやすくなる
    • ページがすぐ表示されるので、読者にも優しい

    というメリットがあります😊


    SSGのメリット3:移行リスクが低い

    SSGは記事をMarkdownで書くので、記事もブログの一部として取り込まれていきます。
    ということは、ブログ本体のデータをダウンロードするだけで、環境の移行が完了します😊
    厳密には、

    • 開発環境を構築する
    • Netlifyの設定をする

    という作業がありますが、DBと違いいくらでもやり直しができるので、移行リスクは限りなく低いです😊


    SSGのメリット4:Webアプリ化もできる

    SSGにはWebアプリ化に対応しているものもあります。
    このブログも何気に、Webアプリで作られています😊

    Webアプリというのは、かんたんにいってしまうと「Webでスマホアプリみたいなことができる技術のこと」です。

    Webアプリにすると・・・

    • 会員登録・ログイン機能
    • APIを使った機能拡張
    • 独自決済の導入
    • 動画・音声配信

    などができるようになります。
    つまり、なんでもできるWebサイトが作れるということですね😀

    Webアプリに対応しているSSGはいくつかありますが、このブログでも使われているGatsbyJSがおすすめです。


    実際にSSGでブログを作ってみる

    それでは実際に、SSGでブログを作ってみましょう😊
    今回は先ほどご紹介しました、このブログでも使われているGatsbyJSを使って、ブログを作っていきます。

    GatsbyJSの特徴

    • データベースなしでブログが作れる
      • サーバー代やメンテナンスコストがかかりません。
    • SPAでブログが作れる
      • 非同期通信であるSPAを使って、スマホアプリと同じように滑らかなブログが作れます。
    • デザインを自由に切り替えられる
      • WordPressと同じように、テーマを切り替える事でデザインも自由に変えられます。
    • ルーティングを自動で行ってくれる
      • 個別で指定したルーティングを、GatsbyJSは自動的に行ってくれます。
    • 画像圧縮とLazyloadに標準対応
      • 設定をしなくても、画像と読み込み速度をよくしてくれる
    • プラグインがある
      • GatsbyJSには便利なプラグインが、たくさん用意されています。

    データベースなしかつ無料でブログが作れ、Webアプリによる高いUXが実現できます。


    環境構築をする

    以下の方法で、ご使用中のMacに環境を構築していきます。
    既に環境構築済みの方は、こちらの項目は飛ばして読んでください。
    少し難しいかもしれませんが、頑張ってついてきてください😅

    ターミナルを起動する

    まずは、ターミナルの起動を行います。
    Mac下部の「Launchpad」で、「terminal」と入力して出てきたアイコンを、クリックしてください。

    Homebrewのインストール

    以下のコマンドを入力して、Homebrewをインストールします。

    $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    インストール後、以下のコマンドを入力して、Homebrewのバージョンが表示されたら、成功しています😊

    $ brew -v
    #> Homebrew 1.2.3
    #> Homebrew/homebrew-core (git revision 7212; last commit 2017-07-02)

    Nodebrewのインストール

    以下のコマンドを入力して、Nodebrewをインストールします。

    $ brew install nodebrew

    インストール後、以下のコマンドを入力して、Nodebrewのバージョンが表示されたら、成功しています😊

    $ nodebrew -v
    #> nodebrew 1.0.0

    Nodebrewを使える様にする

    以下のコマンドをターミナル上で入力して、環境変数を追加します。

    $ vi ~/.bash_profile

    ターミナルの画面が変わったら、

    1. キーボードの「I」を押す
    2. 「export PATH=$HOME/.nodebrew/current/bin:$PATH」のコードを追加する。

    以下の様な画像になっていればOKです。

    コードを追加したら、

    1. 「esc」キーを押す
    2. 「:wq」と入力する
    3. 「Enter」を押す

    以上で、コードの保存が終わり、エディターが閉じます😊

    Nodebrewのセットアップ

    以下のコマンドを入力して、先ほど作ったbash_profileを反映させます。

    $ source ~/.bash_profile

    次に以下のコマンドを入力して、Nodebrewをセットアップします。

    $ nodebrew setup

    Node.jsのインストール

    以下のコマンドを入力して、Node.jsをインストールします。

    $ nodebrew install-binary v12.13.1

    次に以下のコマンドを入力して、インストールしたNode.jsを使える様にします。

    $ nodebrew use v12.13.1

    インストール後、以下のコマンドを入力して、Node.jsのバージョンが表示されたら、成功しています😊

    $ node -v
    #> v12.13.1

    GatsbyJSのインストール

    以下のコマンドを入力して、GatsbyJSをインストールします。

    $ npm install -g gatsby-cli

    プロジェクトを作成する

    以下のコマンドを入力して、GatsbyJSのプロジェクトを作成します。

    $ gatsby new gatsby-project

    gatsby-projectの部分は、好きな名前に変更してください。

    ローカルサーバーを立ち上げる

    ターミナルから以下のコマンドを入力して、作成したフォルダに移動します。

    $ cd gatsby-project

    移動後、以下のコマンドをターミナルで入力してください。
    入力後http://localhost:8000にアクセスして、下記の画面が表示されたら、正常にローカルサーバーが立ち上がっています😊

    $ npm run dev


    ブログ機能を追加する

    GatsbyJSにはMarkdownを追加するだけで、かんたんにブログを作れる機能があります。
    早速ブログ機能を追加してみましょう😆
    ここから少し難しいかもしれませんが、頑張ってついてきてください💦

    プラグインを追加する

    ターミナルを開いて、以下のコマンドを入力してプラグインを追加します。

    $ npm install gatsby-transformer-remark

    gatsby-config.jsを編集する

    追加したら、gatsby-config.jsを以下のように編集して、追加したプラグインを使えるようにします。
    また、ブログを格納するディレクトリも指定します。

    module.exports = {
      siteMetadata: {
        title: `Gatsby Default Starter`,
        description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
        author: `@gatsbyjs`,
      },
      plugins: [
        `gatsby-plugin-react-helmet`,
        {
          resolve: `gatsby-source-filesystem`,
          // options変更
          options: {
            path: `${__dirname}/src/markdown-pages`,
            name: `markdown-pages`,
          },
        },
        // gatsby-transformer-remark 追加
        `gatsby-transformer-remark`,
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
          resolve: `gatsby-plugin-manifest`,
          options: {
            name: `gatsby-starter-default`,
            short_name: `starter`,
            start_url: `/`,
            background_color: `#663399`,
            theme_color: `#663399`,
            display: `minimal-ui`,
            icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
          },
        },
      ],
    }

    ${__dirname}/src/markdown-pagesが、ブログを格納するディレクトリです。

    Markdownファイルを追加する

    srcディレクトリにmarkdonw-pagesディレクトリを追加します。
    追加したディレクトリに、新しくpost-1.mdと`post-2.mdファイルを追加します。

    post-1.mdを、以下のように編集します。

    ---
    slug: "/blog/my-first-post"
    date: "2019-05-04"
    title: "My first blog post"
    ---
    
    これは最初のブログページです。

    post-2.mdを、以下のように編集します。

    ---
    slug: "/blog/my-second-post"
    date: "2019-05-06"
    title: "My second blog post"
    ---
    
    これは2番目のブログページです。

    ブログテンプレートを作る

    実際のブログページの雛形となる、テンプレートページを作ります。

    srcディレクトリに、新しくtemplatesディレクトリを追加します。
    追加したディレクトリに、新しくblogTemplate.jsファイルを追加します。

    blogTemplate.jsを、以下のように編集します。

    import React from "react"
    import { graphql } from "gatsby"
    import Layout from "../components/layout"
    
    export default function Template({
      data, // this prop will be injected by the GraphQL query below.
    }) {
      const { markdownRemark } = data // data.markdownRemark holds your post data
      const { frontmatter, html } = markdownRemark
      return (
        <Layout>
          <div className="blog-post-container">
            <div className="blog-post">
              <h1>{frontmatter.title}</h1>
              <h2>{frontmatter.date}</h2>
              <div
                className="blog-post-content"
                dangerouslySetInnerHTML={{ __html: html }}
              />
            </div>
          </div>
        </Layout>
      )
    }
    export const pageQuery = graphql`
      query($slug: String!) {
        markdownRemark(frontmatter: { slug: { eq: $slug } }) {
          html
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            slug
            title
          }
        }
      }
    `

    gatsby-node.jsを編集する

    gatsby-node.jsを開いて、以下のコードを追加して作成したブログテンプレートを使えるようにします。

    exports.createPages = async ({ actions, graphql, reporter }) => {
      const { createPage } = actions
      const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`)
      const result = await graphql(`
        {
          allMarkdownRemark(
            sort: { order: DESC, fields: [frontmatter___date] }
            limit: 1000
          ) {
            edges {
              node {
                frontmatter {
                  slug
                }
              }
            }
          }
        }
      `)
      // Handle errors
      if (result.errors) {
        reporter.panicOnBuild(`Error while running GraphQL query.`)
        return
      }
      result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
          path: node.frontmatter.slug,
          component: blogPostTemplate,
          context: {
            // additional data can be passed via context
            slug: node.frontmatter.slug,
          },
        })
      })
    }

    index.jsを編集する

    最後にsrc/pages/index.jsを編集して、追加した記事が読み込まれるようにします。

    import React from "react"
    import { Link } from "gatsby"
    
    import Layout from "../components/layout"
    import SEO from "../components/seo"
    
    const IndexPage = ({ data }) => {
      const { edges: posts } = data.allMarkdownRemark
      return (
        <Layout>
          <SEO title="Home" />
          <h1>Indexページです</h1>
          <ul>
            {posts.map(({node: post}) => {
              return (
                <li>
                  <Link to={post.frontmatter.slug}>
                    {post.frontmatter.title} ({post.frontmatter.date})
                  </Link>
                </li>
              )
            })}
          </ul>
        </Layout>
      )
    }
    
    export const query = graphql`
      query IndexQuery {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
        ) {
          edges {
            node {
              id
              frontmatter {
                date(formatString: "MMMM DD, YYYY")
                slug
                title
              }
            }
          }
        }
      }
    `;
    
    export default IndexPage

    以下の様な画面になっていれば、成功しています😊


    index


    ブログ個別ページ


    WordPressを使ってもスキルアップにはならない

    今時WordPressは技術職じゃない人でも使いこなせるので、スキルアップにはなりません。
    IT業界だと「WordPress使えます!」じゃ、もう他の人と差別化なんてできないんですよね😅

    単刀直入に言うと、今時Web制作は無料で誰でも作れるので、WordPressは稼げる分野でもないし将来性も全くない枯れた技術です😱

    僕はそんな技術に自分の時間を投下したくありません。
    PdMである前にデザイナーなので、ユーザー体験が高いブログを作りたかったので、GatsbyJSでブログを作りました😊

    ではでは、またね〜🤗

    • 【基本無料】高機能でデータベースに依存しないブログの始め方