diff --git a/en/code_editor/README.md b/en/code_editor/README.md index fe9388f4a3f..699681faf58 100644 --- a/en/code_editor/README.md +++ b/en/code_editor/README.md @@ -34,5 +34,5 @@ The first is that code needs to be **plain text**, and the problem with programs The second reason is that code editors are specialised in editing code, so they can provide helpful features, like highlighting code with colour according to its meaning, or automatically closing quotes for you. -We'll see all this in action later. Soon, you'll come to think of your trusty old code editor as one of your favourite tools :) +We'll see all this in action later. Soon, you'll come to think of your trusty old code editor as one of your favourite tools :) diff --git a/en/css/README.md b/en/css/README.md index 095269d71fc..43086a7fd83 100644 --- a/en/css/README.md +++ b/en/css/README.md @@ -33,45 +33,42 @@ Looking nicer already! ## Static files in Django -Another thing you will learn about today is called __static files__. Static files are all your CSS and images -- files that are not dynamic, so their content doesn't depend on request context and will be the same for every user. +Finally we will take a closer look at these things we've been calling __static files__. Static files are all your CSS and images -- files that are not dynamic, so their content doesn't depend on the request context and will be the same for every user. -CSS is a static file, so in order to customize CSS, we need to first configure static files in Django. You'll only need to do it once. Let's start: +### Where to put static files for Django -### Configure static files in Django +As you saw when we ran `collectstatic` on the server, Django already knows where to find the static files for the built-in "admin" app. Now we just need to add some static files for our own app, `blog`. -First, we need to create a directory to store our static files in. Go ahead and create a directory called `static` inside your `djangogirls` directory. +We do that by creating a folder called `static` inside the blog app: djangogirls - ├─── static - └─── manage.py + ├── blog + │ ├── migrations + │ └── static + └── mysite -Open up the `mysite/settings.py` file, scroll to the bottom of it and add the following lines: +Django will automatically find any folders called "static" inside any of your apps' folders, and it will be able to use their contents as static files. -```python -STATICFILES_DIRS = ( - os.path.join(BASE_DIR, "static"), -) -``` - -This way Django will know where to find your static files. ## Your first CSS file! Let's create a CSS file now, to add your own style to your web-page. Create a new directory called `css` inside your `static` directory. Then create a new file called `blog.css` inside this `css` directory. Ready? - static - └─── css - blog.css + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css -Time to write some CSS! Open up the `static/css/blog.css` file in your code editor. +Time to write some CSS! Open up the `blog/static/css/blog.css` file in your code editor. We won't be going too deep into customizing and learning about CSS here, because it's pretty easy and you can learn it on your own after this workshop. We really recommend doing this [Codeacademy HTML & CSS course](http://www.codecademy.com/tracks/web) to learn everything you need to know about making your websites more pretty with CSS. But let's do at least a little. Maybe we could change the color of our header? To understand colors, computers use special codes. They start with `#` and are followed by 6 letters (A-F) and numbers (0-9). You can find color codes for example here: http://www.colorpicker.com/. You may also use [predefined colors](http://www.w3schools.com/cssref/css_colornames.asp), such as `red` and `green`. -In your `static/css/blog.css` file you should add the following code: +In your `blog/static/css/blog.css` file you should add the following code: ```css h1 a { @@ -79,7 +76,7 @@ h1 a { } ``` -`h1 a` is a CSS Selector. This means we're applying our styles to any `a` element inside of an `h1` element (e.g. when we have in code something like: `

link

`). In this case, we're telling it to change its color to `#FCA205`, which is orange. Of course, you can put your own color here! +`h1 a` is a CSS Selector. This means we're applying our styles to any `a` element inside of an `h1` element (e.g. when we have in code something like: `

link

`). In this case, we're telling it to change its color to `#FCA205`, which is orange. Of course, you can put your own color here! In a CSS file we determine styles for elements in the HTML file. The elements are identified by the element name (i.e. `a`, `h1`, `body`), the attribute `class` or the attribute `id`. Class and id are names you give the element by yourself. Classes define groups of elements, and ids point to specific elements. For example, the following tag may be identified by CSS using the tag name `a`, the class `external_link`, or the id `link_to_wiki_page`: @@ -154,7 +151,7 @@ Maybe we can customize the font in our header? Paste this into your `` in This line will import a font called *Lobster* from Google Fonts (https://www.google.com/fonts). -Now add the line `font-family: 'Lobster';` in the CSS file `static/css/blog.css` inside the `h1 a` declaration block (the code between the braces `{` and `}`) and refresh the page: +Now add the line `font-family: 'Lobster';` in the CSS file `blog/static/css/blog.css` inside the `h1 a` declaration block (the code between the braces `{` and `}`) and refresh the page: ```css h1 a { @@ -188,7 +185,7 @@ And now add a class `post` to your `div` containing a blog post. ``` -We will now add declaration blocks to different selectors. Selectors starting with `.` relate to classes. There are many great tutorials and explanations about CSS on the Web to help you understand the following code. For now, just copy and paste it into your `djangogirls/static/css/blog.css` file: +We will now add declaration blocks to different selectors. Selectors starting with `.` relate to classes. There are many great tutorials and explanations about CSS on the Web to help you understand the following code. For now, just copy and paste it into your `blog/static/css/blog.css` file: ```css .page-header { diff --git a/en/deploy/README.md b/en/deploy/README.md index 4755ed26833..5c5ad24eae2 100644 --- a/en/deploy/README.md +++ b/en/deploy/README.md @@ -1,246 +1,310 @@ # Deploy! -> __Note__: The following chapter can be sometimes a bit hard to get through. Persist and finish it; deployment is an important part of the website development process. This chapter is placed in the middle of the tutorial so that your mentor can help with the slightly tricker process of getting your website online. This means you can still finish the tutorial on your own if you run out of time. +> **Note**: The following chapter can be sometimes a bit hard to get through. Persist and finish it; deployment is an important part of the website development process. This chapter is placed in the middle of the tutorial so that your mentor can help with the slightly tricker process of getting your website online. This means you can still finish the tutorial on your own if you run out of time. Until now your website was only available on your computer, now you will learn how to deploy it! Deploying is the process of publishing your application on the Internet so people can finally go and see your app :). -As you learned, a website has to be located on a server. There are a lot of providers, but we will use the one with the simplest deployment process: [Heroku](http://heroku.com/). Heroku is free for small applications that don't have too many visitors, it'll definitely be enough for you now. +As you learned, a website has to be located on a server. There are a lot of providers, but we will use one that has a relatively simple deployment process: [PythonAnywhere](http://pythonanywhere.com/). PythonAnywhere is free for small applications that don't have too many visitors, it'll definitely be enough for you now. -We will be following this tutorial: https://devcenter.heroku.com/articles/getting-started-with-django, but we pasted it here so it's easier for you. +The other external service we'll be using is [GitHub](http://www.github.com), which is a code hosting service. There are others out there, but almost all programmers have a GitHub account these days, and now so will you! -## The `requirements.txt` file +We'll use GitHub as a stepping stone to transport our code to and from PythonAnywhere. -We need to create a `requirements.txt` file to tell Heroku what Python packages need to be installed on our server. -But first, Heroku needs us to install a few packages. Go to your console with `virtualenv` activated and type this: +# Git - (myvenv) $ pip install dj-database-url gunicorn whitenoise +Git is a "version control system" used by a lot of programmers - software which tracks changes to files over time so that you can recall specific versions later. A bit like "track changes" in Microsoft Word, but much more powerful. -After the installation is finished, go to the `djangogirls` directory and run this command: - (myvenv) $ pip freeze > requirements.txt +## Installing Git -This will create a file called `requirements.txt` with a list of your installed packages (i.e. Python libraries that you are using, for example Django :)). +### Windows -> __Note__: `pip freeze` outputs a list of all the Python libraries installed in your virtualenv, and the `>` takes the output of `pip freeze` and puts it into a file. Try running `pip freeze` without the `> requirements.txt` to see what happens! +You can download Git from [git-scm.com](http://git-scm.com/). You can hit "next next next" on all steps except for one; in the 5th step entitled "Adjusting your PATH environment", choose "Run Git and associated Unix tools from the Windows command-line" (the bottom option). Other than that, the defaults are fine. Checkout Windows-style, commit Unix-style line endings is good. -Open this file and add the following line at the bottom: +### MacOS - psycopg2==2.5.4 +Download Git from [git-scm.com](http://git-scm.com/) and just follow the instructions. -This line is needed for your application to work on Heroku. +### Linux -## Procfile +If it isn't installed already, git should be available via your package manager, so try: -Another thing we need to create is a Procfile. This will let Heroku know which commands to run in order to start our website. -Open up your code editor, create a file called `Procfile` in `djangogirls` directory and add this line: + sudo apt-get install git + # or + sudo yum install git - web: gunicorn mysite.wsgi -This line means that we're going to be deploying a `web` application, and we'll do that by running the command `gunicorn mysite.wsgi` (`gunicorn` is a program that's like a more powerful version of Django's `runserver` command). +## Starting our Git repository -Then save it. Done! +Git tracks changes to a particular set of files in what's called a code repository (or "repo" for short). Let's start one for our project. Open up your console and run these commands, in the `djangogirls` directory: -## The `runtime.txt` file +> **Note**: Check your current working directory with a `pwd` (OSX/Linux) or `cd` (Windows) command before initializing the repository. You should be in the `djangogirls` folder. -We need to tell Heroku which Python version we want to use. This is done by creating a `runtime.txt` in the `djangogirls` directory using your editor's "new file" command, and putting the following text (and nothing else!) inside: + $ git init + Initialized empty Git repository in ~/djangogirls/.git/ + $ git config user.name "Your Name" + $ git config user.email you@example.com - python-3.4.2 +Initializing the git repository is something we only need to do once per project (and you won't have to re-enter the username and email again ever) -## mysite/local_settings.py +Git will track changes to all the files and folders in this directory, but there are some files we want it to ignore. We do this by creating a file called `.gitignore` in the base directory. Open up your editor and create a new file with the following contents: -There is a difference between settings we are using locally (on our computer) and settings for our server. Heroku is using one database, and your computer is using a different database. That's why we need to create a separate file for settings that will only be available for our local environment. +``` +*.pyc +__pycache__ +myvenv +db.sqlite3 +.DS_Store +``` -Go ahead and create `mysite/local_settings.py` file. It should contain your `DATABASE` setup from your `mysite/settings.py` file. Just like that: +And save it as `.gitignore` in the top-level "djangogirls" folder. - import os - BASE_DIR = os.path.dirname(os.path.dirname(__file__)) +> **Note**: The dot at the beginning of the file name is important! If you're having any difficulty creating it (Macs don't like you to create files that begin with a dot via the Finder, for example), then use the "Save As" feature in your editor, it's bulletproof. - DATABASES = { - 'default': { - 'ENGINE': 'django.db.backends.sqlite3', - 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), - } - } +It's a good idea to use a `git status` command before `git add` or whenever you find yourself unsure of what will be done, to prevent any surprises from happening (e.g. wrong files will be added or commited). The `git status` command returns information about any untracked/modifed/staged files, branch status and much more. The output should be similar to: - DEBUG = True + $ git status + On branch master -Then just save it! :) + Initial commit -## mysite/settings.py + Untracked files: + (use "git add ..." to include in what will be committed) -Another thing we need to do is modify our website's `settings.py` file. Open `mysite/settings.py` in your editor and add the following lines at the end of the file: + .gitignore + blog/ + manage.py + mysite/ - import dj_database_url - DATABASES['default'] = dj_database_url.config() + nothing added to commit but untracked files present (use "git add" to track) - SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https') +And finally we save our changes. Go to your console and run these commands: - ALLOWED_HOSTS = ['*'] + $ git add -A . + $ git commit -m "My Django Girls app, first commit" + [...] + 13 files changed, 200 insertions(+) + create mode 100644 .gitignore + [...] + create mode 100644 mysite/wsgi.py - STATIC_ROOT = 'staticfiles' - DEBUG = False +## Pushing our code to GitHub - try: - from .local_settings import * - except ImportError: - pass +Go to [GitHub.com](http://www.github.com') and sign up for a new, free user account. Then, create a new repository, giving it the name "my-first-blog". Leave the "initialise with a README" tickbox un-checked, leave the .gitignore option blank (we've done that manually) and leave the License as None. -It'll do necessary configuration for Heroku and also it'll import all of your local settings if `mysite/local_settings.py` exists. + -Then save the file. +> **Note** The name `my-first-blog` is important -- you could choose something else, but it's going to occur lots of times in the instructions below, and you'd have to substitute it each time. It's probably easier to just stick with the name `my-first-blog`. -## mysite/wsgi.py +On the next screen, you'll be shown your repo's clone URL. Choose the "HTTPS" version, copy it, and we'll paste it into the terminal shortly: -Open the `mysite/wsgi.py` file and add these lines at the end: + - from whitenoise.django import DjangoWhiteNoise - application = DjangoWhiteNoise(application) +Now we need to hook up the Git repository on your computer to the one up on GitHub. -All right! + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master -## Heroku account +Enter your GitHub username and password, and you should see something like this: -You need to install your Heroku toolbelt which you can find here (you can skip the installation if you've already installed it during setup): https://toolbelt.heroku.com/ + Username for 'https://github.com': hjwp + Password for 'https://hjwp@github.com': + Counting objects: 6, done. + Writing objects: 100% (6/6), 200 bytes | 0 bytes/s, done. + Total 3 (delta 0), reused 0 (delta 0) + To https://github.com/hjwp/my-first-blog.git + * [new branch] master -> master + Branch master set up to track remote branch master from origin. -> When running the Heroku toolbelt installation program on Windows make sure to choose "Custom Installation" when being asked which components to install. In the list of components that shows up after that please additionally check the checkbox in front of "Git and SSH". + -> On Windows you also must run the following command to add Git and SSH to your command prompt's `PATH`: `setx PATH "%PATH%;C:\Program Files\Git\bin"`. Restart the command prompt program afterwards to enable the change. +Your code is now on GitHub. Go and check it out! You'll find it's in fine company - [Django](https://github.com/django/django), the [Django Girls Tutorial](https://github.com/DjangoGirls/tutorial), and many other great open source software projects also host their code on GitHub :) -> After restarting your command prompt, don't forget to go to your `djangogirls` folder again and activate your virtualenv! (Hint: [Check the Django installation chapter](../django_installation/README.md#working-with-virtualenv)) -Please also create a free Heroku account here: https://id.heroku.com/signup/www-home-top +# Setting up our blog on PythonAnywhere -Then authenticate your Heroku account on your computer by running this command: +Next it's time to sign up for a free "Beginner" account on PythonAnywhere. - $ heroku login +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) -In case you don't have an SSH key this command will automatically create one. SSH keys are required to push code to the Heroku. -## Git -Git is a version control system used by a lot of programmers - software which keeps track of changes to a file or set of files over time so that you can recall specific versions later. Heroku uses a git repository to manage your project files, so we need to use it too. +> **Note**: When choosing your username here, bear in mind that your blog's URL will take the form `yourusername.pythonanywhere.com`, so either choose your own nickname, or a name for what your blog is all about. -Create a file named `.gitignore` in your `djangogirls` directory with the following content: - myvenv - __pycache__ - staticfiles - local_settings.py - db.sqlite3 - *.py[co] +## Pulling our code down on PythonAnywhere -and save it. The dot on the beginning of the file name is important! As you can see, we're now telling Heroku to ignore `local_settings.py` and don't download it, so it's only available on your computer (locally). +When you've signed up for PythonAnywhere, you'll be taken to your dashboard or "Consoles" page. Choose the option to start a "Bash" console -- that's the PythonAnywhere version of a console, just like the one on your PC -Next, we’ll create a new git repository and save our changes. +> __Note__: PythonAnywhere is based on Linux, so if you're on Windows, the console will look a little different from the one on your computer. -> __Note__: Check out your current working directory with a `pwd` command before initializing the repository. You should be in the `djangogirls` folder. +Let's pull down our code from GitHub onto PythonAnywhere by creating a "clone" of the repo. Type this into the console on PythonAnywhere: -Go to your console and run these commands: + $ git clone https://github.com//my-first-blog.git - $ git init - Initialized empty Git repository in ~/djangogirls/.git/ - $ git config user.name "Your Name" - $ git config user.email you@example.com +This will pull down a copy of your code onto PythonAnywhere. Check it out by typing: -Initializing the git repository is something we only need to do once per project. + $ tree my-first-blog + my-first-blog/ + ├── blog + │ ├── __init__.py + │ ├── admin.py + │ ├── migrations + │ │ ├── 0001_initial.py + │ │ └── __init__.py + │ ├── models.py + │ ├── tests.py + │ └── views.py + ├── manage.py + └── mysite + ├── __init__.py + ├── settings.py + ├── urls.py + └── wsgi.py -It's a good idea to use a `git status` command before `git add` or whenever you find yourself unsure of what will be done, to prevent any surprises from happening (e.g. wrong files will be added or commited). The `git status` command returns information about any untracked/modifed/staged files, branch status and much more. The output should be similar to: - $ git status - On branch master +### Creating a virtualenv on PythonAnywhere - Initial commit +Just like you did on your own computer, you can create a virtualenv on PythonAnywhere. In the Bash console, type: - Untracked files: - (use "git add ..." to include in what will be committed) + 20:20 ~ $ cd my-first-blog - .gitignore - Procfile - mysite/__init__.py - mysite/settings.py - mysite/urls.py - mysite/wsgi.py - manage.py - requirements.txt - runtime.txt + 20:20 ~ $ virtualenv --python=python3.4 myvenv + Running virtualenv with interpreter /usr/bin/python3.4 + [...] + Installing setuptools, pip...done. - nothing added to commit but untracked files present (use "git add" to track) + 20:20 ~ $ source myenv/bin/activate -And finally we save our changes. Go to your console and run these commands: + (mvenv)20:20 ~ $ pip install django whitenoise + Collecting django + [...] + Successfully installed django-1.8 whitenoise-1.0.6 - $ git add -A . - $ git commit -m "My Django Girls app" - [master (root-commit) 2943412] My Django Girls - 7 files changed, 230 insertions(+) - create mode 100644 .gitignore - create mode 100644 Procfile - create mode 100644 mysite/__init__.py - create mode 100644 mysite/settings.py - create mode 100644 mysite/urls.py - create mode 100644 mysite/wsgi.py - create mode 100644 manage.py - create mode 100644 requirements.txt - create mode 100644 runtime.txt -## Pick an application name + + + +### Collecting static files. + +Were you wondering what "whitenoise" thing was? It's a tool for serve so-called "static files". Static files work differently on servers compared to on our own computer, and we need a tool like "whitenoise" to serve them. + +We'll find out a bit more about static files later in the tutorial, when we edit the CSS for our site. + +For now we just need to run an extra command called "collectstatic", on the server. It tells Django to gather up all the static files it needs on the server. Mostly, these are the static files that make the admin site look pretty at the moment. + + + 20:20 ~ $ python manage.py collectstatic + + You have requested to collect static files at the destination + location as specified in your settings: + + /home/edith/my-first-blog/static + + This will overwrite existing files! + Are you sure you want to do this? + + Type 'yes' to continue, or 'no' to cancel: yes + +Type "yes", and away it goes! Don't you love making computers print out pages and pages of impenetrable text? I always make little noises to accompany it. Brp, brp brp... + + Copying '/home/edith/.virtualenvs/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/js/actions.min.js' + Copying '/home/edith/.virtualenvs/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/js/inlines.min.js' + [...] + Copying '/home/edith/.virtualenvs/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/css/changelists.css' + Copying '/home/edith/.virtualenvs/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/css/base.css' + 62 static files copied to '/home/edith/my-first-blog/static'. + + +### Creating the database on PythonAnywhere + +Here's another thing that's different between your own computer and the server -- it uses a different database. So, the user accounts and posts can be different on the server and on your computer. + +So we initialise the database on the server just like we did the one on your own computer, with `migrate` and `createsuperuser`: + + + (mvenv)20:20 ~ $ python manage.py migrate + Operations to perform: + [...] + Applying sessions.0001_initial... OK + + + (mvenv)20:20 ~ $ python manage.py createsuperuser + + +## Publishing our blog as a web app + +Now our code is on PythonAnywhere, our virtualenv is ready, the static files are collected, and the database is initialised, we're ready to publish it as a web app. + +Click back to the PythonAnywhere dashboard by clicking on its logo, and go click on the **Web** tab, and hit **Add a new web app**. + +In the dialog, after confirming your domain name, choose **manual configuration** (NB *not* the "Django" option). Next, choose **Python 3.4**, and click Next to finish the wizard. + +> **Note** make sure you choose the "Manual configuration" option, not the "Django" one. We're too cool for the default PythonAnywhere Django setup ;-) + + +### Setting the virtualenv + +You'll be taken to the PythonAnywhere config screen for your webapp, which is where you'll need to go whenever you want to make changes to the app on the server. -We'll be making your blog available on the Web at `[your blog's name].herokuapp.com`, so we need to choose a name that nobody else has taken. This name doesn't need to be related to the Django `blog` app or to `mysite` or anything we've created so far. The name can be anything you want, but Heroku is quite strict as to what characters you can use: you're only allowed to use simple lowercase letters (no capital letters or accents), numbers, and dashes (`-`). -Once you've thought of a name (maybe something with your name or nickname in it), run this command, replacing `djangogirlsblog` with your own application name: + - $ heroku create djangogirlsblog +In the "Virtualenv" section, click the red text that says "Enter the path to a virtualenv", and enter: */home//my-first-blog/myvenv/* -> __Note__: Remember to replace `djangogirlsblog` with the name of your application on Heroku. +> __Note__: substitute your own username as appropriate. If you make a mistake, PythonAnywhere will show you a little warning. -If you can't think of a name, you can instead run - $ heroku create +### Configuring the WSGI file -and Heroku will pick an unused name for you (probably something like `enigmatic-cove-2527`). +Django works using the "WSGI protocol", a standard for serving websites using Python, which PythonAnywhere supports. The way we configure PythonAnywhere to recognise our Django blog is by editing a WSGI configuration file. -If you ever feel like changing the name of your Heroku application, you can do so at any time with this command (replace `the-new-name` with the new name you want to use): +Click on the "WSGI configuration file" link (in the "Code" section near the top of the page -- it'll be named something like `/var/www/_pythonanywhere_com_wsgi.py`), and you'll be taken to an editor. - $ heroku apps:rename the-new-name +Delete all the current contents, and replace them with something like this: -> __Note__: Remember that after you change your application's name, you'll need to visit `[the-new-name].herokuapp.com` to see your site. +```python +import os +import sys -## Deploy to Heroku! +path = '/home//my-first-blog' # use your own username here +if path not in sys.path: + sys.path.append(path) -That was a lot of configuration and installing, right? But you only need to do that once! Now you can deploy! +os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings' -When you ran `heroku create`, it automatically added the Heroku remote for our app to our repository. Now we can do a simple git push to deploy our application: +from django.core.wsgi import get_wsgi_application +from whitenoise.django import DjangoWhiteNoise +application = DjangoWhiteNoise(get_wsgi_application()) +``` - $ git push heroku master +> **Note** don't forget to substitute in your own username where it says `` -> __Note__: This will probably produce a *lot* of output the first time you run it, as Heroku compiles and installs psycopg. You'll know it's succeeded if you see something like `https://yourapplicationname.herokuapp.com/ deployed to Heroku` near the end of the output. +This file's job is to tell PythonAnywhere where our web app lives and what the Django settings file's name is. It also sets up the "whitenoise" static files tool. -## Visit your application +Hit **Save**, and then go back to the **Web** tab. -You’ve deployed your code to Heroku, and specified the process types in a `Procfile` (we chose a `web` process type earlier). -We can now tell Heroku to start this `web process`. +We're all done! Hit the big green **Reload** button and you'll be able to go view your application. You'll find a link to it at the top of the page. -To do that, run the following command: - $ heroku ps:scale web=1 +## Debugging tips -This tells Heroku to run just one instance of our `web` process. Since our blog application is quite simple, we don't need too much power and so it's fine to run just one process. It's possible to ask Heroku to run more processes (by the way, Heroku calls these processes "Dynos" so don't be surprised if you see this term) but it will no longer be free. +If you see an error when you try to visit your site, the first place to look for some debugging info is in your **error log** -- you'll find a link to this on the PythonAnywhere web tab. See if there are any error messages in there. The most recent ones are at the bottom. Common problems include -We can now visit the app in our browser with `heroku open`. +- forgetting one of the steps we did in the console: creating the virtualenv, activating it, installing Django into it, running collectstatic, initialising the database +- making a mistake in the virtualenv path on the web tab -- there will usually be a little red error message on there, if there is a problem +- making a mistake in the WSGI configuration file -- did you get the path to your my-first-blog folder right? - $ heroku open +Your coach is here to help! -> __Note__: you will see an error page! We'll talk about that in a minute. -This will open a url like [https://djangogirlsblog.herokuapp.com/]() in your browser, and at the moment you will probably see an error page. Since we only created the admin view for the app so far, add `admin/` to the url (e.g. [https://djangogirlsblog.herokuapp.com/admin/]()) to see a working page of our web app. +# You are live! -The error you saw was because we when we deployed to Heroku, we created a new database and it's empty. We need to run the ```migrate``` command like we did when we first started our project to set our database up properly: +The default page for your site should say "Welcome to Django", just like it does on your local PC. Try adding `/admin/` to the end of the URL, and you'll be taken to the admin site. Log in with the username and password, and you'll see you can add new Posts on the server. - $ heroku run python manage.py migrate - $ heroku run python manage.py createsuperuser +Give yourself a *HUGE* pat on the back -- server deployments are one of the trickiest parts of web development, and it often takes people several days before they get them working. But you've got your site live, on the real Internet, just like that! -The command prompt will ask you to choose a username and a password again. These will be your login details on your live website's admin page. Refresh it in your browser, and you're good to go! -You should now be able to see your website in a browser! Congrats :)! diff --git a/en/deploy/images/github_get_repo_url_screenshot.png b/en/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..44412f84823 Binary files /dev/null and b/en/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/en/deploy/images/new_github_repo.png b/en/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..6e19174ec88 Binary files /dev/null and b/en/deploy/images/new_github_repo.png differ diff --git a/en/deploy/images/pythonanywhere_web_tab_virtualenv.png b/en/deploy/images/pythonanywhere_web_tab_virtualenv.png new file mode 100644 index 00000000000..cafa22c2d97 Binary files /dev/null and b/en/deploy/images/pythonanywhere_web_tab_virtualenv.png differ diff --git a/en/django_forms/README.md b/en/django_forms/README.md index 074c59456e8..3d2a04e7d6c 100644 --- a/en/django_forms/README.md +++ b/en/django_forms/README.md @@ -329,15 +329,24 @@ If you need more information about Django forms you should read the documentatio ## One more thing: deploy time! -It'd be good to see if your website will still be working on Heroku, right? Let's try deploying again. If you forgot how to do it, check the end of chapter [Deploy](../deploy/README.md): +Let's see if all this works on PythonAnywhere. Time for another deploy! + +* First, commit your new code, and push it up to Github $ git status - ... $ git add -A . $ git status - ... $ git commit -m "Added views to create/edit blog post inside the site." - ... - $ git push heroku master + $ git push + +* Then, in a [PythonAnywhere Bash console](https://www.pythonanywhere.com/consoles/): + + + $ cd my-first-blog + $ git pull + [...] + +* Finally, hop on over to the [Web tab](https://www.pythonanywhere.com/web_app_setup/) and hit **Reload**. + And that should be it! Congrats :) diff --git a/en/django_start_project/README.md b/en/django_start_project/README.md index bd93694707f..64f76c395ce 100644 --- a/en/django_start_project/README.md +++ b/en/django_start_project/README.md @@ -45,6 +45,7 @@ Remember when we talked about a mail carrier checking where to deliver a letter? Let's ignore the other files for now - we won't change them. The only thing to remember is not to delete them by accident! + ## Changing settings Let's make some changes in `mysite/settings.py`. Open the file using the code editor you installed earlier. @@ -60,6 +61,14 @@ TIME_ZONE = 'Europe/Berlin' Modifying "Europe/Berlin" as appropriate +We'll also need to add a path for static files (we'll find out all about static files and CSS later in the tutorial). Go down to the *end* of the file, and just underneath the `STATIC_URL` entry, add a new one called `STATIC_ROOT`: + +```python +STATIC_URL = '/static/' +STATIC_ROOT = os.path.join(BASE_DIR, 'static') +``` + + ## Setup a database There's a lot of different database software that can store data for your site. We'll use the default one, `sqlite3`. diff --git a/en/django_templates/README.md b/en/django_templates/README.md index 150009c81a8..921bad4459e 100644 --- a/en/django_templates/README.md +++ b/en/django_templates/README.md @@ -63,16 +63,30 @@ Have you noticed that we used a slightly different notation this time `{{ post.t ## One more thing -It'd be good to see if your website will still be working on Heroku, right? Let's try deploying again. If you forgot how to do it, check the end of chapter 15: +It'd be good to see if your website will still be working on the public Internet, right? Let's try deploying to PythonAnywhere again. Here's a recap of the steps... + +* First, push your code to Github $ git status - ... + [...] $ git add -A . $ git status - ... - $ git commit -m "Used Django templates instead of static HTML." - ... - $ git push heroku master + [...] + $ git commit -m "Added views to create/edit blog post inside the site." + [...] + $ git push + + +* Then, log back in to [PythonAnywhere](https://www.pythonanywhere.com/consoles/) and go to your **Bash console** (or start a new one), and run: + + + $ cd my-first-blog + $ git pull + [...] + + +* Finally, hop on over to the [Web tab](https://www.pythonanywhere.com/web_app_setup/) and hit **Reload** on your web app. Your update should be live! + Congrats! Now go ahead and try adding a new post in your Django admin (remember to add published_date!), then refresh your page to see if the post appears there. diff --git a/en/domain/README.md b/en/domain/README.md index 373634e96c2..a2b9251baf5 100644 --- a/en/domain/README.md +++ b/en/domain/README.md @@ -1,8 +1,9 @@ # Domain -Heroku gave you a domain, but it's long, hard to remember, and ugly. It'd be awesome to have a domain name that is short and easy to remember, right? +PythonAnywhere gave you a free domain, but maybe you don't want to have ".pythonanywhere.com" at the end of your blog URL. Maybe you want your blog to just live at "www.infinite-kitten-pictures.org" or "www.3d-printed-steam-engine-parts.com" or "www.antique-buttons.com" or "www.mutant-unicornz.net", or whatever it'll be. + +Here we'll talk a bit about where to get a domain, and how to hook it up to your web app on PythonAnywhere. However, you should know that most domains cost money, and PythonAnywere also charges a monthly fee to use your own domain name -- it's not much money in total, but this is probably something you only want to do if you're really committed! -In this chapter we will teach you how to buy a domain and direct it to Heroku! ## Where to register a domain? @@ -10,23 +11,12 @@ A typical domain costs around $15 a year. There are cheaper and more expensive o Our favourite one is [I want my name](https://iwantmyname.com/). They advertise as "painless domain management" and it really is painless. -## How to register domain in IWantMyName? - -Go to [iwantmyname](http://iwantmyname.com) and type a domain you want to have in the search box. - -![](images/1.png) - -You should now see a list of all available domains with the term you put in the search box. As you can see, a smiley face indicates that the domain is available for you to buy, and a sad face that it is already taken. - -![](images/2.png) +You can also get domains for free. [dot.tk](http://www.dot.tk) is one place to get one, but you should be aware that free domains sometimes feel a bit cheap -- if your site is going to be for a professional business, you might want to think about paying for a "proper" domain that ends in `.com`. -We've decided to buy `djangogirls.in`: -![](images/3.png) +## How to point your domain at PythonAnywhere -Go to checkout. You should now sign up for iwantmyname if you don't have an account yet. After that, provide your credit card info and buy a domain! - -After that, click `Domains` in the menu and choose your newly purchased domain. Then locate and click on the `manage DNS records` link: +If you went through *iwantmyname.com*, click `Domains` in the menu and choose your newly purchased domain. Then locate and click on the `manage DNS records` link: ![](images/4.png) @@ -37,19 +27,43 @@ Now you need to locate this form: And fill it in with the following details: - Hostname: www - Type: CNAME -- Value: your domain from Heroku (for example djangogirls.herokuapp.com) -- TTL: 3600 +- Value: your domain from PythonAnywhere (for example djangogirls.pythonanywhere.com) +- TTL: 60 ![](images/6.png) Click the Add button and Save changes at the bottom. -It can take up to a couple of hours for your domain to start working, so be patient! -## Configure domain in Heroku +> **Note** If you used a different domain provider, the exact UI for finding your DNS / CNAME settings will be different, but your objective is the same: to set up a CNAME that points your new domain at `yourusername.pythonanywhere.com`. + +It can take a few minutes for your domain to start working, so be patient! + + +## Configure the domain via a web app on PythonAnywhere. + +You also need to tell PythonAnywhere that you want to use your custom domain. + +Go to the [PythonAnywhere Accounts page](https://www.pythonanywhere.com/account/) and upgrade your account. The cheapest option (a "Hacker" plan) is fine to start with, you can always upgrade it later when you get super-famous and have millions of hits. + +Next, go over to the [Web tab](https://www.pythonanywhere.com/web_app_setup/) and note down a couple of things: + +* Copy the **path to your virtualenv** and put it somewhere safe +* Click through to your **wsgi config file**, copy the contents, and paste them somewhere safe. + +Next, **Delete** your old web app. Don't worry, this doesn't delete any of your code, it just switches off the domain at *yourusername.pythonanywhere.com*. Next, create a new web app, and follow these steps: + +* Enter your new domain name +* Choose "manual configuration" +* Pick Python 3.4 +* And we're done! + +When you get taken back to the web tab. + +* Paste in the virtualenv path you saved earlier +* Click through to the wsgi configuration file, and paste in the contents from your old config file -You also need to tell Heroku that you want to use your custom domain. +Hit reload web app, and you should find your site is live on its new domain! -Go to the [Heroku Dashboard](https://dashboard.heroku.com/apps), login to your Heroku account and choose your app. Then go into app Settings and add your domain in the `Domains` section and save your changes. +If you run into any problems, hit the "Send feedback" link on the PythonAnywhere site, and one of their friendly admins will be there to help you in no time. -That's it! diff --git a/en/extend_your_application/README.md b/en/extend_your_application/README.md index 8379d5d640c..7decc466b41 100644 --- a/en/extend_your_application/README.md +++ b/en/extend_your_application/README.md @@ -137,17 +137,24 @@ Ok, we can refresh our page and see if `Page not found` is gone now. Yay! It works! + ## One more thing: deploy time! -It'd be good to see if your website will still be working on Heroku, right? Let's try deploying again. If you forgot how to do it, check the end of chapter [Deploy](../deploy/README.md): +It'd be good to see if your website will still be working on PythonAnywhere, right? Let's try deploying again. $ git status - ... $ git add -A . $ git status - ... - $ git commit -m "Added more views to the website." - ... - $ git push heroku master + $ git commit -m "Added views to create/edit blog post inside the site." + $ git push + +* Then, in a [PythonAnywhere Bash console](https://www.pythonanywhere.com/consoles/): + + $ cd my-first-blog + $ git pull + [...] + + +* Finally, hop on over to the [Web tab](https://www.pythonanywhere.com/web_app_setup/) and hit **Reload**. And that should be it! Congrats :) diff --git a/en/html/README.md b/en/html/README.md index afcc9520547..9a2c541c4d4 100644 --- a/en/html/README.md +++ b/en/html/README.md @@ -142,9 +142,11 @@ Yaaay! But so far, our template only ever displays exactly __the same informatio What we really want to do is display real posts added in our Django admin - and that's where we're going next. -## One more thing +## One more thing: deploy! -It'd be good to see if your website will be still working on Heroku, right? Let's try deploying again. +It'd be good to see all this out and live on the Internet, right? Let's do another PythonAnywhere deploy: + +### Commit, and push your code up to Github First off, let's see what files have changed since we last deployed: @@ -166,8 +168,24 @@ We're almost there, now it's time to tell it to save this change in its history. > __Note__ Make sure you use double quotes around the commit message. -Once we've done that, we can finally upload (push) our changes to the website on heroku: +Once we've done that, we upload (push) our changes up to PythonAnywhere: + + git push + + +### Pull your new code down to PythonAnywhere, and reload your web app + +* Open up the [PythonAnywhere consoles page](https://www.pythonanywhere.com/consoles/) and go to your **Bash console** (or start a new one). Then, run: + + + $ cd ~/my-first-blog + $ git pull + [...] + +And watch your code get downloaded. If you want to check that it's arrived, you can hop over to the **Files tab** and view your code on PythonAnywhere. + + +* Finally, hop on over to the [Web tab](https://www.pythonanywhere.com/web_app_setup/) and hit **Reload** on your web app. - git push heroku master +Your update should be live! Go ahead and refresh your website in the browser. Changes should be visible :) -And that should be it! Once Heroku is finished, you can go ahead and refresh your website in the browser. Changes should be visible! diff --git a/en/python_introduction/README.md b/en/python_introduction/README.md index 165a2a96b7a..b0b0513d437 100644 --- a/en/python_introduction/README.md +++ b/en/python_introduction/README.md @@ -170,7 +170,7 @@ Try this: >>> print(name) Maria -When you just type `name`, the Python interpreter responds with the string *representation* of the variable 'name', which is the letters M-a-r-i-a, surrounded by single quotes, ''. When you say `print(name)`, Python will "print" the contents of the variable to the screen, without the quotes, which is neater. +When you just type `name`, the Python interpreter responds with the string *representation* of the variable 'name', which is the letters M-a-r-i-a, surrounded by single quotes, ''. When you say `print(name)`, Python will "print" the contents of the variable to the screen, without the quotes, which is neater. As we'll see later, `print()` is also useful when we want to print things from inside functions, or when we want to print things on multiple lines. @@ -417,7 +417,7 @@ Earlier, we picked out a code editor from the [code editor](../code_editor/READM print('Hello, Django girls!') ``` -> **Note** You should notice one of the coolest thing about code editors: colours! In the Python console, everything was the same colour, but now you should see that the `print` function is a different colour from the string inside it. That's called "syntax highlighting", and it's a really useful helping hand when coding. Watch out for the colour of things, and you'll get a hint for when you forget to close a string, or make a typo in a keyword name (like the `def` in a function, which we'll see below). This is one of the reasons we use a code editor :) +> **Note** You should notice one of the coolest thing about code editors: colours! In the Python console, everything was the same colour, but now you should see that the `print` function is a different colour from the string inside it. That's called "syntax highlighting", and it's a really useful helping hand when coding. Watch out for the colour of things, and you'll get a hint for when you forget to close a string, or make a typo in a keyword name (like the `def` in a function, which we'll see below). This is one of the reasons we use a code editor :) Obviously, you're a pretty seasoned python developer now, so feel free to write some code that you've learned today. diff --git a/en/template_extending/README.md b/en/template_extending/README.md index 50679ba3856..70387a8ba81 100644 --- a/en/template_extending/README.md +++ b/en/template_extending/README.md @@ -2,7 +2,7 @@ Another nice thing Django has for you is __template extending__. What does this mean? It means that you can use the same parts of your HTML for different pages of your website. -This way you don't have to repeat yourself in every file, when you want to use the same information/layout. And if you want to change something, you don't have to do it in every template, just once! +This way you don't have to repeat yourself in every file, when you want to use the same information/layout. And if you want to change something, you don't have to do it in every template, just once! ## Create base template