So now we need to beautify that home page a little bit, and the best way to do that is to introduce some CSS.
When I started out using django, I found static files (ie those files such as images, stylesheets, pdfs etc) quite confusing. Where to put them? How to use them during development etc. Hopefully the example here with our css files will show you one solution.
We are going to create a directory called "static", into which all our resource files will be put.
At the same time, we will download the latest version of twitter bootstrap and unpack it into that directory. (Of course, you can write your own css if you prefer).
I like to do some jiggling about with the file names bootstrap provides... you'll get the gist.
At the time of writing the latest bootstrap was 3.3.4/
So create that directory... grab the bootstrap distribution from http://getbootstrap.com/getting-started/ and unzip it into a sensibly versioned folder.
neil@debian ~ $ mkdir -p ~/myproject/static/bootstrap neil@debian ~ $ wget https://github.com/twbs/bootstrap/releases/download/v3.3.4/bootstrap-3.3.4-dist.zip neil@debian ~ $ unzip bootstrap-3.3.4-dist.zip neil@debian ~ $ mv bootstrap-3.3.4-dist ~/myproject/static/bootstrap/v3.3.4 neil@debian ~ $ rm bootstrap-3.3.4-dist.zip
This will give us the following structure.
neil@debian ~ $ tree myproject
myproject
├── homepages
│ ├── admin.py
│ ├── __init__.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── templates
│ │ ├── base.html
│ │ └── homepages
│ │ ├── about.html
│ │ └── home.html
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── manage.py
├── myproject
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── static
└── bootstrap
└── v3.3.4
├── css
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js
├── bootstrap.js
├── bootstrap.min.js
└── npm.js
11 directories, 29 files
All that remains to be done now is to change our "base.html" template by adding this line just before the </head>.
<link rel="stylesheet href="//static.rowinggolfer.org/bootstrap/v3.3.4/bootstrap.css" />
And adding the following line somewhere in our settings.py
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
now if you run the test server again and take a look at http://127.0.0.1:8000 you should see a subtly different page.
If you don't.... DO NOT PANIC
I am going to go over the many things which could have gone wrong in our next section.