検索
ホームページウェブフロントエンドCSSチュートリアルウェブサイトを立ち上げるための初心者の旅

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

私のウェブ開発の旅は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 までご連絡ください。
スタイルのコンポーネントで反応デザインを繰り返しますスタイルのコンポーネントで反応デザインを繰り返しますApr 21, 2025 am 11:29 AM

完璧な世界では、私たちのプロジェクトには無制限のリソースと時間があります。私たちのチームは、よく考えられて非常に洗練されたUXデザインでコーディングを開始します。

ああ、三角形のパンムーブリボンを作る多くの方法!ああ、三角形のパンムーブリボンを作る多くの方法!Apr 21, 2025 am 11:26 AM

ああ、三角形のパンムーブリボンを作る多くの方法

CSSガイドのSVGプロパティCSSガイドのSVGプロパティApr 21, 2025 am 11:21 AM

SVGには、インラインSVGコードが長く複雑になる可能性がある限り、独自の要素、属性、およびプロパティのセットがあります。 CSSとSVG 2仕様の今後の機能のいくつかを活用することにより、クリーンマークアップのためにそのコードを減らすことができます。

交差点オブザーバーのいくつかの機能的な使用は、要素がいつ見えるかを知るためのいくつかの機能的な用途交差点オブザーバーのいくつかの機能的な使用は、要素がいつ見えるかを知るためのいくつかの機能的な用途Apr 21, 2025 am 11:19 AM

あなたはこれを知らないかもしれませんが、JavaScriptは最近かなりの数のオブザーバーを密かに蓄積しており、交差点オブザーバーはその一部です

再び還元運動を好む再び還元運動を好むApr 21, 2025 am 11:18 AM

すべてのCSSアニメーションを捨てる必要はないかもしれません。覚えておいてください、それは還元運動を好み、モーションを好むことではありません。

Google PlayストアにプログレッシブWebアプリを入手する方法Google PlayストアにプログレッシブWebアプリを入手する方法Apr 21, 2025 am 11:10 AM

PWA(プログレッシブWebアプリ)は、しばらく前から私たちと一緒にいました。それでも、クライアントに説明するたびに、同じ質問が表示されます。

HTMLを処理する最も簡単な方法が含まれますHTMLを処理する最も簡単な方法が含まれますApr 21, 2025 am 11:09 AM

HTMLが他のHTMLファイルを含める方法がなかったことは、私にとって非常に驚くべきことです。地平線上に何もないようには見えません

ホバー上のSVGの色を変更しますホバー上のSVGの色を変更しますApr 21, 2025 am 11:04 AM

SVGを使用するには、さまざまな方法があります。どちらの方法に応じて、そのSVGをさまざまな状態または条件で再焦点化するための戦術 - :ホバー、

See all articles

ホット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 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、