ほとんどのプログラマーは、Webサイトまたは少なくとも独自のWebページを必要とします。 プログラマにとっては、VKontakteアカウントの形式であっても、ほとんどすべての普通の人がすでに自分のWebサイトを持っています。
私はVKontakteアカウントを持っています。Facebookでも私のサイトが適していないので。 余計な、強制されたフォーマット、その他の不便。
私がWeb開発者ではない場合、サボテンを泣いたり噛んだりする必要があります。 幸いなことに、私はそのうちの1人なので、自分でWebサイトを作成することにしました。 このような記事、小さな趣味のプロジェクトなどを投稿するには、Habréのプロファイルの「サイト」フィールドに何かを示す必要があります。
あなたが完全にコントロールできるサイトを持ちたいなら、すべてがあなたの望むとおりですが、それでもあなたの手はそれを理解してそれをするために手を伸ばすことができませんでした、この記事はあなたのためです。
HTMLとJSのいくつかの知識が役立ちます。 Node.jsの経験はオプションです。
記事で説明されている手順をすぐに実行することをお勧めします。それを読んだ後、すでにこのような準備ができたサイトができているでしょう。
それでは始めましょう。
GitHubでリポジトリを作成する
最初に新しいプロジェクトを開始したいプログラマーは何をしますか？ いくつかのバージョン管理システムにリポジトリを作成します。 githubを使用する理由は次のとおりです。
- これは、バージョン管理のための最も便利で機能的なサービスです。
- まだ登録していない場合でも、新しいプロジェクトの作成には数分しかかかりません。
- 無料です。
まだアカウントをお持ちでない場合は、GitHubに登録してください。
システムでGitを構成します。 githubには、各システムに関する優れたマニュアルがあります： https : //help.github.com/articles/set-up-git
サイトで作成したリポジトリ（ http://github.com/daeq/programmer-site ）に移動し、左上隅の[フォーク]ボタンをクリックします。
コードのコピーは、 http：//github.com/ <your name> / Programmer-siteで入手できるようになりました。 名前が気に入らない場合は、[管理者]セクションで名前を変更できます。
現在、リポジトリがあり、将来のサイトのプロトタイプもすでにあります。 続けましょう。
Herokuでアプリケーションを作成する
コードとそれを保存する場所ができたので、ホスティングを選択する必要があります。 アプリケーションサービス、つまりHerokuを使用することにしました：
- ホスティングのセットアップは可能な限り簡単です。 コンソールのコマンドをいくつか実行するだけで、安定したWebサイトができます。 将来、サイトの計算は1つのチームで行われます。
- 通常のUbuntuであるアプリケーションサーバーの下で、httpサーバー以外のものが必要な場合は、簡単に使用できます。
- それは（私たちのニーズのために）無料です。
heroku.comに登録します（まだ登録されていない場合）。
登録後、次のようなプロンプトが表示されます。
それに書かれていることを行う必要があります：toolbeltをダウンロードしてインストールし、コンソールで「heroku login」を実行します。
Herokuでサイトを埋める
ホスティングサービスがあります。Webサイトを配置するときが来ました。
コンソールを開き、ディスク上のディレクトリに移動してコードを入力し、コンソールに入力します。
git clone git@github.com：<your github login> / Programmer-site cdプログラマーサイト herokuアプリ：<アプリ名>を作成します
名前は、すべてのherokuアプリケーションで一意である必要があります。 たとえば、将来のサイトのアドレスを使用できます。
応答として、次のようなものが表示されます。
Heroku資格情報を入力します。 メール：bratchenko@gmail.com パスワード（入力は非表示になります）： 認証に成功しました。 プログラマーサイトの作成...完了、スタックは杉 http://programmer-site.herokuapp.com/ | git@heroku.com：Programmer-site.git Gitリモートherokuが追加されました
Herokuは、サイトをgitリポジトリにプッシュするだけで、サイトのレイアウトをサポートします。 コンソールに入力します：
git push heroku master
エラーが発生しなかった場合は、すべてを正しく実行すると、サイトが<your application name> .herokuapp.com（たとえば、 http： //programmer-site.herokuapp.com/）で利用可能になります。
ドメインをセットアップする
herokuapp.comのアドレスが個人のサイトに適しているとは考えられません。 独自のドメインをバインドします。
まだ自分のドメインを持っていない場合は、たとえば.tkゾーンで無料で登録できます。
http://dot.tkにアクセスします
将来のドメインの名前を入力してください
ip入力フィールドで、 herokuが提供する ipの1つを指定します。 たとえば、
75.101.145.87
です。
完了
herokuのアプリケーション設定に移動し、作成したアプリケーションの[設定]セクションに移動して、[ドメイン]フィールドに将来のドメインを入力し、[追加]をクリックします。 できた
あなたのサイトは30分以内に登録されたドメインで利用可能になるはずです。
サイトの外観を作成します
私の例のサイトテンプレートは比類のない独創的なものであるにもかかわらず、ほとんど残したくないでしょう。 したがって、次の最も難しいだけでなく、最も楽しい部分：サイトにあなたが好きな外観を与えること。
サイトのフロントエンドでは、 Twitter Bootstrapを使用することをお勧めします。
- これは、非常にシンプルでスタイリッシュなフロントエンドフレームワークです。
- その種類の最高の機能：要素の数、標準および追加のウィジェットに関して。
- 多くの人がそれを使用して開発しています。 何らかの変更または非標準の要素が必要な場合、おそらく誰かがすでにそれを行っている可能性があります。
サイトを細かく調整するたびにデザイナーに連絡したくない場合は、Twitter Bootstrapを使用してください。
デザインを自分に適したものにする方法は3つあります。
- PSD形式のTwitter Bootstrap要素を使用してサイトレイアウトを作成するようデザイナーに依頼し、既製の要素から構成します（または、もう一度誰かに依頼します）。
- たとえば、既製のテーマを購入します。https ： //wrapbootstrap.com/
- 利用可能な要素から自分でデザインを作成します。
3番目の段落については、次のリンクが役立つ場合があります。
- http://twitter.github.com/bootstrap/-Twitter Bootstrap Webサイト。 フレームワークの学習を開始することをお勧めします。
- http://bootswatch.com/-無料のTwitter Bootstrapテーマ。 要素の標準的な外観が気に入らない場合は、cssファイルを置き換えるだけで別の要素を選択できます。
- http://stylebootstrap.info/-あなたの好みに合わせて色のブートストラップ
- http://www.google.com/webfonts-Googleの無料フォントのコレクション。 標準フォントが気に入らない-別のフォントを選択してください
- http://google.com/search?q=Twitter+Bootstrapは、Twitter Bootstrapリンクの優れたセットです。 きっと面白いものが見つかるでしょう。
私の例では、レイアウト全体がtplフォルダーにあり、css、js、およびその他のファイルがパブリックフォルダーにあります。
変更の保存と投稿
サイトに必要な変更を加えたら、それらを保存し、ホスティングに新しいバージョンを配置する必要があります。
コンソールのサイトのルートディレクトリで、次の操作を行います。
git commit -a -m「行われた変更の説明」 git push heroku master git push origin master
変更をリポジトリに保存してサイトに配置するために、毎回3つのコマンドを入力するのは冗長に思えるかもしれません。 この手順は自動化および簡略化できますが、すでに多くのテキストを書いています。 自分で考えてください。
この記事が十分興味深いものであることが判明した場合（少なくとも数十個のプラスを取り上げる）、続編があります。
第2部では、マークダウン、コメント、ソーシャルネットワークでの共有、およびいくつかの重要な機能を使用して、同じgithub上のストレージを使用して、作成されたサイトにシンプルだが柔軟で機能的なプログラマーのブログを追加する方法を説明する予定です:)
アクセスできない、または既製のエンジンではうまく動作しないサイトで見たい機能をコメントに書いてください。