Below is the step-by-step instructions on how to setup an opensource website. This information will allow you to get through the technical part of deploying your website, so you can start adding content and sharing it to the world.
1 . Go to PythonAnywhere.com, this website will allow you to code and host your website on the cloud for free (although there are limitations). Click on “Pricing & signup” to get started:
2. Now click on “Create a Beginner account”:
3. Fill out the information requested:
4. Once You are registered, you should be redirected to the following screen:
5. Open a “New console:” by clicking the blue button called “$ Bash” into a new web browser tab:
6. You will now have a “Terminal” to type commands into:
7. Type in the following command after the “$” above. (I found this code directly from the PythonAnywhere.com help page at https://help.pythonanywhere.com/pages/DeployExistingDjangoProject )
a. mkvirtualenv --python=/usr/bin/python3.8 mysite-virtualenv
b. (The goal of this command is to create a “virtual environment”, it’s a place to keep track of all the programs that you will install to run your code. As an analogy, I think of the “virtual environment” like bringing a tool bag to a construction site, it’s a place where you can keep track of all your tools, so they are easily available and don’t get mixed up with your coworkers’)
8. Now you will want to install the CodeRed CMS, which will give you the functionality to make your website without extensive coding. My understanding is that this is like installing WordPress but in the python programming language and is hosted for free by PythonAnywhere.com. Please enter the following line of code: after the “$” (The basis of the following installation steps is available at: https://www.coderedcorp.com/cms/
a. Type: pip install coderedcms
b. After entering this command, it will take a while, maybe 10 minutes to finish installing. You should see a string of text fill the terminal, but you will know it is complete when it stops scrolling and you see the following on the last line “(mysite-virtualenv) 20:37 ~ $”
9. You will now enter the following code to start your new website: coderedcms start myproject
10. As you see above, the system will provide you with the next steps:
a.Type the code: cd myproject/
~This will bring you into the folder you just created when you started you project.
b. Type the code: python manage.py migrate
~This will set up the database that stores the information you add to the site. You will see long a string of stuff happening in the terminal, but you should end up with this:
c. Type the code: python manage.py createsuperuser
~The terminal will now ask you to supply information to create a profile to access the admin side of your new site. (The admin access is important, because this is where you will create all the content for your website.
d. Creating the super user is the last step that follows the outline in the screenshot in step 9.
11. You will now check to see if everything is working correctly so far, type the command:
a. Type the code: python manage.py check
b. You should see there are no issues, like the screenshot below.
12. Next, we will type the command that that collects all the static items, into one folder, which allows your webpage run when it is deployed. (I was stuck here myself, being a newbie, I did not understand this. Most tutorials that I could find would only get you to the point of running the website locally on the computer. But I am taking this a step further because as nice as it looks, the website is useless if it is not connected the internet.)
a. Please type the following command into the terminal: python manage.py collectstatic
b. Following this entry, your terminal should look like this:
c. Please see above, the terminal has supplied us a path to a newly created folder that will hold our static files, save this path, you will use it in a few steps: /home/testcasedjango/myproject/static .
d. (Please note, in this path you will see my PythonAnywhere.com username(testcasedjango), your path should have your username in place of the one shown here in this tutorial.).
13. We will now switch back to the first web browser tab, which is the dashboard for PythonAnywhere.com
a. Please click on the menu link at the top of the page labeled, “Web”. Which will bring you to the following page, and select the button, “Add a new web app”.
14. You will now click through questions, but it is simple to setup the app.
a. On the page below, click “Next”.
b. Now click on the last item, “Manual configuration (including virtualenvs)”:
c. Then click “» Python 3.8”:
d. Below, click the “Next” button (don’t worry about this message, I will show you what to enter).
15. Awesome! Now you will be on the Web app configuration page, and you will fill out a few items:
a. First you will find the section "Static files:” and enter the path that we saved earlier in section 12: /home/testcasedjango/myproject/static/ (I have already entered it below, but remember to use your own path)
b. You will also presumably want to access items such as Images that you load to the website, you will need to add another static directly for your media by adding the directory /home/testcasedjango/myproject/media/ :
c. Now we will setup the code section. Please click on the link next to the label “WSGI configuration file:”:
d.You will be presented with a file that is already filled with information, but you will need to remove all the text in the file:
e. In this file, where you just cut all the text, paste in the following (Please note, the "testcasedjango" must be updated with your username(the below code can be found here for an easier copy and paste: https://help.pythonanywhere.com/pages/DeployExistingDjangoProject:
f. Update the section labeled “Virtualenv:” by entering the following path mysite-virtualenv :
g. Now go to the Account link at the top of the page, then choose API token, and click create token. Below is what you should see:
h. Now is the only time you will have to dig deep into the files. You need to update one specific field to be able to launch your website.
i. Go to the top of the screen and click the “Files” link, and click through the folders until you open a file named prod.py:
j. You should be clicking on the following directories in this order:
k. The file should look like this when you open it, you will need to update the ALLOWED_HOSTS = ['localhost'] to: ALLOWED_HOSTS = ['*']
16. Save the update you just made and click on the menu and choose “Web”. At this point click on the green button that says “Reload testcasedjango.pythonanywhere.com”. It should look like this:
17. Now we should be all set, just exit out of your browser, clear your browser’s history, cache, and cookies. Then log back into PythonAnywhere and click the Configuration for link above. You will now be able to access you site
18. It should look like this (it looks barren, but you will have to add your own content):
19. But the real power in CodeRed CMS is the admin area, that is built on the Wagtail CMS, which is built on top of the Django web framework for python.
20. This is accessed by going to testcasedjango.pythonanywhere.com/admin. (Please note, you will need to update "testcasedjango" part of the URL with your PythonAnywhere.com username.) You will see a welcome screen to login with the superuser created in step 10.C .
21. After logging in, you now have access to add content and customize your website:
Below are some resources I used to create this, and and you should check this out to understand the steps you have just followed:
CodeRed CMS: https://www.coderedcorp.com/cms/ ; https://docs.coderedcorp.com/cms/
Wagtail CMS: https://wagtail.io/ ; https://docs.wagtail.io/en/stable/index.html
Django girls: https://djangogirls.org/ ; https://tutorial.djangogirls.org/en/
Django: https://www.djangoproject.com/ ; https://docs.djangoproject.com/en/3.1/
PythonAnywhere.com: https://help.pythonanywhere.com/pages/
Good training videos are available at: