docs: split the installation tutorial into two, one only about instal…

…ling and another about creating a new page. Updated the pictures of these two tutorials, enlarged the pictures too. Revised the steps so they are more concise.
django-cms · luisnavarrodelangel · Sep 16, 2022 · Sep 17, 2022 · Sep 17, 2022 · Sep 17, 2022
commit c424524cfa540303844f3d6f0e65da6f77fc3148
diff --git a/docs/introduction/01-install.rst b/docs/introduction/01-install.rst
@@ -3,10 +3,10 @@
 .. _install-django-cms-tutorial:
 
 ######################
-Installing django CMS
+Install django CMS
 ######################
 
-In this django CMS tutorial, we’ll take you through the first four steps to help get you started. This tutorial is using a `demo project <https://github.com/django-cms/django-cms-quickstart>`_ which is a minimal django project with additional requirements in the ``requirements.txt``.
+In this tutorial, we'll take you through the first steps to get you started. You will need to install Docker and you will use your system's terminal.
 
 .. note::
   There are several ways to install django CMS.
@@ -17,22 +17,18 @@ In this django CMS tutorial, we’ll take you through the first four steps to he
 
   3. The last option is to install :ref:`django CMS manually by using virtualenv <installation>`. This option is a good way for developers that want to install everything by hand to understand better and have full control.
 
-*****************************
-What you need to get started
-*****************************
-You will need to install Docker and you will use your system's terminal.
-
 ************************
-Setup Docker (Step 1)
+Install docker
 ************************
 
 Install docker from `here <https://docs.docker.com/get-docker/>`_.
 
-****************************************
-Run the demo project in docker (Step 2)
-****************************************
+************************************************
+Clone and run the django CMS quickstart project
+************************************************
+
+First, open your system's terminal and go to the folder where you want to install django CMS. Then, type the commands below in the terminal. During the installation process, you will be prompted to enter your email address and set a username and password.
 
-First, open the terminal application on your computer and go to a safe folder (e.g. ``cd ~/Projects``), then type the following commands in your system's terminal.
 
 .. note::
    For the commands below, use ``docker compose`` (with a space) if you are using Docker Compose v2. Use ``docker-compose`` (with a hyphen) if you are using Docker Compose v1. For more information, checkout the `Compose v2 Documentation <https://docs.docker.com/compose/#compose-v2-and-the-new-docker-compose-command>`_.
@@ -47,56 +43,16 @@ First, open the terminal application on your computer and go to a safe folder (e
       docker compose run web python manage.py createsuperuser
       docker compose up -d
 
-During the installation process, you will be prompted to enter your email address and set a username and password.
-
-Once the installation process has finished, open your browser and type `http://localhost:8000/admin <http://localhost:8000/admin>`_. There, you should be invited to log in using the username and password you set during the installation process.
-
-.. image:: /introduction/images/admin_page.png
-   :alt: log in through the admin page
-   :width: 400
-   :align: center
-
-********************************
-Create your first page (Step 3)
-********************************
-
-Once you log in you can press "Create" on the top right corner. Then, you will see a pop-up window with the option “New page” marked in blue.
-Press "New Page" and select "Next".
-
-.. image:: /introduction/images/create_page_with_django_cms2.png
-   :alt: create a page with django cms
-   :width: 400
-   :align: center
 
-After selecting "Next", you will be invited to add in your title and some basic content for your new page. Click "Create" after having added the title and the content.
-
-.. image:: /introduction/images/create_page_with_django_cms1.png
-   :alt: create a page with django cms
-   :width: 400
-   :align: center
-
-
-*********************************
-Publish your first page (Step 4)
-*********************************
+****************************************
+Confirm you can access the login page
+****************************************
 
-The page we just created is just a draft and needs to be published once you finish.
-As an editor, only you can see and edit your drafts, other visitors to your site will only see your published pages.
+Once the installation process has finished, open your browser and type `http://localhost:8000/admin <http://localhost:8000/admin>`_. You have successfully installed django CMS, If you can see the login page.
 
-Press "Publish page now."
+Log in using the username and password you set during the installation process.
 
-.. image:: /introduction/images/django_cms_demo_page.png
-   :alt: publish a page with django cms
-   :width: 400
+.. image:: /introduction/images/login_prompt.png
+   :alt: log in through the admin page
+   :width: 100%
    :align: center
-
-To edit the page, you can switch back into editing mode using the "Edit" button, and
-return to the published version of the page using the "view published" button.
-
-In the editing mode, you can double-click on the paragraph of the text to change it,
-add formatting, and save it again. Any changes that are made after publishing are saved to a draft and will not be visible until you re-publish.
-
-Congratulations, you now have installed django CMS and created your first page.
-
-If you need to log in at any time, append ``?edit`` to the URL and hit Return. This will enable the
-toolbar, from where you can log in and manage your website.
diff --git a/docs/introduction/02-create_your_first_page.rst b/docs/introduction/02-create_your_first_page.rst
@@ -0,0 +1,62 @@
+:sequential_nav: both
+
+########################
+Create your first page
+########################
+
+****************************************
+Log in using your username and password
+****************************************
+
+Open your browser and type `http://localhost:8000/admin <http://localhost:8000/admin>`_. There, you should be invited to log in using the username and password you set during the installation process.
+
+.. image:: /introduction/images/login_prompt.png
+   :alt: log in through the admin page
+   :width: 100%
+   :align: center
+
+********************************
+Create a new page
+********************************
+
+Once you log in, click "Create" on the top right corner. Then, click “New page” in the pop-up window and click "Next" after.
+
+.. image:: /introduction/images/new-page-prompt.png
+   :alt: create a page with django cms
+   :width: 100%
+   :align: center
+
+Add a title and some content in the following window. Then click "Create" in the bottom-right corner.
+
+.. image:: /introduction/images/create_new_page_prompt.png
+   :alt: create a page with django cms
+   :width: 100%
+   :align: center
+
+*********************************
+Publish your new page
+*********************************
+
+The page you just created is a draft. As an editor, only you can see and edit your drafts, other visitors to your site will only see your published pages. To publish your page click "View published".
+
+.. image:: /introduction/images/created_page.png
+   :alt: publish a page with django cms
+   :width: 100%
+   :align: center
+
+
+*********************************
+Edit your page
+*********************************
+
+Congratulations, you created your first page! To edit the page click "Edit" in the top-right corner.
+
+In the editing mode, you can double-click on the paragraph of the text to change it, add formatting, and save it again. Any changes made after publishing are saved to a draft until you re-publish.
+
+.. 
6DB6
image:: /introduction/images/published_page.png
+   :alt: publish a page with django cms
+   :width: 100%
+   :align: center
+
+If you need to log in at any time, append ``?edit`` to the URL and hit Return. This will enable the
+toolbar, from where you can log in and manage your website.
diff --git a/...ntroduction/02-templates_placeholders.rst → ...ntroduction/03-templates_placeholders.rst b/...ntroduction/02-templates_placeholders.rst → ...ntroduction/03-templates_placeholders.rst
diff --git a/...roduction/03-integrating_applications.rst → ...roduction/04-integrating_applications.rst b/...roduction/03-integrating_applications.rst → ...roduction/04-integrating_applications.rst
diff --git a/docs/introduction/04-plugins.rst → docs/introduction/05-plugins.rst b/docs/introduction/04-plugins.rst → docs/introduction/05-plugins.rst
diff --git a/docs/introduction/05-apphooks.rst → docs/introduction/06-apphooks.rst b/docs/introduction/05-apphooks.rst → docs/introduction/06-apphooks.rst
diff --git a/docs/introduction/06-toolbar.rst → docs/introduction/07-toolbar.rst b/docs/introduction/06-toolbar.rst → docs/introduction/07-toolbar.rst
diff --git a/docs/introduction/07-menu.rst → docs/introduction/08-menu.rst b/docs/introduction/07-menu.rst → docs/introduction/08-menu.rst
diff --git a/docs/introduction/08-wizards.rst → docs/introduction/09-wizards.rst b/docs/introduction/08-wizards.rst → docs/introduction/09-wizards.rst
diff --git a/docs/introduction/09-third_party.rst → docs/introduction/10-third_party.rst b/docs/introduction/09-third_party.rst → docs/introduction/10-third_party.rst
diff --git a/docs/introduction/images/create_new_page_prompt.png b/docs/introduction/images/create_new_page_prompt.png
diff --git a/docs/introduction/images/created_page.png b/docs/introduction/images/created_page.png
diff --git a/docs/introduction/images/login_prompt.png b/docs/introduction/images/login_prompt.png
diff --git a/docs/introduction/images/new-page-prompt.png b/docs/introduction/images/new-page-prompt.png
diff --git a/docs/introduction/images/published_page.png b/docs/introduction/images/published_page.png
diff --git a/docs/introduction/index.rst b/docs/introduction/index.rst
@@ -9,6 +9,7 @@ django CMS. They're designed to help you get started quickly, and show how
 easy it is to work with django CMS as a developer who wants to customise it and
 get it working according to their own requirements.
 
+
 These tutorials take you step-by-step through some key aspects of this work.
 They're not intended to explain the :doc:`topics in depth </topics/index>`, or
 provide :doc:`reference material </reference/index>`, but they will leave you
@@ -19,23 +20,24 @@ Once you're familiar with the basics presented in these tutorials, you'll find
 the more in-depth coverage of the same topics in the :doc:`How-to
 </how_to/index>` section.
 
-The tutorials follow a logical progression, starting from installation of django CMS and the
-creation of a brand new project, and build on each other, so it's recommended to work through them
+This tutorial is using a pre-configured `demo project <https://github.com/django-cms/django-cms-quickstart>`_.
+The tutorials follow a logical progression, starting from the installation of django CMS and the creation of a brand new project. They build on each other, so it's recommended to work through them
 in the order presented here.
 
 .. toctree::
     :maxdepth: 1
     :numbered:
 
     01-install
-    02-templates_placeholders
-    03-integrating_applications
-    04-plugins
-    05-apphooks
-    06-toolbar
-    07-menu
-    08-wizards
-    09-third_party
+    02-create_your_first_page
+    03-templates_placeholders
+    04-integrating_applications
+    05-plugins
+    06-apphooks
+    07-toolbar
+    08-menu
+    09-wizards
+    10-third_party
 
 If you want to install django CMS into an existing project, or prefer to configure django CMS by
 hand, rather than using the automated installer, see :doc:`/how_to/install` and then follow the

diff --git a/docs/upgrade/3.10.0.rst b/docs/upgrade/3.10.0.rst
@@ -67,8 +67,8 @@ For more information, please see: https://github.com/django-cms/django-cms/pull/
 
 Then run::
 
-    ``python manage.py migrate``  # to ensure that your database is up-to-date with migrations
-    ``python manage.py cms fix-tree``
+    python manage.py migrate  # to ensure that your database is up-to-date with migrations
+    python manage.py cms fix-tree
 
 Check custom code and third-party applications for use of deprecated or removed functionality or
 APIs (see above). Some third-party components may need to be updated.