Python+Wagtail+Puputでブログを作ろう #2

プログラミング

今回は記事を投稿していきます。

前回ローカル環境を構築してサーバーを起動するところまで行いました。

まだ構築が済んでいない方はこちらの記事を参考に構築してみてください。

ブログのTOPページを作成する

Puputは管理者画面から子ページを作っていくことで記事を投稿していきますが、まずはブログのTOPページの作成が必要になります。
管理者画面 http://localhost:8000/admin にログインしておきます。

左側のメニューから Pages > Home をクリックします。(画像赤線)

Page > Home をクリック

次に ADD CHILD PAGE をクリックします。(画像赤線)

Home の ADD CHILD PAGE をクリック

次に Blog をクリックします。 (画像赤線)

Blog をクリック

すると編集画面が表示されます。

ブログのTOPページ編集画面

紛らわしいですが、このページはまだ記事の編集画面ではなく、ブログのTOPページの編集画面になります。このページの子ページを作ることで記事を投稿していきます。

適当にタイトルなどを入力してから、上部のタブ PROMOTE をクリックします。Slug の入力欄があるので適当に英字で入力しておきます。(画像赤線)

Slug の入力

Slug はURLの https://ドメイン/XXX のXXXに相当します。

PuputではTOPページの Slug を分けるこで複数のブログを作ることができますが、普通の使い方なら1つだけで十分です。

上記は Slug を「test」としていますので https://ドメイン/test でTOPページにアクセスしますが https://ドメイン だけでアクセスするにはまた別の設定が必要です。あとでその設定を行いますので一旦このままにしておきます。

ここまで済んだらページを公開しますので画面下部の SAVE DRAFT の横にある上矢印をクリックして展開した中の PUBLISH をクリックしてページを公開します。 (画像赤線)

TOPページの公開

公開したら早速 http://localhost:8000/入力したSlug でアクセスしてみましょう。

作成したTOPページ

まだ記事を投稿していないので何もないですが、Puputのデフォルトテンプレートである2カラムのTOPページが表示されます。

右側のメニューを見るとデフォルトでもそれっぽく、人気記事やカテゴリ、タグ、アーカイブなどブログを構成する基本的な要素が見受けられます。

記事を投稿する

TOPページの作成が完了したら記事を投稿していきます。

管理者画面の左側メニューの Pages > Home > TOPページ をクリックすると以下の画面になり、ADD CHILD PAGE をクリックします。(画像赤線)

TOPページから ADD CHILD PAGE をクリック

ここでブログの記事編集画面になります。

記事の編集画面

この記事の編集画面はPuputの力によるものです。

Puputではアイキャッチ画像の設定、本文編集パレット、記事抜粋、タグやカテゴリ付けなどができるようになっています。

適当に入力したらTOPページの作成で行ったように Slug も忘れずに入力し、公開します。

公開したらTOPページを表示すると先ほど投稿した記事が表示されますので、「Continue reading »」をクリックすると記事ページに遷移します。

投稿した記事

記事の編集画面でタグに「Python」「Wagtail」「Puput」と入力しましたがアイキャッチ画像の下部や右側のタグ一覧に表示されていることも確認できます。

カテゴリは未入力でしたがもちろんカテゴリも登録できます。

記事の投稿はこのようブログのTOPページから子ページを作成して投稿していく形になります。

TOPページのURLをドメイン名にする

TOPページは今のままでは https://ドメイン/test でアクセスしなければならないのでドメインだけの https://ドメイン で開けるようにします。(今はローカル環境なのでドメインに相当するのはlocalhostになります)

管理者画面のメニューから Settigs > Sites をクリックします。 (画像赤線)

Settings > Sites をクリック

localhost をクリックします。 (画像赤線)

Sites の一覧画面

Root page の CHOOSE A DIFFERENT ROOT PAGE をクリックします。(画像赤線)

Sites の localhost の編集画面

TOPページを選択するため Home の右側の「>」をクリックします。(画像赤線)

Home の一階層下に移動

自分は「ブログのタイトル」という名前でTOPページを作成しましたが、作成したTOPページをクリックしてください。(画像赤線)

作成したTOPページをクリック

最後に下部の SAVE をクリックして設定を反映します。

これで https://ドメイン でTOPページが開けるようになります。(ローカル環境なので https://localhost でアクセスできるようになります)

記事のURLもTOPページの Slug からではなくドメインからの Slug になります。

タイトルとURLをコピーしました