はじめまして、“はふぃ”です。

ごく普通のエンジニアの自分が、ごく普通な視点で学んだことや気づいたことを気ままに記すブログを作り始めました!
そんな記念すべき第一回目の記事は「はじめてのブログ」ということで、この記事がこうやってみなさんに見られるまでに何をしたかを紹介します。

まずはじめに

ブログに関しての知識は皆無のため、もちろん最初は”ググる”ところから。
「ブログ はじめ方」とかで検索すると、とても丁寧にチュートリアルが書かれたサイトがたくさん出てきます。
その中から図が多くてわかりやすそうなサイトを選んで早速スタート!

※ サイトを読むときは”記事の書き方”や”ブログでの稼ぎ方”といった思わず食いついてしまいそうな内容は無視し、ブログを公開するというゴールだけを目指して読み進めることを意識しました

はてなブログかWordPress

新しくブログを始める場合はこのどちらかを選ぶべきだそうです。

それぞれ特徴は…
はてなブログ → 難しいことはよくわからないけれどとにかくはじめたい
WordPress → デザインやカスタマイズもしたい
ということで
「さすがにエンジニアの端くれなんだからある程度はわかるだろう」ということでWordPressを使おうと思います!

サーバーの契約

サーバーをレンタルするのもはじめてだったので、利用者が多いという条件でロリポップエックスサーバーの二択に。
ここから安定しているエックスサーバーと値段が安いロリポップのどちらにしようか迷ったのですが、ブログとしての基盤ができるまではコスパ重視でいいだろうということで最初はロリポップを使うことにしました。

サーバーの契約 | 1. ロリポップの申し込みを行う

まずはロリポップのサイトにアクセスします。

「まずは無料の10日間~」をクリックするとプランを選択する画面になります。いくつかプランがありますが、WordPressが使えないエコノミーと高すぎるエンタープライズはなし。いくつかググってみて最近大幅にスペックが良くなったと書いてあったスタンダードに決定。(オススメに弱い…)

次にアカウント情報入力ですが、後ほど独自ドメインを取得して利用するつもりなのでドメインは適当に。

SMS認証では電話番号を入力し、携帯に届いた認証コードを入れて認証します。

申し込み内容入力画面では、自動更新は忘れるし、バックアップは自分で取るし、ウイルス対策はあるということでオプションは全部OFF。全て入力して画面を進むと確認画面になるので「無料お試し開始」をクリック。

申し込み完了の画面になればOKです。

サーバーの契約 | 2. 料金を支払う

無料期間中ですが払い忘れを避けるために先に料金を支払います。
※ 払い忘れると設定がやり直しになってしまうらしいのでやっておいた方がいいです

ユーザー専用ページの「ご契約手続きへ進む」をクリック。(登録してから1日経ってしまったので09日になっていますが、お試し期間はちゃんと10日でしたよ)

まず自動更新設定をします。詳細は以下の公式サイトにまとまっているのでそこを参照しましょう。
自動更新設定(クレジット決済)
※ 契約期間は「1ヶ月」にしました(6ヶ月以上だと500円で100円やすくなりますが、いつ断念するかわからないので。笑)

これでサーバーの契約は終了です!

独自ドメインの取得

次に独自ドメインを取得します。
独自ドメインがなくてもサーバーの契約時に設定したドメイン(無料ドメイン)を使うこともできるのですが、独自ドメインには以下のメリットがあるので今回は独自ドメインを使います。
・ドメインを変えずにサーバーを変える(ロリポップ → エックスサーバーなど)ことができる
・万が一使っているサーバーのサービスが潰れてもリスクが少ない
・SEO的に有利

ドメインを取得するサイトは利用者が最も多い「お名前.com」を使います。

独自ドメインの取得 | 1. ドメインを決める

まずはお名前.comにアクセスし、検索窓に希望のドメインを入れて検索します。

.comや.netなどいろんなドメインがありますが、選んどけば間違いないと噂の.comに決定!

続いてサーバー選択の項目がありますが、サーバーはすでに申し込み済みなので「利用しない」を選択し、「お申し込みへ進む」。

新規会員登録でメールアドレスとパスワードを入力して「次へ」。会員情報を入力して進むことで会員登録を行います。

独自ドメインの取得 | 2. 料金の支払い

ここからドメインの料金を支払います。
まず「登録年数/オプションの選択」ですが、登録年数は1年、オプションはWhois情報公開代行メール転送オプション(+300円)を設定しました。

次に再び登場するサーバー選択は飛ばし、お支払い方法を選択した後に「申し込む」を押します。「お申し込みを受け付けました」が表示されたら完了!

と思いきや、2週間以内に「【重要】【お名前.com】ドメイン情報認証のお願い」という件名のメールが送られてくるので、認証のURLをクリックしてメールアドレスの有効性が確認されれば本当に完了です!

サーバーでの独自ドメインの設定

さて次は取得した独自ドメインをサーバーに設定します。
この時、ロリポップ(サーバー)側での設定とお名前.com側での設定が必要になるので注意してください。

サーバーでの独自ドメインの設定 | 1. お名前.comでサーバーの設定を行う

まずお名前.com側の設定を行います。
お名前.comの右上の「お名前.com Navi ログイン」からログインをします。

お名前.com Naviにアクセスできたら、グロナビのドメインをクリック。

するとドメインの一覧が並び、先ほど取得した独自ドメインが表示されているはずなので、ネームサーバーの「初期設定」部分をクリック。

「1. ドメインの選択」は飛ばし、「2. ネームサーバーの選択」で「その他」タブを選択します。
タブが切り替わったら「その他のネームサーバーを使う」を選択し、以下の内容を入力して「確認」を押します。

・ネームサーバー1:uns01.lolipop.jp
・ネームサーバー2:uns02.lolipop.jp

設定した内容の確認が出てくるので問題なければ「OK」をクリック。

“完了しました。”という表示が出ればOKです。

サーバーでの独自ドメインの設定 | 2. ロリポップに独自ドメインの設定を行う

次にロリポップ側の設定を行います。
ロリポップにアクセスし、右上のログインから「ユーザー専用ページ」をクリックしてユーザー用のページに進みます。

ログイン後、ユーザー専用ページにアクセスできたら、「独自ドメインを設定する」ボタンをクリック。

独自ドメインの設定画面になるので、「ステップ2. 独自ドメインをロリポップ!に設定する」の「設定する独自ドメイン」と「公開 (アップロード) フォルダ」に独自ドメイン(hafilog.com)を入力して「独自ドメインをチェック」をクリック。

すると確認が表示されるので、問題なければ「設定」をクリック。

完了画面が表示されればOKです。
設定反映まで1時間ほど時間がかかることがあるようなので少し時間を置いてから次のステップへ進みましょう。

独自SSLの設定

さぁ、続いてはサーバーに独自SSLを設定してhttpsでアクセスできるようにしましょう。

ロリポップにログインし、「セキュリティ → 独自SSL証明書導入」をクリックします。

「独自SSL(無料)」という枠に先ほどまでに設定したドメインが表示されているので、以下のように両方のチェックをつけて「独自SSL(無料)を設定する」ボタンを押します。
※ ここでSSLを設定できませんと表示が出る場合は、対象ドメインのDNS設定がロリポップではないなどドメイン関連の設定がうまくいっていない可能性があるので確認してみてください

正常に申請が行われると以下のようにステータスが「SSL設定作業中」に変わると思います。

数分後に再度確認すると「SSLで保護されているドメイン」のタブの方に「SSL保護有効」というステータスでドメインが表示されているはずです。

WordPressのインストール

次はWordPressをサーバーにインストールしていきましょう。

ロリポップにログインし、「WordPressをインストール」ボタンをクリック。

「WordPress簡単インストール」ページに進んだら各項目を埋め、「入力内容確認」へ。
※ パスワードとメールアドレスを入力していませんが、実際は入力してください

確認画面で内容に誤りがなければ「承諾する」を押し、「インストール」を押します。
するとサイトURL管理者ページURL利用データベースが表示されるので「サイトURL」にアクセスしてみましょう。
以下のようにHello world!と共にサイトが表示されれば成功です!

WordPressの設定

WordPressは様々なカスタマイズができるので、やろうと思えばいくらでも改善できます。
しかし、それはこれから徐々にやっていくとして、まずは最低限の設定を行いたいと思います。
ここからのステップはWordPressの管理画面で行うので、”WordPressのインストール”の最後に表示された管理者ページURLへアクセスし、ログインしておきましょう。

WordPressの設定 | 1. URLをhttpsに変更する

“独自SSLの設定”でサーバーにhttpsでアクセスできるようになっているので、WordPressのURLもhttpsに変更します。
WordPressの管理画面のサイドメニューから「設定 > 一般」をクリックします。

タイトルなどを変更できる一般設定画面へ移るので、「WordPress アドレス (URL)」と「サイトアドレス (URL)」でhttp://~https://となるようにsを追加しましょう。
変更したら「変更を保存」を押すことで変更が反映されます。

次にhttpから始まるURLにアクセスされた際に自動でhttpsから始まるURLに移動させるリダイレクトという設定を行います。
ロリポップにログインし、サイドメニューの「サーバーの管理・設定 > ロリポップ!FTP」をクリックします。

すると以下のような画面にアクセスされるので「サイト名のフォルダ(hafilog.com) > .htaccessファイル」の順にクリックします。

ファイルを修正する画面になるので、以下の2行を画像の位置に追加して「保存する」を押します。

RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

設定したらhttpから始まるURLでアクセスしてみてください。自動的にhttpsから始まるURLに切り替わっていると思います。

WordPressの設定 | 2. パーマリンクの設定

パーマリンクとは記事のURLのことであり、SEOなどにも影響するので最初にやっておいた方がいい設定です。
WordPressのサイドメニューの「設定 > パーマリンク設定」へと進みます。

一番下の「カスタム構造」にチェックを入れ、/%postname%を入力し、「変更を保存」をクリックすることで設定完了です。

記事の作成

いろんな設定をしてきましたが、ようやく最終ステップである記事の作成です。
これまでのめんどくさい設定で溜まったストレスを思い思いの記事を書くことで発散しましょう!

WordPressの管理画面にアクセスし、ヘッダーにある「新規 > 投稿」をクリックします。

< WordPress_新規>投稿 >

編集画面になるのでタイトルと本文を記入しましょう。
※ 記事の書き方などは「WordPress 記事 書き方」などで検索すればたくさん出てくるので参考にしてください

全ての記入が完了したら右上の「公開する」をクリックします。
これによって作成した記事がインターネット上に公開されます。

まとめ

長い長い設定、本当にお疲れ様でした!!
キャプチャを撮りながらやっていたので、この記事+実際の設定に3日かかってしまいました…。
ただその甲斐あってここからは自由に記事を書いていくことができるので楽しみですね♪
WordPressも奥が深そうなのでそれらの記事も書いていきたいなーと思っています。

投稿者: はふぃ

若手のWEBフロントエンジニア。最近はバレーボールにハマってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA