Lab 5 - Pelican & Basic HTML/CSS

Create a static page using Pelican, or write plain html. Deploy using GitHub pages. Learn to style the basic theme.

Answers to the questions should be submitted to Lab 5 on eClass. Feel free to follow along with the official documentation.

aside: These lab instructions are currently using Pelican and hosted on Github Pages!

Initializing the Project

Create a repository on Github for your github hosted page.

Clone the repository, change directory into the repo. Create a branch named src and initialize a python3 virtual environment.

git clone {git-repo-url}
cd {git-clone-url}
git branch src
git checkout src
virtualenv venv --python=python3
source venv/bin/activate

Install Pelican and Markdown.

pip install pelican markdown

Run the pelican quickstart.


Welcome to pelican-quickstart v4.0.1.

This script will help you create a new Pelican-based website.

Please answer the following questions so this script can generate the files
needed by Pelican.

> Where do you want to create your new web site? [.] 
> What will be the title of this web site? My Cool Site
> Who will be the author of this web site? Danger Doggo
> What will be the default language of this web site? [en] 
> Do you want to specify a URL prefix? e.g.,   (Y/n) n
> Do you want to enable article pagination? (Y/n) Y
> How many articles per page do you want? [10] 
> What is your time zone? [Europe/Paris] America/Edmonton
> Do you want to generate a to automate generation and publishing? (Y/n) Y
> Do you want to upload your website using FTP? (y/N) N
> Do you want to upload your website using SSH? (y/N) N
> Do you want to upload your website using Dropbox? (y/N) N
> Do you want to upload your website using S3? (y/N) N
> Do you want to upload your website using Rackspace Cloud Files? (y/N) N
> Do you want to upload your website using GitHub Pages? (y/N) Y
> Is this your personal page ( (y/N) Y
Done. Your new project is available at /path/to/your/project

Create your first Article

Create a file inside content with some content. For example, you can use content/ with the following:

Title: My First Article
Date: 2019-01-07 8:00
Category: Blog

I like free static web hosting.

Generate and preview your site using make devserver. Your site should now be available at http://localhost:8000.

Deploy your page to Github

Update and set SITEURL to your github given url.

Theme your static site

Make a directory called templates. Within this directory, create a new theme directory containing a templates folder and a static folder.

mkdir -p templates/mytheme/{static,templates}

Within the templates/mytheme/templates" directory, create a new file base.html. Within the templates/mytheme/static directory, create a new file style.css*.

touch templates/mytheme/templates/base.html
touch templates/mytheme/static/style.css

Add the following content to the file templates/mytheme/templates/base.html.

{% extends "!simple/base.html" %}

{% block head %}
{{ super() }}
  <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/style.css" />
{% endblock %}

Modify the content of the templates/mytheme/static/style.css file to your preference. A quick sample stylesheet can be found below.

html, body {
  margin: 0;
  border: 0;
  font-size: 100%;
  background-color: #000000;
  color: #ffffff;

Add your theme to your file.

THEME = 'templates/mytheme'

In, Comment out CATEGORY_FEED_ATOM. * See pelican/issues/2489

Create at least articles/pages on your static site and deploy to GitHub. Ensure that you are not using a theme created by someone else.

Question 1: What are some of the benefits of using a static site generator? What are some disadvantages?

Question 2: What is the link to your GitHub pages hosted static site?

If you are not finished Lab 4, please work on it. We will be deploying the Django application to Heroku in the next lab.