どのように私はギャツビー、Netlify、そしてもっともらしいと私のブログを作成しました.


このポストはもともと投稿されましたon my blog .
何かを覚えたいなら、それを書きなさい.
ブログを始めます.疑問のいくつかの時間の後(それが価値があるかどうかについて熟考して、人々がすでに私が書きたいすべての話題をカバーしていると思って)私はそれを試してみることにした.それは3つの主な理由からだった.
  • 私が好きであるいくつかの話題に深くなってください:私は、より良い学習につながるものを書くと思います.
  • 他の人を助けてください.
  • 私のコミュニケーション技術を改善してください.
  • それは私がブログを作成する方法を説明するために最初のポストを使用します.

    最初の決定:どこで私のコンテンツを公開する必要がありますか?
    私は、ドメイン名を所有しているか、サイトの上で内容を出版することについて確信しませんでしたMedium , or Hashnode . いくつかの研究の後、私は自分のドメインで公開することを決めた.いくつかの利点があります.
  • 最初のものは簡単です、私はそれを所有します:私は、私が望むものを選んで、カスタマイズすることができます.
  • サードパーティ製プラットフォームとの依存関係を削除します.
  • 私はまだ他のプラットフォームで同じ内容を公開し、私の個人的なブログに人々をリダイレクトすることができます.我々は、ここで重複した内容のためSEOを傷つけないことの世話をしなければなりません、しかし、我々はそれを解決することができますcanonical URLs .
  • その決定をした後、なぜ私はブログを作成するには、以下のツールを選んだ理由を説明します.

  • Gatsby .

  • Netlify .

  • Plausible .

  • ギャツビー
    Gatsbyは、開発者がウェブサイトを構築するのを助ける反応に基づくオープンソースフレームワークです.
    私はギャツビーで全く経験していません、このブログをこのフレームワークでの私の最初の経験でした.他のツールをチェックした後Hugo また、私は私の要件に会った、私はその生態系に精通しているので、ギャツビーを試してみることを決めた.
    あなたは最初から始めることができます、しかし、また、Gatsbyで以前の経験がないならば、利用できるGatsbyスターターをチェックすることを勧めますhttps://www.gatsbyjs.com/starters/ . そこに一度、あなたが選ぶことができる多くのオプションがあります.
    私の場合は、プロジェクトを初期化しましたgatsby-theme-minimal-blog スターター
    gatsby new minimal-blog LekoArts/gatsby-starter-minimal-blog
    
    その後、アプリケーションを実行し、次のコマンドで変更を開始できます.
    cd minimal-blog
    gatsby develop
    
    あなたのサイトにアクセスできますhttp://localhost:8000 .

    カスタマイズ
    したら、新しいアプリケーションを起動した場合は、簡単にWebページの開発についていくつかの概念がある場合は、ページをカスタマイズすることができます、それは、HTMLやCSSの反応を使用します.
    あなたはギャツビーのテーマを使用している場合は、彼らのコンセプトを持っているshadowing , カスタマイズは本当に簡単になります.この機能は、テーマ内の任意のファイルを置き換えることができますsrc 独自の実装ディレクトリ.例として:
  • あなたがテーマを使用している想像してくださいsome-theme ファイルにはsome-theme/src/components/post.tsx .
  • このコンポーネントを自分の実装で置き換える場合は、your-blog-directory/src/some-theme/components/post.tsx . その瞬間から、あなた自身の実装はデフォルトのものの代わりにレンダリングされます.

  • SEOフレンドリー
    あなたが人々があなたのウェブサイトを見つけることを望むならば、SEOは本当に重要です.検索エンジンのクローラのためにあなたのサイトを高速にすることは別として、GatsbyはSEOの観点から実装を改善するためのいくつかの便利なプラグインを持っています.現在使用しているプラグインのいくつか

  • gatsby-plugin-sitemap : それは自動的に新しいビルドを起動するたびにサイトのサイトマップを作成します.

  • React Helmet package : これは、SEOのために非常に重要なWebページにメタデータを追加します.

  • ネットリファイ
    一度我々のブログのコンテンツを持って、我々はどこかにそれをホストする必要があります.経験がありましたGithub pages 前にいくつかのページをホストするためには、私はNetlifyしようと決め、私は最終的にそれを選んだ.いくつかの利点があります.
  • 連続展開:いくつかのビルド設定をいくつかのクリックで追加した後、NetLifyはブログの新しいバージョンを展開します.また、展開プレビュー、ロールバックのような他の機能を提供したり、またはsplit testing . 私は現在、これらの機能のすべてを使用していないが、彼らは本当に便利なことができます.
  • ドメインの設定:カスタムドメイン名の本当に簡単な設定を提供します.また、あなたは無料でSSL証明書を持っています.
  • Netlifyは有料ツールですが、すべてのこれらの機能は、私は現在使用している無料の計画に含まれています.

    もっともらしい
    私は最初の瞬間からいくつかの利用可能な分析をしたい.Google Analyticsを試みた後、私はそれが私のユースケースのために少しoverkillであると思います.
    私は理解していない多くのデータがあるので、私はそれが提供するすべての値を取ることのない連続感を持っています.
    いくつかの研究の後、私はPlausible . それはいくつかのダッシュボードを理解しやすいシンプルな解析を提供します.また、少なくとも私の観点からは、いくつかの重要な利点があります.
  • これは、オープンソースのツールですopen product roadmap そのコミュニティによって駆動されます.
  • 若干の単純な解析論を提供するので、それは非常に小さいスクリプトを持ちます.
  • adblockersは、もっともらしい影響を与えません:どんな個人的なデータも追跡しないでください、あるいは、adblockersは通常、もっともらしいスクリプトでページをブロックしません.
  • あなたはもっともらしいデモを見つけることができますhere .
    それで、ソフトウェア開発者であるので、私はこれらの3つのツールで非常に良い経験をしました
    ウェブサイトの起動の状況で.
    このブログのスタックをどう思いますか?
    いくつかの他の人のために興味深いことができると思うなら、あなたが望む誰とでもそれを共有すること自由に感じなさい.