Web初心者が、たった一日でゼロから自分のサイトを作った方法 [英語でやってみたい人向け]

履歴書代わりにもなり、テクニカルスキルのアピールもできるパーソナルサイト、持っている人も多いですよね。私も作んなきゃ…と思いつつずっと放置して来たのですが、ウェブについて学ぶいい機会になるかと思って一から作ってみました。よしやったろ!の勢いだけで作ったので、荒っぽいところも多いですが、興味がある方に参考になったらいいな。

ちなみにアメリカで仕事を探すときはウェブ上で応募することが多いのですが、最近は応募する際に履歴書とカバーレターだけでなく、LinkedInやFacebook、さらには「あなたのウェブサイトのリンク」まで貼るセクションが設けてあるところが多いです。IT系の仕事をしている人はだいたい個人サイトを持っているんじゃないかな、と思います。

この記事は「サーバー?ドメイン?なにそれ…?」状態の私が一日がかりで自分のパーソナルサイトを作った記録です。一般化できるほど知識がないので、「サイトを作る方法」ではなく「作った方法」として、私個人がどうやってやったかの記録になります。ボーナスとして私がつまずいたところも載せてありますが、もっと知識をためてからやればそんなことなかったのかもしれないし、もしかしてなんか大きなミスをしてるかもしれません。特にセキュリティのことがよく分かってないので、ちょっと不安。私がもっとウェブについて勉強するにつれてこの記事をアップデートできればなと思います。

またこの記事はサーバーとドメインを確保してとにかく公開するところまでの記事です。自分のサイトの内容を充実するところまでは手が回っていません(なにせ一日でやりたかったので)。サイト自体を一から自分でデザインしたい、という場合はHTMLとCSSの勉強をしないといけないので、さらに時間がかかるかと思います。詳しいきちんとした説明は、できるだけ参考にしたリンク先を見ていただければと思います。

最後にもう一個、私はアメリカの会社を使っているのですが、日本からサイトを作る時は、ロリポップとかエックスサーバーとか、お名前.comとかの方がメジャーみたいです。詳しいおすすめはぐぐるといっぱい出てきます。参考:プログラミング知識ゼロ!ウェブ初心者の私が「ブログ」と「会社ウェブサイト」を自力で制作した方法を教えるよ!

その前に:なんで公開するところの記事なの?

大体のサイトで「ホームページの作り方」を見ると、HTMLから始まってjQueryとかPHPとか難しそうな単語の説明がしてあって、目次の一番最後に公開の手順が載ってることが多い気がします。一から説明してあるのですごく分かりやすいんですけど、私はとにかくウェブに何かのせたい!自分の書いた文字がウェブサイトに表示してあるのが、見たい!細かいことはそれからだ!と思ったので、とにかくそこを目指して始めました。先にお金を払う形にはなりますが、どうせいずれお金を払うのであれば、先に払って自分にプレッシャーをかけたほうがいいかなと思いました。ジョギングを始める前にかっこいいランニングシューズを買って、テンションを上げるのと同じです。同じように感じている人の参考になればいいな、と思って書いてます。

では、以下、実際に私が踏んだ手順とかかった時間の目安を書いていきます!

基本用語を理解する [目安 2時間]

とりあえず全体像を把握するために、グーグルで「ウェブサイトを作る方法」「ホームページ 初心者」などをたくさん検索して、片っ端から読んでいきます。

特に参考にしたのは、こちらのリンク:

この記事最高!めっちゃくちゃ分かりやすいです。イラスト付きで、色使いも見やすくて可愛いし、何よりこの記事一本で基本用語が全部網羅してあるので、基本的な概念が分かります。

この記事は本当に初心者向けで、サーバーとドメインの説明が分かりやすいです。私はワードプレスを使わずに自分でやってみたかったのですが、これを読んで「とにかくサーバーとドメインが必要なのね」ということがわかりました。

ドメインを買う[目安1時間]

というわけで早速ドメインを手に入れます。ドメインは世界に一つしかなくて早い者勝ちなんだったら、一番最初にやったほうがいいかなと思った…という単純な理由です。

アメリカのドメイン大手はいろいろあるのですが、最大手かつコンピューターサイエンス専攻の友達がオススメしていたGoDaddy(ゴーダディ、訳して「いけ!お父さん」)というサイトで買いました。

日本だとお名前.comが最大手みたいですね。

サーバーを買う[目安1時間]

これもいろいろ大手があります。今回はWordPressではないですが、参考までにWordPressがオススメするしっかりとしたホストは、Bluehost, DreamHost, Flywheel, SiteGroundの四つ。これも前述した友達が使っているからとすすめられたので、DreamHost(ドリームホスト、1996年からある老舗サービスです)でさっくりと買いました。

日本だとロリポップ、エックスサーバー、ヘテムルとかが人気みたいです。

1年プランか3年プランか迷ったんですけど、これ、買う時点での一括払いなんですよね。今お金があんまりないので、とりあえず1年のプランにしました。ここで大事なこと!!!DreamHostはどうも毎月割引キャンペーンみたいなのがあるようなのです。買う前に、「DreamHost gift code」とググったらいくつか出てきました。ここで出てきたギフトコードを、支払い画面のGift Codeに入力して、効くか試してみます。効いたら儲けものだし、効かなかったら普通に料金を支払うだけです。私はたまたま発見したコードで50ドルくらい割引になりました。オンラインショッピングするときはこうやってギフトコードを探すのが大事です。

ここまで書いて気づいたのですが、私、GoDaddyでギフトコード探さなかった…….自分で「大事です」とか書いといて….今調べたら、GoDaddyもギフトコードいっぱいあるみたいです。まあドメインは10ドルくらいだったので、定価120ドルとかのDreamHostで気づいただけよしとしよう…

買うときに、ドメインを入力する場所があるので、さっき買ったドメインを入れます。これでサーバーとドメインはきっと準備完了。DreamHostから買ってくれてありがとう、FTPがどうのこうのというメールが来るのですが、意味がわからないのでとりあえず今は無視。

簡単なHTMLコードを書いてみる[目安1~2時間かもっと]

ウェブページっていうのは、HTMLで書いてあるファイルを、ブラウザが表示したもの。ということは、次は「HTMLで書いてあるファイル」が必要になります。これが自分のページになります。上に書いたように、とにかく内容はどうでもよかったので、難しいローカル環境の開発とかは後回しにして、簡単なHTMLファイルを書きます。

ここは、ドットインストールのHTML入門を参考にして、最初のいくつかのビデオだけ見て全く同じhtmlファイルを作りました。正味10分のHTML入門。一応新しいサイトに表示されるので、「Hello World」を自分なりのメッセージにさし変えます。「準備中です!」みたいな。またドットインストールではAtomというテキストエディタを使っていますが、私はこれまた前述の友達にオススメされて、意味もわからずダウンロードしてあったSublime Text 2を使いました。よくその友人の画面を見るとこんな感じになっていて、

かっこよかった、というただそれだけの理由です。Atomでも全然良いと思います。

HTMLのファイルをウェブにのせる[目安 1時間]

ここのステップにたどり着くまでに、しばらくグーグルと格闘しました。みんなサーバーとドメインとHTMLが大事って言うけど、その次は何したらいいの…?ってなったので。結論から言うと、FTPソフトウェアが必要です。これが、自分のパソコン上にあるファイルをサーバーにのせる道具です。

FTPもいろいろありますが、無料で評判も良かったFilezillaをダウンロードしました。

ここで、さっきDreamHostからメールが来ていたFTP何ちゃらが大事になってきます。あのメールに、FTPサーバー、ユーザー名、そしてパスワードが書いてあるので、それをググった参考記事(この記事がとても詳しくて助かりました)に従ってFileZillaに入力します。

これができたら、FileZillaの左側にのってる自分のパソコンの内容からさっき書いた簡単なHTMLファイルを選んで、それで右側にのってる自分のドメイン名のところにアップロードして、完了です!ここも結構私は時間がかかったんですけど(いっこいっこグーグルで調べながらやったので…)でもFilezillaは人気なだけあって、ウェブにたくさん画像付きで説明してある記事が出てきました。

よし完了!

と思ったんですけど、私はここでうまくいかずに、3時間くらい余計にグーグルと格闘しました。

サーバーとドメインをつなげる[目安1時間]

せっかくサーバーまで用意した新品のドメインなのに、アクセスすると404ページが出てしまいます。どうもドメインにアクセスしたときに出て来る404ページがドメインを買ったGoDaddyのやつで、きちんとDreamHostにいってないな、という様子だったので、あっちこっち探したところ、Nameserverというのが一致していなかったのが原因でした。

この記事を参考にして、GodaddyとDreamhostを繋げます:

つまりは、GoDaddyの管理ページで、自分の買ったドメインのnameserverをDreamHostのものに設定し直す、ということですね。

DreamHostが私のドメインにWordPressのファイルを入れてたので、それを抜く[目安1時間]

まるでDreamHostが勝手にやったかのような書き方をしましたが、買ったときにWordPressも入れてね、って設定したような覚えがありました。自分のせいですね。そのせいで、今度は自分のドメインにアクセスすると、用意したHTMLファイルではなく、WordPressのページが出てしまっていたので、DreamHostの管理画面からGoodiesに入って、wordpressのプラグインをなくします。これでwordpressを抜くことができました。

と同時にさっきアップロードした自分のファイルも消えてしまったので、もう一度Filezillaでアップロードし直します。

できた〜〜〜〜〜[喜ぶ時間]

できました!たくさんググってなんとか自分のサイトを一日で公開できました。

やったーーー

あとは、HTMLとCSSの勉強をして、その他のことももうちょっと勉強して、HTMLファイルを充実させていくだけ(なのかな?)。でもとにかくもうサーバーもドメインも用意したし、なんとなくの仕組みが分かっているので、勉強にも気合が入ります。何と言っても目に見えて成果がそのまま自分のサイトに反映されるのが楽しい。

まとめ

この記事を書いてから、私は無料のホームページテンプレをダウンロードして、ドットインストールのHTML入門を終了して、テンプレートをいじって自分用にしたファイルを上げ直しました。楽しかったし、何よりドットインストールが超優秀なので、だいたい一日くらいしかかかりませんでした。

参考になりましたでしょうか?なにせ私も勉強中なので、抜けているところなどあったら教えてもらえると嬉しいです。では。

Leave a Reply

Your email address will not be published. Required fields are marked *