Merge pull request #1847 from kewtree1408/move-away-from-Cloud9

Move away from Cloud9 and change the instruction for Chromebook

Author: das-g

en/chromebook_setup/images/codespace-auto-delete-off.png

@@ -1,187 +1,32 @@
-You can [skip right over this section](http://tutorial.djangogirls.org/en/installation/#install-python) if you're not using a Chromebook. If you
-are, your installation experience will be a little different. You can ignore the
-rest of the installation instructions.
+For people using a Chromebook or those with limited memory on their laptops, we recommend using a cloud IDE environment. This allows you to interact with the command line, Python, and Django directly through your browser, where a code editor is already installed. In case you using this instruction, some steps of the tutorial don't have to be done again ("Deploy/Git" [part](https://tutorial.djangogirls.org/en/deploy/#installing-git) ). You’ll find a more detailed explanation in the “Deploy/Git” section.
 
-### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com)
+Your installation experience will be a little different.
 
-Cloud IDE is a tool that gives you a code editor and access to a computer running
-on the Internet where you can install, write, and run the software. For the duration
-of the tutorial, cloud IDE will act as your _local machine_. You'll still be
-running commands in a terminal interface just like your classmates on OS X,
-Ubuntu, or Windows, but your terminal will be connected to a computer running
-somewhere else that cloud IDE sets up for you.
-Here are the instructions for cloud IDEs (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com).
-You can choose one of the cloud IDEs, and follow the instruction of the cloud IDE.
+1. **Go to [GitHub.com](https://github.com)** and sign up for a new, free user account. Be sure to remember your password (add it to your password manager, if you use one).
 
-#### PaizaCloud Cloud IDE
+2. **Create a GitHub project**. Visit [this](https://github.com/new) link, use "my-first-blog" name for your project, and make it public (needed for deployment, you can make it private later). Also, add a `README.md` and `.gitignore` file.
 
-1. Go to [PaizaCloud Cloud IDE](https://paiza.cloud/)
-2. Sign up for an account
-3. Click _New Server_ and choose the Django app
-4. Click Terminal button(on the left side of the window)
+    ![](../chromebook_setup/images/create-new-repo.png)
 
-Now you should see an interface with a sidebar, buttons at the left.
-Click "Terminal" button to open terminal window with prompt like this:
+3. **Start a Codespace**. Go to GitHub [Codespaces](https://github.com/codespaces/new) and select the repository you just created. Click "Create Codespace".
 
-{% filename %}Terminal{% endfilename %}
-```
-$
-```
+    ![](../chromebook_setup/images/create-new-codespace.png)
 
-The terminal on the PaizaCloud Cloud IDE is prepared for your instructions.
-You can resize or maximize that window to make it a bit bigger.
+    Wait a little bit and you'll see something like that:
 
-#### AWS Cloud9
-Currently Cloud 9 requires you to sign up with AWS and enter credit card
-information.
+    ![](../chromebook_setup/images/codespace-preview.png)
 
-1. Install Cloud 9 from the [Chrome web store](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp)
-2. Go to [c9.io](https://c9.io) and click _Get started with AWS Cloud9_
-3. Sign up for an AWS account (requires credit card information, but you can
-   use it for free)
-4. In the AWS Dashboard, enter _Cloud9_ in the search bar and click it
-5. In the Cloud 9 dashboard, click _Create environment_
-6. Name it _django-girls_
-7. While configuring settings, select _Create a new instance for environment
-   (EC2)_ for "Environment Type" and the _t2.micro_ "Instance type" (it should
-   say "Free-tier eligible."). The default cost-saving setting is fine and you
-   can keep the other defaults.
-8. Click _Next step_
-9. Click _Create environment_
+    The [VSCode](https://code.visualstudio.com) editor will open for you automatically. If you see a notification that says "Install Python", please click on it. If not prompted, click the "Extensions" icon on the left sidebar in the Codespace editor. Search for "Python" and click "Install."
 
-Now you should see an interface with a sidebar, a big main window with some
-text, and a small window at the bottom that looks something like this:
+    ![](../chromebook_setup/images/vscode-install-python.png)
 
-{% filename %}bash{% endfilename %}
-```
-yourusername:~/workspace $
-```
+    The bash terminal (similar to Linux) is at the bottom of the page.
 
-This bottom area is your terminal. You can use the terminal to send instructions
-to the remote Cloud 9 computer. You can resize that window to make it a bit
-bigger.
+    ![](../chromebook_setup/images/codespace-preview.png)
 
-#### Glitch.com Cloud IDE
+    By default, the GitHub Codespace environment will be deleted after 1 month (this applies only to the environment, not your code). To prevent auto-deletion, you can adjust the settings on the page: https://github.com/codespaces 
 
-1. Go to [Glitch.com](https://glitch.com/)
-2. Sign up for an account (https://glitch.com/signup) or use your GitHub account if you have one. (See GitHub instructions below.)
-3. Click _New Project_ and choose _hello-webpage_
-4. Click on the Tools dropdown list (at the bottom left side of the window), then on Terminal button to open terminal tab with a prompt like this:
+    ![](../chromebook_setup/images/codespace-auto-delete-off.png)
 
-{% filename %}Terminal{% endfilename %}
-```
-app@name-of-your-glitch-project:~
-```
-
-When using Glitch.com as your Cloud IDE, you don't have to create a virtual environment.
-Instead, create the following files manually:
-
-{% filename %}glitch.json{% endfilename %}
-```json
-{
-  "install": "pip3 install -r requirements.txt --user",
-  "start": "bash start.sh",
-  "watch": {
-    "throttle": 1000
-  }
-}
-```
-
-{% filename %}requirements.txt{% endfilename %}
-```
-Django~={{ book.django_version }}
-```
-
-{% filename %}.bash_profile{% endfilename %}
-```bash
-alias python=python3
-alias pip=pip3
-```
-
-
-{% filename %}start.sh{% endfilename %}
-```bash
-chmod 600 .bash_profile
-pip3 install -r requirements.txt --user
-python3 manage.py makemigrations
-python3 manage.py migrate
-python3 manage.py runserver $PORT
-```
-
-Once these files are created, go to the Terminal and execute the following commands to create your first Django project:
-
-{% filename %}Terminal{% endfilename %}
-```
-django-admin.py startproject mysite .
-refresh
-```
-
-In order to see detailed error messages, you can activate Django debug logs for your Glitch application.
-Simply add the following at the end of the `mysite/settings.py` file.
-
-{% filename %}mysite/settings.py{% endfilename %}
-```python
-LOGGING = {
-    'version': 1,
-    'disable_existing_loggers': False,
-    'handlers': {
-        'file': {
-            'level': 'DEBUG',
-            'class': 'logging.FileHandler',
-            'filename': 'debug.log',
-        },
-    },
-    'loggers': {
-        'django': {
-            'handlers': ['file'],
-            'level': 'DEBUG',
-            'propagate': True,
-        },
-    },
-}
-```
-This will create a `debug.log` file detailing Django operations and any error messages that might come up, making it much easier to fix if your website does not work.
-
-The initial restarting of the Glitch project should fail.
-(If you click on the top dropdown button `Show` then click on `In a New Window`, you will receive a `DisallowedHost` error message.)
-Do not worry about it at this stage, the tutorial will fix this as soon as you update the Django settings of your project in the `mysite/settings.py` file.
-
-### Virtual Environment
-
-A virtual environment (also called a virtualenv) is like a private box we can
-stuff useful computer code into for a project we're working on. We use them to
-keep the various bits of code we want for our various projects separate so
-things don't get mixed up between projects.
-
-Run:
-
-{% filename %}Cloud 9{% endfilename %}
-```
-mkdir djangogirls
-cd djangogirls
-python3 -m venv myvenv
-source myvenv/bin/activate
-pip install django~={{ book.django_version }}
-```
-
-(note that on the last line we use a tilde followed by an equal sign: `~=`).
-
-### GitHub
-
-Make a [GitHub](https://github.com) account.
-
-### PythonAnywhere
-
-The Django Girls tutorial includes a section on what is called Deployment,
-which is the process of taking the code that powers your new web application
-and moving it to a publicly accessible computer (called a server) so other
-people can see your work.
-
-This part is a little odd when doing the tutorial on a Chromebook since we're
-already using a computer that is on the Internet (as opposed to, say, a laptop).
-However, it's still useful, as we can think of our Cloud 9 workspace as a place
-for our "in progress" work and Python Anywhere as a place to show off our stuff
-as it becomes more complete.
-
-Thus, sign up for a new Python Anywhere account at
-[www.pythonanywhere.com](https://www.pythonanywhere.com).
+4. **Continue with the tutorial**. Follow the next steps from the section [Set up virtual environment and install Django](https://tutorial.djangogirls.org/en/installation/#virtualenv).
+    Follow than sections for Ubuntu/Linux. Use the Codespaces command line (terminal), accessible through your browser.

en/chromebook_setup/images/codespace-preview.png

@@ -8,14 +8,26 @@ As you learned, a website has to be located on a server. There are a lot of serv
 
 The other external service we'll be using is [GitHub](https://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!
 
-These three places will be important to you.  Your local computer will be the place where you do development and testing.  When you're happy with the changes, you will place a copy of your program on GitHub.  Your website will be on PythonAnywhere and you will update it by getting a new copy of your code from GitHub.
+These three places will be important to you. Your local computer will be the place where you do development and testing. When you're happy with the changes, you will place a copy of your program on GitHub. Your website will be on PythonAnywhere and you will update it by getting a new copy of your code from GitHub.
+
+The deployment process can be illustrated as follows:
+
+![](../deploy/images/deployment_local.png)
+
+If you’re using a **Chromebook** and [GitHub Codespaces](https://github.com/codespaces), your setup will look a bit different. All code-related changes are made not locally on your **Chromebook**, but in the Cloud Environment provided by GitHub.
+
+The deployment process on **Chromebook** and Cloud environment can be illustrated as follows:
+
+![](../deploy/images/deployment_cloud.png)
 
 # Git
 
 > **Note** If you already did the [installation steps](../installation/README.md), there's no need to do this again – you can skip to the next section and start creating your Git repository.
 
 {% include "/deploy/install_git.md" %}
 
+> **Note** If you're using a **Chromebook** and have already completed the **Chromebook** Installation [part](../chromebook_setup/README.md), you've already created the repository and can **skip** all commands from the "Starting our Git repository" and "Ignoring files" chapters. You can continue from the "First Git commands" chapter.  While you’re welcome to read these chapters, the Terminal commands can be skipped. 
+
 ## Starting our Git repository
 
 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:
@@ -80,6 +92,9 @@ Instead use `ls -a` to see the `.gitignore` file.
 
 > **Note** One of the files you specified in your `.gitignore` file is `db.sqlite3`. That file is your local database, where all of your users and posts are stored. We'll follow standard web programming practice, meaning that we'll use separate databases for your local testing site and your live website on PythonAnywhere. The PythonAnywhere database could be SQLite, like your development machine, but usually you will use one called MySQL which can deal with a lot more site visitors than SQLite. Either way, by ignoring your SQLite database for the GitHub copy, it means that all of the posts and superuser you created so far are going to only be available locally, and you'll have to create new ones on production. You should think of your local database as a good playground where you can test different things and not be afraid that you're going to delete your real posts from your blog.
 
+
+### First Git commands
+
 It's a good idea to use a `git status` command before `git add` or whenever you find yourself unsure of what has changed. This will help prevent any surprises from happening, such as wrong files being added or committed. The `git status` command returns information about any untracked/modified/staged files, the branch status, and much more. The output should be similar to the following:
 
 {% filename %}command-line{% endfilename %}

en/chromebook_setup/images/create-new-codespace.png

@@ -111,7 +111,7 @@ match our hostname on PythonAnywhere once we deploy our application so we will c
 
 {% filename %}mysite/settings.py{% endfilename %}
 ```python
-ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com']
+ALLOWED_HOSTS = ['localhost', '127.0.0.1', '.pythonanywhere.com']
 ```
 
 > **Note**: If you're using a Chromebook, add this line at the bottom of your settings.py file: