簡単に無料で独自ドメインを使ってwebページを公開する

# 概要
[無料のドメインを取得する（2016年10月）](http://qiita.com/teekay/items/135dc67e39f24997019e)というとてもいい記事を見たので、これを使えばオリジナルドメインを簡単に作れるじゃん！と思って実際に使ってみました。他にも色々サービスを組み合わせてwebページを作ってみていくつか注意点も合わせてまとめたいと思います。

# 使ったもの
* [freenom](https://my.freenom.com/clientarea.php)
* [Github Pages](https://pages.github.com/)
* [HTML5 UP](https://html5up.net/)
* [Stock photos](https://stock.tookapic.com/)

# やり方
### 1.HTML5 UPでテンプレート作成
[HTML5 UP](https://html5up.net/)はおしゃれなテンプレートを無料で作れるサービスです。
レスポンシブにも対応していてPCやスマホでもいい感じに見れます。
テンプレート内ににHTML5 UPへのリンクをちゃんと貼っておけば無料で使うことができます。
なのでこれを使ってまずはテンプレートを作成します。

テンプレート内でおしゃれな画像を使いたい場合はこちらから画像をピックアップすると良いと思います
→[Stock photos](https://stock.tookapic.com/)

### 2.Github Pagesに公開
次に先ほど作ったテンプレートをGithub Pagesに公開します。
Github Pagesの使い方についてはこちらが参考になります。
→[Git初心者でも大丈夫！完全無料でGithub PagesにWebページを公開する方法](https://liginc.co.jp/web/html-css/html/96453)に公開します。

これによって先ほど作ったテンプレートがhttps://xxxxxx.github.io というURLで公開できます。

### 3.freenomを使って無料ドメインを作成
freenomというサービスを使うと無料でドメインを作れるので、こちらでドメインを作って先ほどのGithub PagesのURLにフォワードさせます。
freenomの使い方はこちらが参考になります。結構簡単ですぐにできると思います。
→[無料のドメインを取得する（2016年10月）](http://qiita.com/teekay/items/135dc67e39f24997019e)

# freenomについて
先ほどの無料でドメインを取得できるfreenomについての説明と注意点をまとめます。

### なぜ無料でドメインを取れるか
ここで取得できる無料ドメインは[国別コードトップレベルドメイン](https://ja.wikipedia.org/wiki/%E5%9B%BD%E5%88%A5%E3%82%B3%E3%83%BC%E3%83%89%E3%83%88%E3%83%83%E3%83%97%E3%83%AC%E3%83%99%E3%83%AB%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3)です。日本でいうと「.jp」にあたる部分です。一部の発展途上国では誰でも取得できるようにしてるのでその一部の国のドメインを無料で取得できる仕組みになっています。

今回のfreenomで取得できる無料ドメインはこちらです。
* [tk](https://ja.wikipedia.org/wiki/.tk)：オーストララシアにあるニュージーランドの領土であるトケラウ
* [ml](https://ja.wikipedia.org/wiki/.ml)：マリ
* [ga](https://ja.wikipedia.org/wiki/.ga)：ガボン
* [cf](https://ja.wikipedia.org/wiki/.cf)：中央アフリカ
* [gq](https://ja.wikipedia.org/wiki/.gq)：赤道ギニア

### 注意点
#### 1.デフォルトのフォワードはiframeになっている
無料ドメインを取得してGithub PagesにフォワードさせるためにForward modeというのがあります。デフォルトは「Frame」になっていて、これは**iframe**のことです。
![スクリーンショット 2016-12-07 23.39.57.png](https://qiita-image-store.s3.amazonaws.com/0/110485/303b642b-043d-cb07-baed-4e580103016d.png)

無料ドメインのhtmlがこうゆう感じになっています。

```html

<html>
  <head>
    <title>ドメイン.tk</title>
    <meta name="description" content="ドメイン.tk">
    <meta name="keywords" content="ドメイン.tk">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <frameset rows="*">
    <frame frameborder=0 src="フォワード先のURL" name="dot_tk_frame_content" scrolling="auto" noresize>
  </frameset>
</html>
```

無料ドメインなのでもちろんhttpになるのですが、内部ではiframeでページを呼び出しているということは内部で呼び出しているページに**httpsへの遷移を含む場合は[X-Frame-Options](https://developer.mozilla.org/ja/docs/Web/HTTP/X-Frame-Options)の設定によってはうまく行かない場合があります。**
(実際に試して見ましたが、Github Pagesにフォワードさせた場合はPCページ見た時はhttpsへの遷移ができたのですがスマホページではブロックされてしまいました。。)

iframeなので元の**親ページの方のmeta情報やtitleなどもいじれない**と思うので結構制約もあると思います。

#### 2.無料ドメインは危険かも
無料ドメインについてはやはり色々と意見があるようで、こんな記事もありました。
[.tk ドメインが乗っ取られたっぽい](https://blog.kksg.net/posts/tk-domain-fraud)
ここでは最終的に**.tk ドメインは絶対に使わないように**と言っています。
はてぶのコメントとかを見ても無料で取れる分はあくまでテスト的に使うくらいが良いかもです。そのあたりのリスクとのバランスはちゃんと意識した方が良いかもしれません。

# まとめ
とりあえず簡単に無料で独自ドメインを使ってwebページを公開する事自体はできそうですが、ちょっと思ってたのと違うなという印象でした。特にfreenomが中でiframeを使っているあたりは結構微妙だったので、所詮無料だとここまでかなぁという感じでした。
ただほんとお手軽にできるのでちょろっと試したいレベルであれば全然ありなのかなーと思います。