|
| 1 | +# Change Website Homepage to Wagtail Blog Homepage |
| 2 | + |
| 3 | +The Wagtail admin has a nicer and a more user-friendly interface compared to the default Django admin user interface. |
| 4 | +For this reason, we would rather use our Wagtail blog as our main blog and ignore the blog we created in the main |
| 5 | +tutorial. |
| 6 | + |
| 7 | +We will not remove our initial blog, we will leave it as it is as we may need to use it for more learning. We will |
| 8 | +however change the root of our project to point to our Wagtail blog. Make the following changes to your |
| 9 | +`mysite/urls.py` as shown below: |
| 10 | + |
| 11 | +First change the `URL` for your first blog to the following: |
| 12 | + |
| 13 | +```python |
| 14 | +path('blog/', include('blog.urls')), |
| 15 | +``` |
| 16 | + |
| 17 | +Next change the `URL` for the Wagtail blog to the following: |
| 18 | + |
| 19 | +```python |
| 20 | +path('', include(wagtail_urls)), |
| 21 | +``` |
| 22 | + |
| 23 | +Your `mysite/urls.py` should now look like below: |
| 24 | + |
| 25 | +{% filename %} mysite/urls.py {% endfilename %} |
| 26 | +```python |
| 27 | +from django.conf import settings |
| 28 | +from django.conf.urls.static import static |
| 29 | +from django.contrib import admin |
| 30 | +from django.urls import include, path |
| 31 | + |
| 32 | +from wagtail.admin import urls as wagtailadmin_urls |
| 33 | +from wagtail import urls as wagtail_urls |
| 34 | + |
| 35 | +urlpatterns = [ |
| 36 | + path('admin/', admin.site.urls), |
| 37 | + path('blog/', include('blog.urls')), |
| 38 | + path('cms/', include(wagtailadmin_urls)), |
| 39 | + path('', include(wagtail_urls)), |
| 40 | +] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) |
| 41 | + |
| 42 | +``` |
| 43 | + |
| 44 | +This will make your Wagtail accessible by visiting `http://127.0.0.1:8000` as shown below |
| 45 | + |
| 46 | + |
| 47 | + |
| 48 | +and your first blog will now be at `http://127.0.0.1:8000/blog/` as shown below. |
| 49 | + |
| 50 | + |
| 51 | + |
| 52 | +# Committing our changes to GitHub |
| 53 | + |
| 54 | +Now that we have managed to get Wagtail working well with out blog, we can deploy our changes to our live website |
| 55 | +which we deployed to PythonAnywhere earlier on during the main tutorial. To do this, we need to first push our code to |
| 56 | +GitHub as we have done before by typing the following in our command line: |
| 57 | + |
| 58 | +``` |
| 59 | +(myvenv) ~/djangogirls$ git status |
| 60 | +``` |
| 61 | + |
| 62 | +This will list all the files we have changed. Once we have confirmed those are the changes we have made, we can go |
| 63 | +ahead and add the files to be committed by typing the following command: |
| 64 | + |
| 65 | +``` |
| 66 | +(myvenv) ~/djangogirls$ git add . |
| 67 | +``` |
| 68 | + |
| 69 | +Next we need to add a commit message for our changes to be saved by typing the following command: |
| 70 | + |
| 71 | +``` |
| 72 | +(myvenv) ~/djangogirls$ git commit -m "Add Wagtail to our blog" |
| 73 | +``` |
| 74 | + |
| 75 | +Lastly, we need to push the commit to GitHub by typing the following command: |
| 76 | + |
| 77 | +``` |
| 78 | +(myvenv) ~/djangogirls$ git push origin HEAD |
| 79 | +``` |
| 80 | + |
| 81 | +This will push our new changes to GitHub and we are now ready to deploy these changes to PythonAnywhere! |
| 82 | + |
| 83 | +# Deploying the changes to PythonAnywhere |
| 84 | +To deploy our changes to [PythonAnywhere](https://pythonanywhere.com) and click `Consoles` and click on |
| 85 | +`Bash Console in virtualenv` to open a new Bash console with an activated virtual environment and then type in the |
| 86 | +following command: |
| 87 | + |
| 88 | +``` |
| 89 | +$ git pull origin HEAD |
| 90 | +``` |
| 91 | + |
| 92 | +This command will pull your changes from GitHub to your PythonAnywhere project. |
| 93 | + |
| 94 | +Next, you need to update the requirements for your project by installing Wagtail and its dependencies. Since we |
| 95 | +updated our requirements file, you only need to type in the following command to install the required packages: |
| 96 | + |
| 97 | +``` |
| 98 | +$ pip install -r requirements.txt |
| 99 | +``` |
| 100 | + |
| 101 | +Next step is to run migrations for the new models and create the necessary tables in the database. To do this, type the |
| 102 | +following command: |
| 103 | + |
| 104 | +``` |
| 105 | +$ python manage.py migrate |
| 106 | +``` |
| 107 | + |
| 108 | +Next, you need to run the `collectstatic` command to copy the static files required by Wagtail to the `static` root |
| 109 | +folder specified in our `settings.py` file. |
| 110 | + |
| 111 | +``` |
| 112 | +$ python manage.py collectstatic |
| 113 | +``` |
| 114 | + |
| 115 | +Lastly, go to `Web` tab and reload your webapp by clicking the `Reload <your-username>.pythonanywhere.com` button and |
| 116 | +open `https://<your-username.pythonanywhere.com` in another tab to see your blog now using Wagtail CMS. |
| 117 | + |
| 118 | +You should get the `Welcome to your new Wagtail site!` on your homepage to show that Wagtail is now working as your |
| 119 | +website root. |
| 120 | + |
| 121 | +To change the root page of your Wagtail blog visit `https://<your-username.pythonanywhere.com/cms/` and login. |
| 122 | + |
| 123 | +Then follow the steps in [Changing the Wagtail Homepage](../wagtail_integration_adding_homepage/README.md#changing-homepage) section of this tutorial to create a new homepage and change it to be the root of the blog. |
| 124 | + |
| 125 | +To create new posts, follow instructions in the [Adding posts](../wagtail_integration_adding_posts/README.md#adding-blog-posts) section of this tutorial. |
| 126 | + |
| 127 | +After adding your posts, you should see that only posts/pages that have been published are the ones displayed on your blog. |
| 128 | +In other words, Wagtail only shows posts which are `live` and a post is only `live` after you click the `Publish` button. |
| 129 | +The `Save draft` button merely saves the post without publishing it or making it live. |
| 130 | + |
| 131 | +Also, take note that `live` posts are displayed in the order in which they are published, that is, they are ordered by date. |
| 132 | +In Django, the statement to get blog posts would look like `BlogPage.objects.filter(published=True).order_by(published_date)`. |
| 133 | + |
| 134 | +That's all for this tutorial. If you want to learn more about Wagtail, you can read the |
| 135 | +[Wagtail documentation](https://guide.wagtail.org/en-latest/) or search for more tutorials on Wagtail online. |
| 136 | + |
| 137 | +Happy coding! |
0 commit comments