静的ページをnetlifiyとGithub連携で使って少し苦労したこと。 [web]
今まであったプロバイダのホームページをnetlifyに移動した。プロバイダのHPは放置状態だけど、プロバイダをもしも契約を止めた時には役に立つだろう。ともあれ、FTPでプロバイダのサーバにつないで、ファイルを落としてくる。元のファイルなんてローカルのどこにあったのかなんて忘れている。そもそも今使っているマシンの中にはない。
そもそも何でこんなことをしようかと思ったのかだけども、静的ホームページを置くサイトがタダでは他にほとんどなかったりするからなんだよね。ブログとかはたくさんあるしWikiとかもある。だけど、自分で作るHTMLとかをあげるサイトってのはかなり少ない。今時HTMLを直打ちしているという人は少ないんだろうけども、技術的に静的サイトを使いたいということもあるので、検証サイトとしてのその存在は貴重だ。
静的サイトの検証とかは別にローカルでやればいいじゃないかと思うかもしれないですが、それを公開したいなという気持ちはあるじゃないですか。ブログだって自分だけのために日記みたいに書いている人は、公開せずに自分のパソコンの中に入れておけばいいんだろうけど、みんなブログとかに上げてそうしていないよね。まぁそういう流れと同じです。
ブログとかでもいいんだけど、CSSとかJavaScriptを別ファイルに保存して置いておくってことができないから、記事の中に埋め込んだりするのってのは厳しいんだよね。それとちょっとした配布ファイルがあったりするときに、怪しいファイル共有サイトに置くのも何だし、クラウドのストレージからURLを貼るっていうのも不特定多数に上げるやり方としては気持ち悪いし。なんだかんだで、静的サイトの需要がある、という前提。
FTPで落としてきて、Netlifyのサイトでドラッグ&ドロップして、ファイルをアップロードできました。Sitesのページの下側にある「Want to deploy a new site without connecting to Git?
Drag and drop your site folder here」と書いてあるエリアにフォルダを落っことすだけです。
へんなサイト名がつくので変えたほうがいいとは思う。
それでおしまいでもよかったんだけど、GitHubを使っているのでそれと連携をさせてみようかと思います。すでに静的なサイトなので、今流行っているGutsbyJSでジェネレートして云々という便利な話ではありません。そんなわけでNetlifyの本領発揮というわけにはいかないですが、GitHub連携というところは味わえると思います。
まずFTPで落としてきたファイルをローカルでgitで管理します。ディレクトリに移動して
でとりあえずローカルの準備はできました。次はGitHubですね。
GitHubは人に見せないプライベートの設定ができるので、それを使ってみました。HPのディレクトリを晒すのもなんなので、見せないようにします。他人に見せなくてもNetlifyには連携して見られるようになるので問題ありません。別に見せてもいいんだけど、ローカルディレクトリを公開しているようで抵抗感が少しある。まぁOSSを公開しておいて言うのもなんだけど。
リポジトリを作ると、入れ方ガイドが出てくるので、先に作ったローカルリポジトリに行ってその通りにやります。
この後はgit pushだけでOKだったんだったっけかなぁ。忘れたけど。
細かくこっちに書いてあるので、わかりにくい人はそちらで見てください。
https://qiita.com/Futo_Horio/items/4d669f695680bc13d5fa
そんでGitHubに載ったのか確かめておきます。大体は同じディレクトリがGitHubに配置されると思います。それをそのまんまNetlifyに上げます。次はNetlifyの設定です。
NetlifyでGitHubのユーザーでSignUpして、「Sites」ページの「New site from Git」ボタンを押します。それからはGitHubを選んで、作ったGitHubのリポジトリを選びます。ソフトウェア開発リポジトリは他にあっても見えないみたいですね。そこのところはインテリジェンスに寄り分けてくれるみたいですが、どういう仕組みになっているんだろ。
「Deploy Site」ボタンを押すと、GitHubからファイルが転送されて、適当な名前でサーバが作られてリンクを押すとデプロイされたサイトが見えます。ただルートディレクトリにindex.htmlなどがないと、サイトがないよと言われてしまうかもしれません。その時は、URLを加えてファイル名を指定してあげてください。まぁそれは普通のサイトと同じです。
Gitで管理したファイルがそのままNetlifyのサーバに送られるわけですが、サイトのルートにそのまま置かれるのは嫌だなと思って、設定があるかと思って探してみました。
「Site Settings」のボタンで、「Build & deploy」のところをクリックすると、「Build Settings」に「Publish directory」とあるので、そこにファイルが置かれるんだろうなと思って、適当に名前をつけたんですが、その後デプロイが失敗しました。
実際のデプロイの仕方なんですが、いつもはGitHubを更新すると、Netlifyの方も更新してくれるみたいです。なんと面倒がないことでありがたい。でも、Netlify側の設定を変えたのを反映させるためには、少し操作をしないといけません。
デプロイサイトを選んだ状態で「Deploys」ページの「Trigger deploy」の「Deploy Site」か「Clear cache and deploy site」を選びます。前のを残したくない場合は、後者でやるのかもね。
そうやって自動的以外に意図的にデプロイできるんだけど、失敗した時は原因を見つけてデプロイし直さないといけない。
先に「Build Settings」に「Publish directory」を設定して、そこにデプロイしようとしたのだけれど、実際は「Publish directory」というのは、GitHubにある（他のサイトでも同じだとは思うけど）ディレクトリを指定してあげるようで、Netlify側のディレクトリではないことがわかった。
なので公開されるサイトのディレクトリは、Netlify側でコントロールできないみたいだ。もしかしたらやり方があるのかもしれないけど、たぶんGit側を操作したほうが早い。
具体的には、gitのルートディレクトリに別のディレクトリを作ってそのまま退避させることを考えます。
とすると自分のディレクトリも入ってしまっているので怒られる。面倒だけど個別のファイルを動かしてあげるしかない。
としてold_siteに全部移動して、GitHubに移動させた。GitHubもその構成に変わっているので、Netlifyにも反映されているはず。Netlify側が反応していなかったら、前の手動デプロイでやってみましょう。
そんな感じで固定的な静的サイトの移行は終わったのでした。今後はGitHub経由でできることになりますね。
そもそも何でこんなことをしようかと思ったのかだけども、静的ホームページを置くサイトがタダでは他にほとんどなかったりするからなんだよね。ブログとかはたくさんあるしWikiとかもある。だけど、自分で作るHTMLとかをあげるサイトってのはかなり少ない。今時HTMLを直打ちしているという人は少ないんだろうけども、技術的に静的サイトを使いたいということもあるので、検証サイトとしてのその存在は貴重だ。
静的サイトの検証とかは別にローカルでやればいいじゃないかと思うかもしれないですが、それを公開したいなという気持ちはあるじゃないですか。ブログだって自分だけのために日記みたいに書いている人は、公開せずに自分のパソコンの中に入れておけばいいんだろうけど、みんなブログとかに上げてそうしていないよね。まぁそういう流れと同じです。
ブログとかでもいいんだけど、CSSとかJavaScriptを別ファイルに保存して置いておくってことができないから、記事の中に埋め込んだりするのってのは厳しいんだよね。それとちょっとした配布ファイルがあったりするときに、怪しいファイル共有サイトに置くのも何だし、クラウドのストレージからURLを貼るっていうのも不特定多数に上げるやり方としては気持ち悪いし。なんだかんだで、静的サイトの需要がある、という前提。
FTPで落としてきて、Netlifyのサイトでドラッグ&ドロップして、ファイルをアップロードできました。Sitesのページの下側にある「Want to deploy a new site without connecting to Git?
Drag and drop your site folder here」と書いてあるエリアにフォルダを落っことすだけです。
へんなサイト名がつくので変えたほうがいいとは思う。
それでおしまいでもよかったんだけど、GitHubを使っているのでそれと連携をさせてみようかと思います。すでに静的なサイトなので、今流行っているGutsbyJSでジェネレートして云々という便利な話ではありません。そんなわけでNetlifyの本領発揮というわけにはいかないですが、GitHub連携というところは味わえると思います。
まずFTPで落としてきたファイルをローカルでgitで管理します。ディレクトリに移動して
git init git add . git commit -m "first commit"
でとりあえずローカルの準備はできました。次はGitHubですね。
GitHubは人に見せないプライベートの設定ができるので、それを使ってみました。HPのディレクトリを晒すのもなんなので、見せないようにします。他人に見せなくてもNetlifyには連携して見られるようになるので問題ありません。別に見せてもいいんだけど、ローカルディレクトリを公開しているようで抵抗感が少しある。まぁOSSを公開しておいて言うのもなんだけど。
リポジトリを作ると、入れ方ガイドが出てくるので、先に作ったローカルリポジトリに行ってその通りにやります。
git remote add origin https://github.com/ユーザー名/リポジトリ名.git git push -u origin master
この後はgit pushだけでOKだったんだったっけかなぁ。忘れたけど。
細かくこっちに書いてあるので、わかりにくい人はそちらで見てください。
https://qiita.com/Futo_Horio/items/4d669f695680bc13d5fa
そんでGitHubに載ったのか確かめておきます。大体は同じディレクトリがGitHubに配置されると思います。それをそのまんまNetlifyに上げます。次はNetlifyの設定です。
NetlifyでGitHubのユーザーでSignUpして、「Sites」ページの「New site from Git」ボタンを押します。それからはGitHubを選んで、作ったGitHubのリポジトリを選びます。ソフトウェア開発リポジトリは他にあっても見えないみたいですね。そこのところはインテリジェンスに寄り分けてくれるみたいですが、どういう仕組みになっているんだろ。
「Deploy Site」ボタンを押すと、GitHubからファイルが転送されて、適当な名前でサーバが作られてリンクを押すとデプロイされたサイトが見えます。ただルートディレクトリにindex.htmlなどがないと、サイトがないよと言われてしまうかもしれません。その時は、URLを加えてファイル名を指定してあげてください。まぁそれは普通のサイトと同じです。
Gitで管理したファイルがそのままNetlifyのサーバに送られるわけですが、サイトのルートにそのまま置かれるのは嫌だなと思って、設定があるかと思って探してみました。
「Site Settings」のボタンで、「Build & deploy」のところをクリックすると、「Build Settings」に「Publish directory」とあるので、そこにファイルが置かれるんだろうなと思って、適当に名前をつけたんですが、その後デプロイが失敗しました。
実際のデプロイの仕方なんですが、いつもはGitHubを更新すると、Netlifyの方も更新してくれるみたいです。なんと面倒がないことでありがたい。でも、Netlify側の設定を変えたのを反映させるためには、少し操作をしないといけません。
デプロイサイトを選んだ状態で「Deploys」ページの「Trigger deploy」の「Deploy Site」か「Clear cache and deploy site」を選びます。前のを残したくない場合は、後者でやるのかもね。
そうやって自動的以外に意図的にデプロイできるんだけど、失敗した時は原因を見つけてデプロイし直さないといけない。
先に「Build Settings」に「Publish directory」を設定して、そこにデプロイしようとしたのだけれど、実際は「Publish directory」というのは、GitHubにある（他のサイトでも同じだとは思うけど）ディレクトリを指定してあげるようで、Netlify側のディレクトリではないことがわかった。
なので公開されるサイトのディレクトリは、Netlify側でコントロールできないみたいだ。もしかしたらやり方があるのかもしれないけど、たぶんGit側を操作したほうが早い。
具体的には、gitのルートディレクトリに別のディレクトリを作ってそのまま退避させることを考えます。
mkdir old_site git mv * ./old_site/
とすると自分のディレクトリも入ってしまっているので怒られる。面倒だけど個別のファイルを動かしてあげるしかない。
git mv *.* ./oldsite/ git mv 個別のディレクトリ ./old_site/ git push
としてold_siteに全部移動して、GitHubに移動させた。GitHubもその構成に変わっているので、Netlifyにも反映されているはず。Netlify側が反応していなかったら、前の手動デプロイでやってみましょう。
そんな感じで固定的な静的サイトの移行は終わったのでした。今後はGitHub経由でできることになりますね。
タグ：Netlify
コメント 0