LoginSignup
2
1

More than 1 year has passed since last update.

Google Sitesを使いHP作成する

Last updated at Posted at 2023-05-14

スクレイピングした店舗情報を、Googleマップにインポートし、HP上に公開しました。
初めてのHP作成で、Google Sitesを使用しました。備忘録です。
スクレイピングの備忘録は、過去に記事を投稿していますが、スクレイプに使ったコードは GitHubにもおいています。
作成したHPはこちら:コスパ101

Google Sitesとは

無料のウェブサイト作成ツール。直感的なインターフェースとGoogle製品との連携が特徴で、誰でも簡単にノンコードでウェブサイトを作成できる。

作り方

Google Sitesから作成する。テンプレートも利用可。
ページは非常に簡単に、直感的に作ることが可能。ここでは詳細は割愛する。

HPを公開する

ドメイン購入

お名前.comや、海外サイトだとnamecheapなどで購入できる。

HP公開

HPの内容が出来たらHPを公開する。Google Sites右上歯車の「設定」をクリック > 「カスタムドメイン」タブの「スタートセットアップ」をクリック
startSetup.jpg

既にドメインを購入済みなので「サードパーティのドメインを使用する」をクリック。(「ドメインを購入」を選択すると、Google Domainに進みドメインを購入することが出来る。)
setUpDomain.jpg

次のページで購入しておいたドメインを入力 >「所有権を認証」をクリック。
domainThirdParty.jpg

(1)「TXT(推奨)」を選ぶ
(2)ドメインを購入したサイトにログイン
(3)DNS設定ページよりレコードを追加する
(4)「認証」をクリック
Untitled.jpg

下記画像は(3)が済んだ、ドメインを購入したサイトのページ
DNS.jpg

次に進む。
(1)ドメインを購入したサイトにログイン
(2)DNS設定ページへ
(3)CNAMEレコードを追加
(4)値もしくはエイリアスに「www」を入力
(5)CNAMEの行き先に「ghs.googlehosted.com.」を入力
(6)保存
(7)このタブに戻りDoneをクリック
cname.jpg

ドメインが接続されました。
次にGoogle Sites右上の「公開」をクリック
setting.jpg

使いたいURLを入力し、「公開」をクリック
publish.jpg

HPが公開されました。
ブラウザに上記で入力したURL「cospa101.com」を入れ、Enterキーを押せば、、、HPが表示されました!
Untitled 2.jpg

HPが表示されない場合

  1. https://www.cospa101.com/ のようにフルURLで表示されるか確認
  2. フルURLで表示される場合、ドメインを購入したサイトのページのDNS設定で値に「174.129.25.170」を追加

Untitled 2.jpg

最後に

初めてHPを作成したが、ノンコードで簡単に作ることが出来た。ただ、ノンコードとはいえ、ドメインの取得、DNS設定など要所要所で学ぶことがあった。普段の学習では触れることのない分野や新しい情報が入ってくるので、このHP作成は引き続き取り組んでいきたい。今後は、サイトの訪問者分析にも手を広げられたら良いと思う。

追記

Googleアナリティクスというものを使えば、作成したHPを分析出来る。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1