新しいブログ、新しいブランド、新しいスタック

My new personal blog and portfolio is now online. そしてそれはGatsByjsで作られた静的ReactJSプログレッシブWebアプリケーションです!私はあなたのためにそれを壊してみましょう.

しかし、なぜ新しいウェブサイトを設計しますか？

新しい個人的なブランド=それを示す新しいウェブサイト.
そして、私はgatsbyjsフレームワークのまわりで私の頭を包みたかったです.私は数ヶ月前に私は私のための静的なソリューションを探していたそれを最小限の経験があったStay Regular スタジオアンドWeedPornDaily ブログ.私は最終的にそれを使用してKushy スレートに切り替える前にドキュメントを書きます( RubyでJSバックエンドを好むので、スイッチバックするかもしれませんが).私は最初にそれを使用して以来、彼らは長い道のりを来ている-多くの改善されたドキュメントからプラグインのtroveに私は探索するために死んでいた.

PWAまたは捜査

私の目標はウェブサイトを作成することでしたprogressive web app or PWA , から展開Git repository , とcdnだけで提供されます.私のコンテンツのすべては、ビルドプロセス中にAPIからプリロードされ、ハードHTMLにコーディング.リモートのAPIからコメントのようなものだけがロードされます.なぜなら、システムは認証側の要求を処理するサーバー側アプリケーションを必要とするからです.

When compiled, this website is purely HTML, CSS, and JS.

私はGatsByjsフレームワークの魔法に感謝します.静的サイトを生成する静的サイトジェネレータとして動作しますReactJS コンポーネントとGraphQL API.閉じるこの動画はお気に入りから削除されていますnext.js SSRを処理するには(まだルートの分割やWebPackのセットアップを持っていない)、GatsByjsは、完全なサーバー側のパッケージの静的な反応アプリケーションをレンダリングするパッケージに簡単になります.

The GatsbyJS framework handles everything from webpack bundling, to route splitting, to server-side rendering.

呼び物

世界の出身ですWordpress , だから私は可能な限りフル機能としてこのブログを作ろうとしました.GatsByJSフレームワークは、2ページでBoilerPlate Hello Worldスタイルのアプリを提供し、それです.他のすべてのプラグインやカスタムコードが必要です.すべてのこれらの機能は、ベースのgatsbyjs機能の上に追加されます:

ワンクリック展開-私は単に実行npm run deploy そして、ウェブサイトは構築されて、私のローカルマシンからGithubページにアップロードされます.

Markdown -私のすべてのコンテンツは、必要なときにHTMLの小さなビットでマークダウンに書き込まれます.

構文強調表示-コードPrismJSによって着色され、統合ギャツビープリズムプラグインを使用します.

応答画像-ウェブサイト上のすべての画像は、サイトのスーパーデータを効率的に、小さなビューポートの小さなファイルを提供し、ユーザーのブラウザサイズに対応します.

私にはtag page ここで、すべてのポストからすべてのタグを閲覧することができますし、各タグをクリックすると、タグのアーカイブ(より多くのSEOポイントに)かかります.

Pagatedアーカイブ-あなたの全体のコンテンツライブラリを閲覧するには、ユーザーやロボットのための方法なしに適切なSEOを持つことはできません.私は、プラグインと若干の魔法でこれを引くことができました.

コメント-これらのDisqusとその反応コンポーネントによって処理されます.

RSSフィード-あなたは誰かのためのRSSフィードなしでブログを持っていることができません誰かのために直接あなたの脳にフィードをインターフェイスを使用して数週間にわたってのフィードを使用します.これもプラグインでシンプルに死んでいた.

SEOの最適化-サーバーサイドレンダリングされてから構造化されたデータをreact-helmet , サイトマップに、私はインストールしました--このウェブサイトは、Googleの準備ができています.

欠けている唯一のものはCMSです、しかし、私はgithubページを使うことができません、私はサービスのように使用しなければなりませんNetlify 自動ビルドを処理するには

デザイン

私は、フォントと色のようなものを選ぶことによって、ブランドのために文体的な標準をセットしました.日本のデザインからインスピレーションを得て、私は光、現代、そしてグラフィックが欲しかったです.青は最も支配的な色だった.次に、デザインシステムの方向性を実証するためにコンポーネントを作成する実験をしました.柔らかいスペースを作成するために白いスペース、丸みを帯びたエッジ、微妙なグラデーションの重い使用.そして、大胆なグラフィックイメージと色は、白い壁の単調さを壊します.
ここでスケッチのいくつかのラウンドの後に終了したものです

開発

gatsbyjsドキュメントは素晴らしいです.私ができることのほとんどは、そこでかなりよく概説されました.いくつかのテクニックがありましたが、私は本当にGitHubの問題やスタックオーバーフローの答えを見つける必要がありました.
ドキュメントの複数のGraphSQLクエリを実行する方法をDocsのどこにでも見つけることができませんでした.GatsByjsは、個々のコンポーネントの内部ではなく、メインレイアウトテンプレートでのGraphSQLクエリを可能にします.Graphicsのdocsを指さし続けて、フラグメントを使うように言っていましたが、Graphicsドキュメントはフラグメントをクエリのフィールドを取得する方法として記述しています.最後に、Github上の誰かが同様の問題を抱えているのを見つけました.誰かが単一のページで複数のGraphSQLクエリを定義する方法を示しました.

export const query = graphql`
  query IndexQuery {
    blog: allMarkdownRemark(
      sort: {fields: [frontmatter___date], order: DESC}, 
      limit: 3
      filter:{frontmatter:{section:{eq: "blog"}}}
    ) {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
            cover_image {
              publicURL
              childImageSharp {
                sizes(maxWidth: 1240 ) {
                  srcSet
                }
              }
            }
            section
          }
          fields {
            slug
          }
          excerpt
        }
      }
    },
    projects: allMarkdownRemark(
      sort: {fields: [frontmatter___date], order: DESC}, 
      limit: 3
      filter:{frontmatter:{section:{eq: "project"}}}
    ) {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
            cover_image {
              publicURL
              childImageSharp {
                sizes(maxWidth: 1240 ) {
                  srcSet
                }
              }
            }
            section
          }
          fields {
            slug
          }
        }
      }
    }
  }
`;

私も、問題をGatsbyjsを考え出しましたcreatePage ノードの静的ページ生成方法gatsby-node.js ファイル.ドキュメントでは、それらはデータのためにGraphSQLを照会する約束を呼ぶことによって機能を使用することを記述します.そして、それは静的なページ(個々のブログ柱のような)に変えられます.しかし、私はブログやプロジェクトなどの異なるエンドポイントで複数のクエリを実行する必要がありました.私は、githubの上で誰かのGatsbyJjsウェブサイトを観察することによって、これを考え出しました.私は、中でコールバック機能を使用して終わりましたcreatePage メソッドとコールバックを渡します.

/**
 *  Pagination for /blog/ page
 */
function createBlogPagination(graphql, createPage, resolve, reject) {
        graphql(`
      {
        allMarkdownRemark(
        filter:{frontmatter:{section:{eq: "blog"}}}
        ) {
            totalCount
            edges {
                node {
                id
                }
            }
        }
      }
    `).then(result => {

                createPaginatedPages({
                    edges: result.data.allMarkdownRemark.edges,
                    createPage: createPage,
                    pageTemplate: "src/templates/blog-archive.js",
                    pageLength: 6,
                    pathPrefix: "blog",
                    buildPath: (index, pathPrefix) => index > 1 ? `${pathPrefix}/${index}` : `/${pathPrefix}` // This is optional and this is the default
                });

            })
}

/**
 *  Create slug pages for markdown files
 *  Create pages for each tag
 */
exports.createPages = ({ graphql, boundActionCreators }) => {
    const { createPage } = boundActionCreators
    return new Promise((resolve, reject) => {
        graphql(`
      {
        allMarkdownRemark {
          edges {
            node {
                excerpt
                }
          }
        }
      }
    `).then(result => {
                /**
                 * Create blog posts based on slugs
                 */
                result.data.allMarkdownRemark.edges.forEach(({ node }) => {

                    // Grab random tag to do related posts
                    var tag = node.frontmatter.tags[Math.floor(Math.random() * node.frontmatter.tags.length)];

                    createPage({
                        path: node.fields.slug,
                        component: path.resolve(`./src/templates/blog-post.js`),
                        context: {
                            // Data passed to context is available in page queries as GraphQL variables.
                            tag: tag,
                            slug: node.fields.slug,
                        },
                    })
                });

                resolve()
            })
        createBlogPagination(graphql, createPage, resolve, reject);
        createProjectsPagination(graphql, createPage, resolve, reject);
    })
};

Jamstackは未来

私は完全なスタックのWeb開発の動向を観察すると、クライアント側のアプリケーションが異なる機能のためのいくつかの異なるAPIに話すところを見つけています.そして、アプリケーションによって、より多くのデータをAPIにプリロードされたCDNにプッシュすることが容易になり、コンテンツのより効率的なグローバルストリームが可能になります.そして、それは企業のようにも証明されているSmashing Magazine あれ.
私はJamstacksの世界を探検し、GatsByjsのようなフレームワークの機能を押して興奮している.

どうもありがとう

素晴らしいフレームワークを作成するためのGatsByjsに感謝し、無料で(私のrepoとウェブサイトをホストするためのgithubのおかげで)カスタムドメインを含む!
歓声
オスカー
続きを読む

GatsbyJS

GatsbyJS