このチャプターの目次

トップページのテンプレートを作成します。

app フォルダに templates フォルダ、app フォルダを作成し、index.html ファイルを作成します。

app/templates/app/index.html

{% load static %}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    <title>Django Render</title>
  </head>
  <body>
    <h1 class="center">How to deploy Django to Render</h1>
  </body>
</html>

CSS

CSS ファイルを作成します。

app フォルダに static フォルダ、css フォルダを作成し、style.css ファイルを作成します。

app/static/css/style.css

.center {
  text-align: center;
  color: green;
}

動作確認

トップページが表示できるか動作確認してみましょう。

python3 manage.py runserver