ベストアンサー
GitHub Student Developer Pack は、以下のリソースを提供します。独自の firstnamelastname.me ドメインは無料です。私の答えの残りの部分では、なぜ最初は私にとって困難だったのか、なぜあなた自身のウェブサイトを作成することがあなたにとって障壁だったのかについて怒鳴ります。私は学生の聴衆のために意図された短い、やや包括的なガイドを含みます技術的な知識はほとんど、またはまったくなく、自分用にかなり公開された個人用Webサイトを作成します（誰かがあなたの名前をググったときに表示されます）。
独自のウェブサイトを作成するのが本当に難しい理由
ウェブサイトがどのように機能するかを知りたいと思ったとき：高校のテクノロジー愛好家として、私はウェブサイトがどのように機能するかを知りたいといつも興味があり、自分のウェブサイトを持っている人々に本当に感銘を受けました。外見からはとてもシンプルに見えましたが、「ウェブサイトの仕組み」をググって深く掘り下げると、奇妙な略語や複雑な響きの中で迷子になりました。TCP、UDP、IP、DNS、IPv6、 HTML、JS、CSS-リストは続きます。これらの厄介な概念を、私が知っていたコンピューターの明白なものにマッピングする作業は非常に困難であり、座って通過するのに非常に大きな動機が必要なものの1つです。
Webサイトを作成して、それらがどのように機能するかを理解することを決定した場合：いくつかの気の利いた技術会社で得られる可能性のある質問があり、 Glassdoor の年報-
Webブラウザで「google [dot] com」と入力すると、どうなりますか？ （ Googleインタビューの質問：入力するとどうなりますか …）
大学でコンピュータサイエンスを勉強している途中でさえ、私は少しでした彼らがこれらすべてについて私にほとんど話さなかったことを心配しました。欲求不満で、グーグルで調べるためのフォールバックは「ウェブサイトを作る方法」でした。たくさんのマーケティング資金が投入されたので、ドメイン、ホスティング、GoDaddy、HostGator、ルーティング、CSS、HTML、Javascript、jQuery、WordPressなど、まだあまり意味をなさないウェブサイトや用語がたくさんあることに気づきました。 、ブロガーなど。これが今私に表示されているものです。
正直なところ、これらの名前はすべて非常に詐欺に聞こえました- debarghyadas.com [自己宣伝を無視]、そして自分の名前で自分のウェブサイトを作りたかっただけです。コンテンツを配置する方法を学びましょう。
インターネットで物を買うには安すぎることについて：頭を包んだときWebサイトを作成するには、「ドメイン」、Webサイト名、およびWebサイトのコンテンツを含み、「提供する」場所である「ホスティング」を購入する必要があります。このドメインに購入します。私のそれほど根深い質素さを考えると、かわいらしい言葉ではありません。フリーウェアを生活している学生である私は、抽象的なものを購入するために現金を使うことにあまり熱心ではありませんでした。豪華なチョコレートムースケーキにバニラアイスクリームを添えて4ドルを吹くのは簡単だったのに、Whatsappに1ドル支払うのに何年もかかりました。
さあ-これ以上詐欺になりませんか。 「私たちは競争を食い尽くします」？わかりました、ゲイター。
多くの学生（および人々）にとって、お金は参入障壁です。ドメイン（GoDaddyで）を購入するのに年間約10ドルかかり、HostGatorでホスティングを購入するのと同じくらいの費用がかかります。そして、それはあなたが理解できない多くの製品を通してあなたの道を進むことを含みました。それはあなたが毎年支払う必要があることを私にぞっとさせました-それは一度の購入ではありませんでした。
私をやる気にさせるために安くないように頼ることについて：結局、長い骨の折れるプロセスを通して、私はお金を使い果たし、自分自身にそれを納得させました投資は私が必要なスキルを学ぶように動機づけるでしょう。つまり、HTMLは単純だと誰もがいつも言っていましたが、HTMLで作成されたサイトもたわごとのように見えます。多くの混乱がありました。
結局、私は正しかったのですが、ドメインへの投資と5年間のホスティングにより、物事がどのように機能するかを理解するようになり、個人のWebサイトを公開しました。自由時間。
独自のWebサイトを無料で作成するためのある程度包括的なガイド
GitHub Student Developer Pack にアクセスします。はい、これには私が使用したことのないものがたくさん含まれていますが、直接宣伝していない（そしておそらくそうすべきである）のは、ドメイン上のWebサイトを無料で稼働させるためのすべてのツールを提供することです。今は真実ではないように聞こえます。
取引ツール ここに一般的なガイドラインがあります。I個人的には試していませんが、これは物事を進める良い方法だと思います。 Student Developer Packが（無料で）提供する次の有料サービスを利用する必要があります（または利用する必要があります）：
1。 Githubプライベートリポジトリ [オプション]
2。 Namecheap.meドメイン
3。 Namecheap SSL [オプション]
4。 DigitalOceanホスティング
さらに、
1。 ブートストラップ
2。いくつかのオンラインチュートリアルとツール- JSfiddle 3。一部のオンラインテンプレートサイト- StartBootstrap 、 BootstrapZero
上記のツールをどうするか このミニガイドはできるだけシンプルにしようと思います。 「大きな用語の意味がわかっていれば簡単に削除できますが、無知な読者にとっては大きな抑止力になる可能性があります。必要に応じて、より明確に説明して拡張することもできます。
1。プライベートを設定する Github リポジトリ[オプション]
プロジェクトのためにたくさんのコードを書くと、うまくいかないことがたくさんあります。
- マシンから削除され、「失敗」する可能性があります
- 古いバージョンをバックアップせずに新しい機能を追加して、次のような状態にすることができます。機能状態に戻すために必要なCtrl + Z（元に戻す）の数を忘れてください。
- 複数の人が自分のコンピューターで別々に作業している可能性があり、両方を統合する方法がわかりません。プロジェクトのバージョン。
n00bコーダーは、 Dropbox を使用してコードプロジェクトを共有および同期することを提案できます。 「自分で取り組んでいるので、まともな解決策かもしれません。ただし、「上記のリストの2番目の問題に直面することになり、複数の人が同じコードベースで同時に作業しようとすると、非常に夢中になります。
Git （そして昔はヒップスター向けのSVNとMercurial）は、コードを「バージョン管理」するために使用されます。gitはgithubではないことに注意してください。つまり、変更を加えて「上流」にプッシュすることができます。インターウェブ。「リポジトリ」に永続的に保存されます（無料）。Gitは純粋にコマンドラインユーティリティでもあります。つまり、デスクトップでこれらの黒い怖いハッカー画面の1つを開いて、コマンドを入力する必要があります。使用するのは簡単ではありません。Githubはgitと統合されており、アップストリームにプッシュしたリポジトリを確認でき、gitタスクを実行するための多数のGUIを提供します（コンピューター上の通常のアプリケーションのように動作します）。ブラウザからインターネット上のコードベース（リポジトリ）を参照したり、変更を加えたり、変更を最後のチェックポイント（コミット）に戻したりすることができます。
Githubは常に公開された無料のリポジトリを提供していました。つまり、誰でもコードを表示して使用できました（はい、オープンソースライセンスがありますが、私が何を意味するかはご存知でしょう）。基本的に、めちゃくちゃかっこいいたわごとを設計してコンピューターサイエンスを再発明するために本当に一生懸命働くとしたら、仲間は自分のコードを自分のWebサイトに使用するだけです。現在、教育パックを使用すると、5つの無料のプライベートリポジトリを取得できます（ただし、Githubは以前に.eduの学生にもそのサービスを提供していました）。オンラインチュートリアルに目を通し、ウェブサイトコード用のプライベートgithubリポジトリを設定する方法を理解してください。
2。無料の ネームチープ .me domain
長い間、私が知っていた唯一のドメイン販売者はGoDaddyでした。その名前は、私が最終的にそこでドメインを購入することに陥ったにもかかわらず、常に怪しげな印象を与えました。さて、スタートアップの時代には、よりクリーンで安価な代替品、Namecheapがあります。Namecheapは常に安価でしたが、今ではドメインを無料で入手できます！したがって、 firstnamelastname.me ドメインを今すぐ無料で入手してから、非常に一般的な名前が盗まれる前に（まだの場合）、戻らないようにしてください。 90年代のメールの日に、 raj2kul4skul.me を購入してください。お願いします。感動するのは、あなたが「いなくてもいい」友達だけです。
無料だと言いましたか？
3 。 ネームチープ を入手SSL [オプション]
これはオプションですが、まだWebサイトにインストールしていません（GoDaddyではまだ費用がかかるため）。SSL（Secure Sockets Layer）はすばらしいものです。これは基本的に、Webコンテンツを「安全に」提供できることを意味します。また、Webサイトにクールな緑色のロックが適用され、httpの代わりに https Webサイトがあります。本当にクールで本物だと感じます：
技術的になりすぎない限り、知っておく必要があるのは、これは厳密には必要ないということです。私があなたを疑うあなたの個人的なウェブサイトのために “そのような厳格なセキュリティを必要とすることをするでしょう。ただし、「ウェブについて学んでいるのであれば、あなたもそうかもしれません。結局のところ無料ですか？
4。 デジタルオーシャン ホスティング。
Namecheap：GoDaddy :: DigitalOcean：HostGator。
DigitalOceanがHostGatorにあるのと同じように、NamecheapはGoDaddyにあります。代替。ドメインを購入すると、ユーザーに何が提供（表示）されますか？あなたのウェブサイトでしょ？しかし、これらのファイルを私のコンピューターに取り込んで見せることはできません。そうです、そうすることができます。DigitalOceanを使用すると、無料の「ホスティング」を利用できます。DigitalOceanは、1つのホスティングインスタンスを「ドロップレット」と呼びます。
これは、ウェブサイトを仮想マシン（読み取り：コンピューター）にアップロードして、名前の安いドメインに伝えることができることを意味しますそのコンピューターからコンテンツを提供するために。あまり詳細に立ち入ることなく、DigitalOceanが処理する必要のある多くのことが途中で発生します-ウェブサーバーの構成や選択など- nginx または Apache 、およびドメイン上のリクエストを特にファイルのセットにルーティングします。
5。実際のウェブサイトを作成します。
「HTMLを書く」部分に移ります。ウェブサイトの作成には、さまざまな程度の難しさがあります。 FacebookまたはGoogleを作成するためのArialのテキスト「HelloWorld」。通常はintデータを必要とし、状態を含むeractiveアプリケーションは作成が困難です。
おそらく、静的サイト（毎回すべての人に提供される同じテキスト/画像の束）を作成することになります。これははるかに簡単です。おそらく私はしません。このための完全なチュートリアルを書くことはできませんが、大学生が一般的に行うことは、次のことを学び、使用することです-
- HTML スパン>-これはテキスト/リンク/画像/ビデオの実際のコンテンツです
- CSS -これにより上記のコンテンツがきれいに見えます
- Javascript（JS）-これにより、動的な要素ときれいなアニメーションが可能になります。そうではなかった画像を読み込むボタンを作成するとします。 HTMLに追加するか、HTMLにコンテンツを動的に追加します。次に、JSを使用します。簡単な歴史-JSは約10日でその日にハッキングされました、そしてそれはたくさんのバグを含んでいます、そしてあなたがそれをたくさん書くならば非常に冗長で扱いにくいかもしれません。通常、初心者はjQueryのようなライブラリを使用して、冗長性を減らし、簡単にします（ただし、jQueryは、最初はすべての$記号で威圧的に見える場合があります）。
- Bootstrap -Bootstrapは、Twitterによって作成された頼りになるフロントエンドフレームワークです。生のHTMLには、かなり悪いデフォルトの外観のものが付属しています。 HTMLボタンは表示できず、CSSを作成するには時間と実験が必要です（つまり、実際にCSSを「知っている」人は誰もいません）。ブートストラップには、いくつかのファイルのダウンロード、HTMLへの1行の追加、およびおそらくいくつかの読み取りが含まれます。ドキュメント、およびそれらが提供するいくつかのCSSクラスの追加-そして出来上がり！あなたのサイトは自動的にとてもきれいに見えるだけでなく、モバイルにも互換性を持たせることができます（これも重要な試みです）。
6. Webサイトをオンラインにする（デプロイする） localhostをアクティブ化して、ローカル（自分のコンピューター上）でWebサイトの作成とテストを完了したら（ローカルWebサーバー-グーグルそれ。静的サイトではこれは必要ないかもしれません）、非常に便利なChromeデベロッパーツールを使用してCSSをテストおよび混合し、出力に満足したら、Digital Oceanに移動し、サイトを圧縮して、に送信できます。サーバ。すべてが正しく行われた場合は、数秒待ってから firstnamelastname.me にアクセスすると、コンテンツが表示されます。そして、他の誰もができるはずです。
7。優れたウェブサイトを検索可能（SEO）にする
最後のステップはSEO、つまり検索エンジン最適化です。最終的な目標は、うまくいけば珍しい名前を付け、誰かがあなたの名前をグーグルで検索したときにあなたのウェブサイトをトップの結果の中に入れることです。これには時間がかかる場合があります（ただし、現在は金銭的なコストで実行できます）。これを行うにはたくさんの方法があり、それらすべてをグーグルで検索できます。FacebookをFacebookに関連付ける方法、使用したことのない古いG +アカウント、カスタムメタデータを追加してGoogle検索に表示する方法があります。 、など。最終的には、数週間以内に、あなたの名前が非常に一般的であるか、残念ながら有名人と同じでない限り、あなたはGoogleでトップ数の結果の1つになるはずです。
知っておくべきその他の事項
きれいなページを作成するためのショートカットを使用する場合： Webサイトに投入する作業量に応じて、いつでも便利なブートストラップテンプレートをオンラインで入手するか、必要に応じて独自のCSSクラスを手作りすることができます。ユニークな外観、またはシンプルに保ち、基本的なHTML / CSS（これは多くの学者が行うことです）を選択します。たとえば、 JonKleinbergのホームページ。
PHPを知らなくてもよいことについておよびその他の凝ったこと：静的サイトを設計しているため、バックエンドの作成、多数のページの作成、データベースの作成などの凝ったことについての知識はありません。はい、私はあなたと話しているのです。正当な理由もなくPHPとMySQLを使用したい人（必要な場合でも、PHPに近づかないようにしてください）。 「 Ruby on Rails （Ruby）から Django （Pythonの場合）から Play！（JavaとScalaの場合） CherryPy （Pythonの場合） やフラスコ（Python）。 実際、想像できるほぼすべての言語のフレームワークがあります- Webアプリケーションフレームワークの比較ですが、まだそれらを使用/学習して燃え尽きないでください。
Webサイトへの追加を検討するその他の事項：個人のWebサイトに対して実行する可能性のあるその他の事項-
- 画像を圧縮する画像をたくさん使用する場合は、ウェブサイト読み込みに時間がかかります。
- Facebook / Quora / Twitterのソーシャルプラグインを使用
- GoogleAnalyticsを追加（これは実際にはほとんど必須です）。 Google Analyticsを使用すると、特に、Webサイトにアクセスしている人の数、出身地などを確認できます。これは、サイトを更新して最新の状態に保つための（願わくば）素晴らしい動機です。さらに、非常に使いやすい-それはあなたのページにコードのいくつかの行をコピーして貼り付けることを含むだけです。
- スクリプトを縮小します。サイトのJSとCSSの多くは、サイトにアクセスするすべての人に引き続き表示されます。 JS / CSSを非表示にし、縮小したいという非常に興味深いことを実行しました。そうしないと、プライベートリポジトリを持つ目的が損なわれます。さらに、サイトが高速になります。
- あなたのHTMLを暗号化する。繰り返しますが、本当にあなたがあなたのウェブサイトをどのように作ったかを他の人に見られたくない場合は、 HTMLを暗号化して、[ソースの表示]ボタンをクリックしても、Webページに何も表示されないようにする方法。
この回答を書くとき： 多くの人が自分のウェブサイトを作る方法について質問します。短く（議論の余地がある）、理解しやすい小さなチュートリアルを書いて、みんなを助けることが役立つと思いました。それは本当にあなたがあなたの心を設定しなければならないそれらの簡単なことの1つです。ああ、そして私はそれが今無料であると言いましたか？