|
| 1 | +title: Generating Static Websites with Pelican, Jinja2 and Markdown |
| 2 | +slug: generating-static-websites-pelican-jinja2-markdown |
| 3 | +meta: Learn how to generate static websites with Python, the Pelican static site generator, Jinja2 and Markdown. |
| 4 | +category: post |
| 5 | +date: 2017-05-31 |
| 6 | +modified: 2017-05-31 |
| 7 | +headerimage: /img/170531-static-sites-pelican/header.jpg |
| 8 | +headeralt: Pelican, Jinja2 and Markdown logos. |
| 9 | + |
| 10 | + |
| 11 | +[Pelican](/pelican.html) is an incredibly well-built Python tool for |
| 12 | +[generating static sites](/static-site-generator.html). |
| 13 | + |
| 14 | +[Full Stack Python](https://www.fullstackpython.com/) is built with Pelican, |
| 15 | +[Jinja2 templates](/jinja2.html) and [Markdown](/markdown.html). |
| 16 | +This site is deployed to Amazon S3 and currently handles over one hundred |
| 17 | +thousand readers per month. There are never scaling concerns because a static |
| 18 | +site is pre-generated before deployment and a web server simply responds |
| 19 | +with existing files rather than executing any code on the server during |
| 20 | +the HTTP request-response cycle. |
| 21 | + |
| 22 | +In this tutorial you will learn how to create a basic static site that you |
| 23 | +can further customize and expand with your own design and content. |
| 24 | + |
| 25 | + |
| 26 | +## Our Tools |
| 27 | +This tutorial will with with either [Python 2 or 3](/python-2-or-3.html), |
| 28 | +but Python 3 is strongly recommended for new applications. I used |
| 29 | +[Python 3.6.1](https://www.python.org/downloads/release/python-361/) to |
| 30 | +write this post. In addition to Python, throughout this tutorial we |
| 31 | +will also use the following |
| 32 | +[application dependencies](/application-dependencies.html): |
| 33 | + |
| 34 | +* [pelican](/pelican.html) |
| 35 | + [static site generator](/static-site-generator.html), |
| 36 | + [version 3.7.1](https://github.com/getpelican/pelican/releases/tag/3.7.1) |
| 37 | +* [markdown](/markdown.html) parsing library to handle Markdown as a content |
| 38 | + input format, version |
| 39 | + [2.6.8](https://github.com/waylan/Python-Markdown/releases/tag/2.6.8-final) |
| 40 | +* [jinja2](/jinja2.html), a Python [template engine](/template-engines.html), |
| 41 | + version [2.9.6](https://github.com/pallets/jinja/releases/tag/2.9.6) |
| 42 | +* [pip](https://pip.pypa.io/en/stable/) and |
| 43 | + [virtualenv](https://virtualenv.pypa.io/en/latest/), which come |
| 44 | + packaged with Python 3, to install and isolate the Pelican, Markdown, |
| 45 | + and Jinja2 libraries from any of your other Python projects |
| 46 | + |
| 47 | +If you need help getting your |
| 48 | +[development environment](/development-environments.html) configured, take a |
| 49 | +look at |
| 50 | +[this guide for setting up Python 3 and Flask on Ubuntu 16.04 LTS](/blog/python-3-flask-green-unicorn-ubuntu-1604-xenial-xerus.html) |
| 51 | + |
| 52 | +All code in this blog post is available open source under the MIT license |
| 53 | +on GitHub under the |
| 54 | +[generating-static-websites-pelican-jinja2-markdown directory of the blog-code-examples repository](https://github.com/fullstackpython/blog-code-examples). |
| 55 | +Use and abuse the source code as you like for your own applications. |
| 56 | + |
| 57 | + |
| 58 | +## Install the Pelican and Markdown libraries |
| 59 | +Start by creating a new virtual environment for your project. |
| 60 | + |
| 61 | +```bash |
| 62 | +python3 -m venv |
| 63 | +``` |
| 64 | + |
| 65 | +<img src="/img/170531-static-sites-pelican/activate-virtualenv.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Create and activate the Python virtual environment."> |
| 66 | + |
| 67 | +Install the appropriate dependencies after your virtualenv is activated. |
| 68 | +The text `(staticsite)` should be prepended to your command prompt. Install |
| 69 | +the Pelican and Markdown Python libraries. Jinja2 will also be installed |
| 70 | +because Pelican specifies it as a dependency. |
| 71 | + |
| 72 | +```bash |
| 73 | +pip install pelican==3.7.1 markdown==2.6.8 |
| 74 | +``` |
| 75 | + |
| 76 | +Run the command and after everything is installed you should see output |
| 77 | +similar to the following "Sucessfully installed" message. |
| 78 | + |
| 79 | +```bash |
| 80 | +Installing collected packages: pygments, pytz, six, feedgenerator, blinker, unidecode, MarkupSafe, jinja2, python-dateutil, docutils, pelican, markdown |
| 81 | + Running setup.py install for feedgenerator ... done |
| 82 | + Running setup.py install for blinker ... done |
| 83 | + Running setup.py install for MarkupSafe ... done |
| 84 | + Running setup.py install for markdown ... done |
| 85 | +Successfully installed MarkupSafe-1.0 blinker-1.4 docutils-0.13.1 feedgenerator-1.9 jinja2-2.9.6 markdown-2.6.8 pelican-3.7.1 pygments-2.2.0 python-dateutil-2.6.0 pytz-2017.2 six-1.10.0 unidecode-0.4.20 |
| 86 | +``` |
| 87 | + |
| 88 | +Now that our dependencies are installed we can start building our |
| 89 | +static site. |
| 90 | + |
| 91 | + |
| 92 | +## Generate a Basic Site |
| 93 | +Create a new directory for your project. My site will contain some of my |
| 94 | +favorite [retro synthwave](https://www.youtube.com/watch?v=uYRZV8dV10w) |
| 95 | +artists as examples, but of course your site can contain whatever subjects |
| 96 | +that you want. |
| 97 | + |
| 98 | + |
| 99 | + |
| 100 | +## What's next? |
| 101 | +You just generated your first [Pelican](/pelican.html) static website using |
| 102 | +[Markdown](/markdown.html) and [Jinja2](/jinja2.html). Next you can |
| 103 | +make additional modifications to the Jinja2 templates, build new pages and |
| 104 | +add more content via Markdown files. |
| 105 | + |
| 106 | +Looking to get even more advanced with Pelican? Check out the open source |
| 107 | +[Full Stack Python code](https://github.com/mattmakai/fullstackpython.com) |
| 108 | +to see how a fairly large 100+ pages and 100,000+ words site can be built. |
| 109 | + |
| 110 | +Questions? Let me know via |
| 111 | +[a GitHub issue ticket on the Full Stack Python repository](https://github.com/mattmakai/fullstackpython.com/issues), |
| 112 | +on Twitter |
| 113 | +[@fullstackpython](https://twitter.com/fullstackpython) |
| 114 | +or [@mattmakai](https://twitter.com/mattmakai). |
| 115 | + |
| 116 | +See something wrong in this blog post? Fork |
| 117 | +[this page's source on GitHub](https://github.com/mattmakai/fullstackpython.com/blob/master/content/posts/170531-static-sites-pelican.markdown) |
| 118 | +and submit a pull request. |
| 119 | + |
0 commit comments