製品を作る
/Hal GatewoodによるUnsplash写真私はWhen are the fightsを再建することを意味していました、そして、私はデータがどこから来るつもりであるかについて心配して動けなくなりました.私はもう気にしないと決めただけで最初にサイトを作ったときに戻ってみたかった.それは、Netlifyでホストされるちょうど静的なページでした.私はどのように私は製品を構築する上で私のプロセスを破壊する方法のプロセスを文書化することを決めたか、少なくともどのようにしようとアプローチします.
何の問題解決
私は、UFC、Bellator、Gloryなどで何の戦いが起こっているかを見たいです.それは私が自分のかゆみをかいた問題です.
MVPとは
このサイトのために、私はいくつかの今後の戦いが働くべき静的なページを考えています.何もクレイジー、静的サイトだけ.これの最も難しい部分は、非常に最初にオーバーエンジニアにしようとしていません.私が現在作っている唯一の例外は、私がnextjsを使うつもりであるということです、そして、私がそれを選んでいる唯一の理由は、よりダイナミックな何かが後で必要であるかもしれないということを知っているからです.それは小さいビット過多です、しかし、それはOKです.
必要な技術
を構築するための
変化とCI/CD
DNSとCDNのための
どうやって展開するの
gitlabとvercelを介してフックのいくつかの並べ替え.ここでの目標は何かマスターにマージされるたびに、我々は新しいビルドを取得します.
最初の展開の設定
NextJSのボイラーを設定します
私はちょうどNextJSでgetting started pageに従って、それを展開するつもりです.
Git { lab、ハブ}でそれを得ること
あなたがgitlabを使っているならば、Gitlabの指示に従ってください.Githubは似たようなものを持っている.
一旦それが完了したら、あなたはあなたのプロジェクトをRepoに加える方法を指示します.
接続する
幸いにもVercelは、それは基本的に1つのクリック展開であるので、GitLabプロジェクトボタンを接続しています.
そして今https://whenarethefights-com.vercel.app/私のアプリを実行している.
今すぐいくつかの戦いを追加することができます
私は、ちょうど次のカップルUFCの戦いをそこに置くつもりです、そして、我々が我々のドメインをVercelの上で我々のアプリに向けることができるように、我々はそれを終えさせます.我々は、ちょうど最も基本的で醜いサイトをつくるつもりです.誰も気にかけない.
import Head from "next/head";
import styles from "../styles/Home.module.css";
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>¯\_(ツ)_/¯ When are the fights</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<div className={styles.grid}>
<a
href="https://www.ufc.com/event/ufc-fight-night-february-6-2021"
className={styles.card}
target="_blank"
>
<h3>UFC Fight Night - Overeem vs Volkov</h3>
<p>Sat, Feb 6 / 5:00 PM PST</p>
<p>UFC APEX Las Vegas , NV United States</p>
</a>
<a
href="https://www.ufc.com/event/ufc-258"
className={styles.card}
target="_blank"
>
<h3>UFC 258 - Usman vs Burns</h3>
<p>Sat, Feb 13 / 7:00 PM PST</p>
<p>UFC APEX Las Vegas , NV United States</p>
</a>
</div>
</main>
</div>
);
}
保存とプッシュ🚀
CI/CDの内容が終わったので、その時点でポイントしましょう.我々のアプリにCOM.
私たちのVercelアプリにドメインを指す
私はthese instructions Loosleyそれを動作させるに従った.しかし、私はCloudflareを通して行きました.
これは2021年に250000語を試して、書く実験の一部です.それは正確ではないだけ緩んで進行状況を追跡するためのものです.
現在の単語数
毎日平均:~ 101
毎日の平均ゴール:~ 685
Reference
この問題について(製品を作る), 我々は、より多くの情報をここで見つけました https://dev.to/mikebobadilla/building-a-product-whenarethefights-3bc5テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol