【2021年にも使える！】ペラサイトを半日で作って独自ドメインでリリースまで行う方法(費用はドメイン代のみ)
下記の記事は2020年に書いたものだが、このやり方はそのまま2021年にも適用できる。 ペラサイト初心者の方で、
- これから試しにペラサイトを作ってみたい
- ペラサイト初心者だけどいきなりお金を払ってまでやるのはちょっと...
という方は、下記のやり方を使えば、少し手間はかかるが、無料で独自ドメイン付きのペラサイトを公開できる。
(なお、ドメイン代のみはかかるので注意。といっても、1年単位で千円ちょっとだが)
【2020年版】ペラサイトを半日で作って独自ドメインでリリースまで行う方法(かかるお金はドメイン代だけ)
最近自身の音楽的な部分での名刺代わりとなるような、簡単な音楽ポートフォリオサイトを作った。
サイトを作った、という表現はだいぶ大げさで、自分の作った音楽を聴くことができるリンク(※)が貼られただけのシンプルなペラサイトに過ぎない。
※あくまで音楽を聴いてもらうことを優先させたため、リンクはなるべくApple Music やSpotifyなど、大半の人が利用しているであろうサービスのリンクを載せるように心がけ、その名義での公式サイトのリンクなどは載せていない。)
音楽聴いて興味持ってくれたら検索してくれるだろうー、という発想である。
サイトを見てもらえれば分かる通り、デザイン自体はなかなか悪くはないものになっていると思う。
(ついでに音楽も聴いてもらって、うん、こっちもなかなか悪くないじゃないかと思ってもらえたら嬉しい)
このデザイン自体は私がしたわけではなく、すでに用意されているHTML5 UPのテンプレートを用いたに過ぎない。
写真などの素材周りは自分のものだが、逆に言うと、発信すべきコンテンツと写真などの素材があれば、こんな感じのペラサイトは半日ほどで作れてしまう。
というわけで、今回は表題の通り、ペラサイトを半日で作って独自ドメインでリリースまで行う方法(かつ、費用はドメイン代のみ) というテーマで書いて行こうと思う。
Netlifyなど最近の個人開発ではスタンダートとなっているようなサービスと連携させながら作るので、2020年版としてみてたが、ここで紹介する内容は別に2019年にもあった手法なので、まあ、割と新しいんだな的な感じで読み取ってもらえたら嬉しい。
目次
今回書いていく内容は以下の通りである。
結構長めの記事となってしまったので、気になる箇所がある方は、まずそこから読んでみても良いかもしれない。
- 【2020年版】ペラサイトを半日で作って独自ドメインでリリースまで行う方法(かかるお金はドメイン代だけ)
- 目次
- ペラサイトを作ってアフィリエイトで副収入は稼げるのか？
- HTML5 UPで好みのテンプレートをダウンロードする
- HTML5 UPのライセンスについて
- サイト内のコンテンツを修正する
- meta情報やFaviconなどを設定する
- Google AnalyticsとGoogle Search Consoleの設定を行う
- Netlifyを使ってリリースを行うため、Githubに作成したソースコードをアップする
- Netlifyを使って作成したページをデプロイする
- お名前ドットコムで独自ドメインを取得する
- NetlifyでカスタムドメインとSSLの設定を実施する
- 【あとがき】プログラミングを学びたい人は、まずGitHubとNetlifyでペラサイトを作ってみると良いかも
- 追記: 2021年版ペラサイト運営に関する記事を書きました
ペラサイトを作ってアフィリエイトで副収入は稼げるのか？
ところで ペラサイト という言葉で検索をかけると、アフィリエイトや 副業 という言葉がセットのようにして検索結果には出てくる。
あまりそっち方面は詳しくないのだが、ペラサイトを作ってアフィリエイトで稼ぐという収益発生手段があるらしい。
副収入はそりゃほしいし、アフィリエイトとか副業という言葉も甘い響きを持っているので、ちょっとペラサイトでアフィリエイトで副業をしており、かつ成功していると書かれているブログなどを読んでいると、ページを作るためにソフトウェアを購入して作成する必要があったり(ホームページビルダー的なもの)や、毎月のホスティング台に1000円ほど必要だと書かれているサイトもあったりした。
勿論それも間違いではないと思うし、私自身はその分野には知識がないのでなんとも言えない。
(一応書いておくが、当然ながら人のやり方にケチをつける気はまったくない。)
実際のところ自分も、とあるサービスをwordpress + さくらのレンタルサーバという構成で、もうかれこれ５年ぐらい運用している。当然毎月サーバー代はかかっているが、まあwordpressを使って楽ちんに運用するための必要経費として考えている。
ただ今回のやり方を実施すれば、独自ドメイン取得費用しか費用はかからない。
独自ドメイン代といっても高額なものでなければ年単位の費用が1000円〜2000円ぐらいだと思う。
勿論、毎月のサーバーホスティング代のようなものは必要ない。
そのため、費用的にはだいぶ安く抑えられる。
ただし、勿論その分、必要になる知識は出てくる。
ざっと挙げると下記のとおりとなる。
またこれに加えてアフィリエイトなどをやるとすると、諸々そっち関連の設定も絡んでくるので、勿論面倒ではあるが、とはいえ、Webページ制作をする上で必須の知識ではあるので、これを機にここらへんを学んでみると、ペラサイトを作ってアフィリエイトで稼ぎたい！副業したい！という方々にもヒットするのではないか？と思い、このような文章を加えさせてもらった。
なお、ここの投稿内では上に上げたものを解説をするつもりはないし、調べればすぐに使い方が書かれた記事は出てくるので、そちらをあたってみてほしい。
例えば ドットインストール - レッスン一覧 で気軽に概要を学んで見ることは可能だ。実際に画面を映しながら説明してくれるので、とてもわかり易い。
(私自身、エンジニアになったばかりのときは上のサイトをよく見ていた)
そして、概要を学んだら、不明点を調べながらひたすら手を動かしてみる。
HTML5 UPで好みのテンプレートをダウンロードする
では本題に入る。
まずはHTML5 UPで好みのテンプレート探すことから始める。
ちなみに上で私が選んでいるデザインは Identity というものになる。
好みのデザインを決めたらダウンロードする。
あとはこのダウンロードした素材を、自身のコンテンツで書き換えていけばOKである。
HTML5 UPのライセンスについて
ここで気になることだが、HTML5 UPを使ってサイトを構築した場合、ライセンス的には問題ないのかということだが、これはライセンスの規約を守っている分には問題ない。
下記のページに詳細は書かれているが、HTML5 UPのライセンスは The Creative Commons Attribution 3.0 License となっている。
デザインのクレジットに HTML5 UP の表記とHTML5 UP自体へのリンクを表示させれば、個人利用でも商用利用でも可能だし、中身を書き換えて問題ない。という作成者にとってはとてもありがたいライセンスとなっている。
と、ざっくり書いたが、一応上のライセンス自体には目を通しておくことをおすすめする。
サイト内のコンテンツを修正する
ここは言わずもがなで、コンテンツを追加・修正するのみ！
ちなみに修正の方針としては、基本的に修正するのはデザインを細かくカスタマイズする必要がなければ index.html だけでも問題ない。
実際自分も index.htmlオンリーで済ませることは多い。
ちなみにHTMLファイルなどの編集にどのソフトを用いれば良いか？と疑問に思う方がいるならば、VSCodeを勧めておく。
自分の観測範囲において(※)2020年においては、ほぼほぼデファクトスタンダードになっている感がある。
※JavaScript界隈になるが、だいたいみんなこれ使っている。個別に設定しないでもダウンロードしてすぐにいい感じの使い勝手で使用できるので、初心者はとりあえずこれ使っておけばよいかと思う
meta情報やFaviconなどを設定する
meta情報などは結構把握していないことも多く、いつも考え出すと頭が痛む。
下記のサイトを参考にして設定したりしている。
Webサイトをリリースする上でmeta情報のセッティングについで、面倒なのがfaviconなどで用いる画像の準備だ。
こちらについて設定したい画像をアップロードすると、各仕様に応じて必要な画像ファイルを生成してくれる超便利なサービスがあるので、もし知らない方がいたらブックマークをおすすめする。
ちなみに自分のmetaタグについては、今日現在ではだいたいこんな感じの記述となっている。ご参考までに。
(ちなみにfavicon関連の記述などは上記 Favicon Generator. For real. で自動生成される記述も含まれているし、HTML5 UP内に初めから記述されているものも含まれている。)
<title>Yuki Shindo a.k.a. shinshin86</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="format-detection" content="telephone=no"> <meta name="keywords" content="Yuki Shindo,shinshin86"> <meta name="description" content="Yuki Shindo (shinshin86) が今まで作ってきた音楽のうち、すぐにインターネット上から聴けるものを中心にまとめた、音楽のポートフォリオページとなります。"> <link rel="canonical" href="https://shinshin86.com/"> <meta property="og:site_name" content="Yuki Shindo a.k.a. shinshin86"> <meta property="og:title" content="Yuki Shindo a.k.a. shinshin86"> <meta property="og:description" content="Yuki Shindo (shinshin86) が今まで作ってきた音楽のうち、すぐにインターネット上から聴けるものを中心にまとめた、音楽のポートフォリオページとなります。"> <meta property="og:type" content="website"> <meta property="og:url" content="https://shinshin86.com/"> <meta property="og:image" content="https://shinshin86.com/ogp.jpg"> <meta name="twitter:card" content="Yuki Shindo (shinshin86) が今まで作ってきた音楽のうち、すぐにインターネット上から聴けるものを中心にまとめた、音楽のポートフォリオページとなります。"> <meta name="twitter:site" content="https://shinshin86.com/"> <meta name="twitter:image" content="https://shinshin86.com/ogp.jpg"> <link rel="stylesheet" href="assets/css/main.css" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> <noscript> <link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
Google AnalyticsとGoogle Search Consoleの設定を行う
google search consoleについてはRelease後、独自ドメインでアクセスできるようになってからで良いと思うが、これらの設定も必要である。
今回の場合、対象となるのが静的なHTMLページとなるので、それぞれの設定はそれほど難しくはないと思う。
自身の場合はGoogle Analyticsで必要となるコードを生成して、index.html内のheadタグ内の最初の指定の位置に貼り付ければ Google Analytics と Google Search Consoleの設定は完了した。
Netlifyを使ってリリースを行うため、Githubに作成したソースコードをアップする
ここから少しエンジニアよりの内容になってくる。
GitHubを初めて触る方はアカウントの登録から始める必要があるので、ここらへんはググって登録してみてほしい。
github アカウント登録方法 などでググれば、問題ないかと思う。
Githubアカウントを作成し終えたら、ペラサイトのソースコードを置くためのリポジトリを作成する。
GitHubは現在無料アカウントでもプライベートリポジトリを無限に作れるようになっているので、とりあえずプライベートリポジトリで作る形で良いと思う。
リポジトリを作成したら、サイトのソースコードをこちらにpushする。
リモートリポジトリの設定方法はGItHubでリポジトリを作った段階で、コマンドが表示されるのでそれをターミナル上に打ち込むことで設定が可能だ。
Netlifyを使って作成したページをデプロイする
次に使うのはNetlifyだ。
こちらのサービスを使って、さきほどGitHubにあげたコードをホスティングすることになる。
Netlifyは無料で静的サイトをホスティングすることができるので、レンタルサーバーのように月額はかからない。
さらにはNetlifyでもとから設定されているドメインで問題なければ無料でサイトを公開することも可能だ。
Netlifyでのアカウント作成方法や実際にサイトを公開する方法だが、記事自体は2018年とやや古いものの、今とあまりやり方変わっていなそうなので、下記の記事を参照しながら進めていけば問題ないかと思う。
Netlifyでサイトをデプロイするときの設定について
今回の場合は、すでにHTMLファイルなどはそのまま公開すればよいだけなので、Netlifyのデプロイ時に下記の項目については空欄で問題ない。
- Build command
- Publish direcotry
ここまででペラサイト自体のリリースは完了だ。
まだ独自ドメインにはなっておらず、Netlifyが用意したドメインとなるが、これであなたのペラサイトには世界中からアクセスができるようになっている。
お名前ドットコムで独自ドメインを取得する
次は独自ドメインの取得となる。
私は独自ドメインを取得する際にお名前ドットコムをよく利用している。情報もネットで検索すればたくさん出てくるので、よくわからない人はここでドメインを取得すれば良いのではないかと思う。
情報もたくさん出ている。
お名前ドットコムで取得したドメインをNetlifyで使う方法については、下記のページがわかりやすく解説されているので、こちらを参照するとよいかと思う。
キャンペーンでお得にドメインが取得できるタイミングを狙うのもあり
より費用を節約したい方は、時折お名前ドットコムでやっているキャンペーンを狙うのもあり。
上手くタイミングが合えば最初の１年間は格安でドメインが取得できたりもするので、かなりお得。
例えば試しにキャンペーンで格安でドメインを取得して、最初の１年間を頑張ってみるのもありかと思う。
１年間もサイトを運営していれば、今後も管理していくモチベーションが保てるかどうかもはっきりするし、２年目も継続するかどうか判断がしやすい。
ちなみにキャンペーン自体は公開されているかはわからないが、会員登録すると時折メールでキャンペーン情報が届くようになるので、とりあえず会員登録しておくのもありかもしれない。
登録するとやたら宣伝が届くようになるのが残念なところだが、コスパ自体は良いと思う。
私も長年使っている。
NetlifyでカスタムドメインとSSLの設定を実施する
ついでにhttpsの設定も行っておこう。
作成したNetlifyページの Domain settings ページの一番下の方に HTTPS という項目があり、そこに設定開始するためのボタンがあるので、そちらをクリックすればOKだと思う。
(ドメインの設定方法についてはこれに限らないが、お名前ドットコムで独自ドメインを取得してNetlifyで使用するやり方の場合はこれで問題なくできるかと思う)
この作業については１分ほどで完了する。
(なお、https化までは多少待つ必要があるので、ボタンをポチりしたら、後は気長に待っておこう。24時間立っても https化されていない場合はなにか設定が悪いのかもしれない。)
【あとがき】プログラミングを学びたい人は、まずGitHubとNetlifyでペラサイトを作ってみると良いかも
ここまででペラサイトのリリースは完了だ。ちゃんと https 化できている状態でリリースも行われており、Google Analytics と Google Search Consoleの設定も完了済みだ。あとはコンテンツに集中するのみである。
またこの方法であれば、コンテンツはGitで管理することになるので、変更履歴などもちゃんと管理できる。
ここ数年はプログラミング学習が流行っている。
一昔前はRuby on Railsで簡単なWebアプリを作りながら、Webアプリの基礎を学んでいくというのが主流だったような気がするが(実際に自分も Ruby on RailsでTwitterのクローンを作りながら、Railsの勉強をしたりした)、今であれば GitHub + Netlify でまずは静的なサイトを作って公開してみる、というのが最初の勉強方法としては結構有効かもしれないなどと思った。
最初はここで書いたようなHTML5 UPなどのテンプレートから初めて、慣れてきたらReactやVueなどを作ってNetlifyでサイトを公開していく、というふうにステップアップしていけば、最近のフロントエンド界隈の技術も学べるので、なかなか良さそうである。
ReactやVueを触ることに慣れれば、必然的に npm もそれなりに触っているだろうし、それらに関連する様々な事柄にも触れていることになる。それらの技術は今やWebアプリを触るなら必須と言ってもいいほどに重要な技術でもあるので、Web関連のプログラミングを勉強していく流れとしてはとても良さそうである。
というわけで、GitHubとNetlifyでペラサイトを作るというのは、プログラミング学習の入門としても良さそうだと思った次第である。
なお、結構駆け足で書いてきたので、分かりにくい箇所などあればコメント頂けたらと思います。
追記: 2021年版ペラサイト運営に関する記事を書きました
新たに2021年版を書きました。といっても、ここに書いてある内容と、同じ手法です。
この手法自体は廃れるとかいうタイプのものではないので、今のところ安定しているかなというのが自分の率直な印象です。
実際、自身もNetlifyはサイト運営を行う上で、かなり活用していますし、Netlifyに関する運営費は毎月0円で出てきます。
