Making this blog

Static webpages using Pelican

To create this webpage, I used Pelican, a static website generator written in Python. Static websites are quick and easy to create, and generators like Pelican are increasingly popular, especially in the blogging world. A static website is just a folder full of HTML documents that a user navigates and views by following hyperlinks in a browser, which fetches the documents from a server. This folder of HTML documents, your website, can be hosted anywhere! In fact, GitHub Pages allows you to host your website directly from a GitHub repository. This makes getting a blog up and running super easy, simple, and free!

Pelican generates HTML files by plugging your Markdown or reStructuredText files (which contain the content ie. words of your site) into Jinja2 templates. All that's left is choosing a theme, and there are many available. Or, if you're picky like me and want to really customize the look of your website, you can dive in and create your own. More on that later.

Once you have a basic site up and running, creating a new post on your website is as simple as creating a new Markdown file, adding in some metadata about the post, and writing up your content. For example, the metadata and first few lines of the post you're reading right now look like this:

Once you are done writing your new post, just push the changes to the GitHub repo where your site resides, and they're instantly live!

Fun with themes (HTML5 and CSS3)

I mentioned that you can create your own theme. For this page, I didn't start from scratch. I used the Flex theme, and then did some modificaiton of the CSS (and, it turns out, some of the templates) to make the site behave and look the way I wanted. I use Jupyter notebooks whenever possible, so I am able to write Markdown content, edit HTML and CSS, change my site's fundamental settings (like the URL, copyright settings, etc.), navigate my repo, and view the live page all in a browser tab (or 7). I find this pretty convenient, easy to fire up to just start writing, and it has the added benefit of immediate access to Chrome's DevTools. I used that a lot as I learned the nuances of HTML5 and CSS3.

Here is a screenshot of my workspace:

Editing the 'About/CV' page and playing with the theme. My style.css file is in the upper left. My command prompt to generate the html files is in the lower left. And the browser does the rest (writing the raw Markdown in a Jupyter notebook, as well as viewing the compiled and formatted HTML. Chrome's DevTools was also particularly useful for me, a webdev newbie.

For someone relatively new to WebDev, I appreciated the simplicity of this setup, as it allowed me to troubleshoot easily and get up and running quickly. There are lots of resources out there to follow along as well. Best of luck!