Netlify

Netlifyで静的サイトをホスティングする(3) 細かい設定など

  • POST
Netlifyを使う最低限の設定もおおよそ終わりましたが、もう少しだけ細かい設定を行っていきます。 netlifyのサブドメインを独自ドメインへリダイレクトする 何もしなければ独自ドメインを使用する場合もhttps://example.netlify.comでアクセスすることはできますが、同じコンテンツに複数のURLが存在することは好ましくないと思いますし、hugoのthemeで絶対URLが記載されていた場合はそもそもサイトが正常に機能しない可能性があります。あとはサイト内に独自ドメインが表記されていた場合にブラウザのURLと異なりユーザが混乱する、等の不都合が発生します。 ということで、https://example.netlify.comを独自ドメインにリダイレクトするよう手当てします。 Netlifyでは_redirectsというファイルを公開するコンテンツのrootに配置した場合、その内容に従ってリダイレクトさせることが可能です。 このファイルでできることの詳細はドキュメントを参照していただければと思いますが、単純にNetlifyのサブドメインを独自ドメインにリダイレクトさせる場合、下記のような表記をすることとなります。 # 転送元のURL 転送先のURL ステータスコード https://example.netlify.com/* https://www.example.com/:splat 301! 上記例では、https://example.netlify.com/ を含むすべてのURLへのアクセスをhttps://www.example.com/へステータスコード301でリダイレクトします。:splatは*の内容が置き換えられるため、サブディレクトリ以下もすべてリダイレクトされることとなります。 _redirectsの配置場所は公開ディレクトリのrootに配置すると書きましたが、サイトをzipでアップロードする場合は自分でzipに_redirectsを含めればよいのですが、hugo等の静的コンテンツジェネレータを使用してNetlifyで自動ビルドする場合はそうはいかず、何らかの手段で公開ディレクトリに配置する必要があります。ビルド時にファイルをコピーしてもよいのですがスマートではない気がしたので、私の場合はこのファイルもhugoに生成させることにしました。 基本的にはレイアウトを作成し、そのレイアウトにデータを差し込むことでファイルを作ります。html等と同じ流れですが、独自のファイルタイプを定義する必要があります。 config.tomlには下記のように記載しました。まず、拡張子の無いファイル向けのmimetypeをtext/noneと定義しています。 次に、_redirects用のフォーマットとして上記mimetypeを用いて_redirectsというファイル名でファイルを生成するよう定義しました。また、ドメインを変更する機会はないと思いますがテンプレートなので_redirectsに転送元URLをハードコードするのはなんだかなぁ、と思ったので転送元URLをparams.netlifyとしてパラメタ化しています。 # custom mimetype [mediaTypes."text/none"] suffix = "" delimiter = "" # format for _redirects [outputFormats.REDIRECTS] mediatype = "text/none" baseName = "_redirects" isPlainText = true notAlternative = true [params.netlify] originURL = "https://example.netlify.com" Sponsored Link (adsbygoogle = window.adsbygoogle || []).push({}); 次にテンプレートとしてlayouts/index.redirectsを下記のように作成しました。hugoを使用する場合.Site.BaseURLはconfig.tomlで定義されているはずです。 {{ .

Netlifyで静的サイトをホスティングする(2) 独自ドメイン設定 ~ HTTPS化

  • POST
今回はNetlifyにて独自ドメインやHTTPS化の設定を行っていきます。 自動生成されたURLを変更する Netlifyでは、サイト作成直後はhttps://president-cushion-68227.netlify.comのようなpresident-cushion-68227の部分が自動生成されたドメインとなります。独自ドメインを使用するにせよしないにせよ、自分で管理しやすい文字列に変更したくなるのは人間のサガなのでしょう。ということでこれを変更します。 設定画面のSite information内、Change site nameをクリックするとnetlify.comより前の部分が入力できるようになるので、入力後Saveをクリックするだけです。簡単ですね。 capture at Netlify capture at Netlify 独自ドメイン設定 Webサイトを作ると独自ドメインで運用したくなるものですね。NetlifyとDNSで独自ドメインの設定を行っていきます。 Netlifyの設定 Domain settingsからCustom domainの項目内、Set a custom domainをクリックします。 capture at Netlify その後独自ドメインを入力し、Saveをクリックします。 capture at Netlify その後、This site is using the custom domain ******と表示されればNetlify側での設定は完了です。簡単ですね。 capture at Netlify DNSの設定 今回はwww.example.comのように、サブドメインとしました。Netlifyのサイトを見ていると、CNAMEでネイキッドドメインを使用することは推奨していない様子。NetlifyのCDNが利用できなかったり、そもそもMXレコードやTXTレコードが使用できない、といった制約が発生するから、とのこと。 DNSサーバによってはANAME(NS1)レコードやALIASレコード(DNS Made Easy, Route53)が用意されており、これらを用いてネイキッドドメインを使用することは問題無いようです。 今回はお名前.

Netlifyで静的サイトをホスティングする(1) アカウント作成 ~ GitHub連携

  • POST
このブログをどこに配置しようかと考えた際に、VPSやパブリッククラウドは構築や運用が面倒なのでもっと楽な環境に配置しよう、と考えました。かつ無料。お金はかけたくない…(ドメインはお金払ってるけど) Netlifyを使う hugoで静的コンテンツを生成するので、GitHub Pagesあたりに置いてCloudFlareでhttps化しようかと思ったのですが、2つのサービスを使うのも面倒だと思いhttpsをやめるか、いやいやもっと別のサービスを使うか、と思っていたらNetlifyを見つけました。 Netlifyであれば無料で静的コンテンツのホスティング、さらに独自ドメインでhtttpsが使えて無料…!ということでひとまずNetlifyを使ってみて、問題があればGitHub pages+CloudFlareに変えればいいか、ということで今回はNetlifyにデプロイするまでのことを書いていきます。 Netlifyは他にも CDN DNSサーバ フォーム などなど、色々な機能がてんこ盛りです。 アカウント作成 トップページ右上のSign Upボタンよりアカウント作成を行います。 メールアドレス+パスワードでアカウント作成を行うことも可能ですが、GitHubやBitbucketのアカウントと連携させてSSOすることも可能です。 私はメールアドレス+パスワードでアカウントを作成しましたが、メールでVerificationコードが送られてきて、その値を入力することでアカウント作成は完了しました。 プロジェクト作成 Netlifyでデプロイする方法は下記3つです。 zipでアップロード GitHubやBitbucketと連携してデプロイ CLIでデプロイ ひとまずzipをアップロードしてみました。ログイン直後の画面にzipファイルをドラッグアンドドロップすることでアップロードできます。 capture at Netlify アップロードした内容はディレクトリにindex.htmlだけ入れてzipしたものです。 $ tree hello_netlify hello_netlify └── index.html 0 directories, 1 file $ cat hello_netlify/index.html <!DOCTYPE html> <html> <head> <title>Hello Netlify!</title> <meta charset="utf-8"> </head> <body> Hello Netlify! </body> </html> $ zip hello_netlify.zip hello_netlify/* $ ls | grep zip hello_netlify.