HPYourselfで作ったサイトをインターネットに公開するまでの手順を解説します。
HTMLファイルとWordPressテーマ、どちらの方法でも対応しています。
サーバーとドメインを用意します
ホームページを公開するには、インターネット上の「場所(サーバー)」と「住所(ドメイン)」が必要です。xserverは月額990円〜で、10日間の無料お試しがあります。
xserverを10日間無料で試す※アフィリエイトリンクです。費用は定価と変わりません。
スタンダードプラン(月990円〜)で十分です。6ヶ月以上の契約を選んでください。
お店のURL(例:sakura-cafe.com)を決めます。サーバーと同時申し込みが便利です。
xserverの管理画面から「SSL設定」を選びドメインを追加するだけで完了します。これでhttps://になります。
HPYourselfからファイルを書き出します
HPYourselfのエディターで「HTMLをダウンロード」ボタンを押してください。ページが1つの場合は index.html、複数ページの場合は ZIPファイル がダウンロードされます。
xserverのファイルマネージャーを使います
xserverの「サーバーパネル」にログインして、ファイルマネージャーからHTMLファイルをアップロードします。サーバーパネルとはxserverのサーバー管理画面のことです。
xserverのサーバーパネル(https://www.xserver.ne.jp/login_server.php)にログインします。
「ファイル管理」→「ファイルマネージャー」を選びます。
ドメイン名のフォルダ → public_html フォルダに移動します。
「アップロード」ボタンから以下のファイルをすべてアップロードします。
ブラウザでアクセスして確認します
ブラウザのアドレスバーに取得したドメイン(例:https://sakura-cafe.com)を入力してアクセスしてください。作成したサイトが表示されれば公開完了です。
WordPressインストール込みで申し込めます
xserverはWordPressのワンクリックインストール機能があり、難しい設定なしにWordPressを始められます。
xserverを10日間無料で試す※アフィリエイトリンクです。費用は定価と変わりません。
サーバーパネルから数分で完了します
まず「サーバーパネル」にログインします。サーバーパネルとは、xserverのサーバー管理画面のことです。xserverに登録したメールアドレス宛に届いたメールに記載されているURLからアクセスできます。
サーバーパネルにログインしたら、画面の中から「WordPress簡単インストール」を探してクリックします。
画面上部に「WordPressを追加」というタブがあります。これをクリックするとドメインを選べるようになります。
取得したドメイン(例:sakura-cafe.com)を選択します。初期ドメイン(xxxx.xsrv.jp)ではなく、自分で取得したドメインを選んでください。
入力項目の説明
そのままで大丈夫です。ドメインのトップ(/の後ろは空欄)に設定してください。
お店の名前を入力します。例:カフェ サクラ。後から変更できます。
WordPress管理画面へのログインID。英数字で決めてください。例:sakura_admin
WordPress管理画面へのログインパスワード。「パスワード生成」ボタンで自動生成することをおすすめします。必ずメモしておいてください。
自分のメールアドレスを入力します。WordPressからの通知が届きます。
「WordPressデフォルトテーマ」を選んでください。HPYourselfのテーマを後でアップロードするので、ここでは何も選ばなくて大丈夫です。
「キャッシュ自動削除」はON推奨。「データベース」は「自動で生成する」のままでOK。「メモ」は空欄で構いません。
すべて入力したら「インストールする」ボタンを押します。数分でインストールが完了します。
HPYourselfで出力したZIPをそのまま使います
HPYourselfの「WordPressテーマをダウンロード」ボタンで出力したZIPファイルをWordPressにアップロードします。
https://ドメイン名/wp-admin/ にアクセスしてログインします。
左メニューの「外観」→「テーマ」をクリックします。
「新規追加」→「テーマのアップロード」をクリックします。
HPYourselfでダウンロードした hpyourself-theme.zip を選択して「今すぐインストール」を押します。
インストール完了後「有効化」をクリックします。
HPYourselfのデザインをトップに表示します
WordPressはデフォルトでブログの投稿一覧がトップに表示されます。HPYourselfで作ったデザインをトップページに表示するために以下の設定が必要です。
管理画面の「固定ページ」→「新規追加」で新しいページを作成します。タイトルは「トップ」などにしてください。内容は空で構いません。「公開」を押します。
左メニューの「設定」→「表示設定」をクリックします。
「ホームページの表示」を「固定ページ」に変更して、先ほど作った固定ページを「ホームページ」に設定します。
「変更を保存」を押して完了です。
ブラウザでアクセスして確認します
ブラウザでドメイン(例:https://sakura-cafe.com)にアクセスしてください。HPYourselfで作ったデザインが表示されれば公開完了です。