目次
ドメイン登録
ホスティング
コンテンツ管理システム(CMS)
資産ホスティング(CDNS)
旅の結論
ホームページ ウェブフロントエンド CSSチュートリアル ウェブサイトを立ち上げるための初心者の旅

ウェブサイトを立ち上げるための初心者の旅

Apr 18, 2025 am 10:20 AM

ウェブサイトを立ち上げるための初心者の旅

私のウェブ開発の旅は2018年9月に始まりました。多くの新しい開発者と同様に、私は学習の基礎のバランスをとることと、業界の急速な進化に対応することに苦労しました。シンプルでローカルに保管されているWebサイトの構築は、ライブのインターネットアクセス可能なサイトを立ち上げることから何マイルも離れているように感じました。それでも、私はそれをしました!そして、それは予想よりもはるかに困難で、複雑で、費用がかかりませんでした。

それはすべてクリスへの電子メールから始まり、プロセスを明らかにした有益な記事を刺激しました。私は本格的なウェブサイトを持っていませんでした。学習を支援するプロジェクトです。この進行中のプロジェクトは、ライブローンチプロセスを加速するように動機付けました。これを簡単な「こんにちは、世界!」で複製することもできます。 HTMLファイル。

私は、反応駆動の静的サイトジェネレーターであるGatsbyを選びました。そのモジュラーアプローチは、物理的な製品と機械設計の私のバックグラウンドと共鳴しました。レゴ城の建設など、建物は直感的に感じられ、最終製品の準備が整うまでコンポーネントを追加しました。

これはチュートリアルではなく、個人アカウントです。うまくいけば、それはあなたにインスピレーションを与え、1年しかコーディングしていなかった人として、正式なトレーニングがなくても達成可能であることを示しています。

ドメイン登録

当初、ドメインを取得することは重要だと感じました。所有権は責任を暗示しています。人々は私が提供したコンテンツにアクセスします。私は完璧な名前に苦しみ、頭字語ジェネレーターとシソーラスを探索しました。最終的に、私は私のアイデンティティと職業を簡単に反映したjoshlong.designを選びました。私はまだアドレスバーでそれを見ることを楽しんでいます。

Chrisのアドバイス(部分的に!)に従って、2つのドメインを購入しました:A .com.design.designには、価格競合が必要でした。 2つのドメインの管理は管理可能です。私は彼らの設定にアクセスする必要はほとんどありません。

購入プロセスは、あらゆるオンライントランザクションに似た簡単なものでした。 Namecheap( .com )とGoogle Domains( .design )は同様の経験を提供し、標準的な個人情報と支払い情報を必要としました。 Googleは積極的にアップセルしませんでした。彼らは私がプライバシーを受け入れた無料のWhois保護を提供しました。ただし、Namecheapは、ホスティング、電子メール、VPN、SSL証明書などのアドオンを積極的に宣伝しました。これは、私のセットアップにはすべて不要です。私はすでにホスティングをしていて、電子メールエイリアスを使用しており、ホスティングは無料のLet's Encrypt SSL証明書を提供しました。

ホスティング

ホストを選択することは、ドメイン登録よりも困難であることが判明しました。私のGatsbyサイトの静的な性質(HTML、JavaScript)は、決定を簡素化しました。 WordPress用に最適化されたようなサーバーが多いソリューションは必要ありませんでした。

ギャツビーの人気を考えると、Netlifyを選びました。彼らのドキュメントは優れており、私は快適に無料の層に留まりました。 Netlifyの使いやすさは重要な要因でした。

簡単なgithubメモ:私はGitの専門家ではありません。 VSコードエディターを介して変更をコミットおよびプッシュする手順に従って、リポジトリを作成しました。コマンドラインGitを学んでいますが、機能しました。

Netlifyに戻る:アカウントを作成し(クレジットカードは必要ありません)、GitHubリポジトリをリンクし、Netlifyがサイトの展開を視聴しました。 Netlifyの一時的なURLに展開した後、登録ドメインをリンクしました。 Netlifyは、Googleドメインに追加した名前サーバーを提供しました。伝播には約3時間かかりました(異なる場合があります)。最後に、私のドメインは私のライブサイトを指していました!

コンテンツ管理システム(CMS)

CMSの風景は広大ですが、ありがたいことに、それをバイパスすることを選択した場合は無関係です。私はこの認識に自由を見つけました。私のGatsbyサイトは、MarkdownファイルディレクトリをCMSとして使用しました。これは私のテキストエディターです。 Shoptalk Showで議論されているこのアプローチは、完璧に機能しました。

構造一貫性のために、後にnetlifycmsを統合した高速でオープンソースCMSを統合しました。これで、インターネット接続を備えたどこからでも投稿を作成およびドラフトできます。

資産ホスティング(CDNS)

Chrisが説明したように、CDNはWebサイト資産(HTML、CSS、画像)を保存しています。 Netlifyには無料のCDNが含まれており、サイトの速度とナビゲーションが大幅に改善されました。

旅の結論

起動する前に、私は地元のサイトに固執し、このプロセスが難しすぎて、長く、高価であると信じていました。そうではありません!私のドメイン名は私の唯一のコストでした。パスは驚くほど簡単でした:

 <code>Code > Buy Domain > Find/Buy Hosting > Update Nameservers > Upload Code > Live!</code>
ログイン後にコピー

(ドメインとホスティングに同じプロバイダーを使用している場合は、名前をスキップします。)

ウェブサイトを立ち上げることは達成可能です。このプロセスには手順が必要ですが、忍耐力があると管理可能です。あなたの創造物を共有することの満足は計り知れません。私の最初の期待を超えています。 Webコミュニティの共同精神は、私の学習の旅を通して非常に貴重でした。

私はあなたの経験を聞きたいです!あなたの課題と成功は何でしたか?それは最初に思われたのと同じくらい困難でしたか?

以上がウェブサイトを立ち上げるための初心者の旅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

それは&#039; Vueチームにそれを成し遂げてくれておめでとうございます。それは大規模な努力であり、長い時間がかかったことを知っています。すべての新しいドキュメントも同様です。

Redwood.jsと動物相を使用してイーサリアムアプリを構築します Redwood.jsと動物相を使用してイーサリアムアプリを構築します Mar 28, 2025 am 09:18 AM

最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました

ブラウザから有効なCSSプロパティ値を取得できますか? ブラウザから有効なCSSプロパティ値を取得できますか? Apr 02, 2025 pm 06:17 PM

私はこの非常に正当な質問で誰かに書いてもらいました。 Leaは、ブラウザから有効なCSSプロパティ自体を取得する方法についてブログを書いています。それはこのようなものです。

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

CI/CDで少し CI/CDで少し Apr 02, 2025 pm 06:21 PM

「ウェブサイト」は「モバイルアプリ」よりも適していると言いますが、Max Lynchからのこのフレーミングが好きです。

レスポンシブデザインのブラウザを比較します レスポンシブデザインのブラウザを比較します Apr 02, 2025 pm 06:25 PM

これらのデスクトップアプリがいくつかあり、目標があなたのサイトをさまざまな次元ですべて同時に表示しています。たとえば、書くことができます

WordPressブロックエディターでのマークダウンとローカリゼーションを使用します WordPressブロックエディターでのマークダウンとローカリゼーションを使用します Apr 02, 2025 am 04:27 AM

WordPressエディターでユーザーに直接ドキュメントを表示する必要がある場合、それを行うための最良の方法は何ですか?

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? Apr 05, 2025 pm 05:51 PM

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

See all articles