Create a blog with Anaconda, Pelican, Jupyter Notebooks (ipynb) and Github Pages (Pt. 2)

On to the second part of the series documenting the process of setting up this blog. This post will cover setting up GitHub pages and pushing your website, looking at options for customisation such as theme, and finally creating some batch files to streamline the process for adding a new post to the blog to avoid excessive use of terminal.

GitHub Pages and gbp-import¶

• If you don't already have one, create an account on GitHub
• Create a new repository with the name yoursite.github.io without creating a readme or .gitignore
• Return to terminal and install ghp-import using: pip install ghp-pages
  • nb: ghp-pages is available on conda-forge, but I would recommend installing from pip as I encountered a number of issues with the conda-forge install
• Update the following line in: publishconf.py:

SITEURL = 'https://yoursite.github.io'

• Regenerate the blogs content using publishing configuration in Pelican: pelican content -s publishconf.py
• Specify the source and GitHub repository: git remote add origin https://github.com/yoursite/yoursite.github.io.git
  • If this is your first time using Git in console, you might be required to log-in using your GitHub credentials
• Use ghp-pages to commit the output folder to the master branch: ghp-import output -b master
• Push your site to GitHub Pages: git push origin master

If the wind was blowing in the right direction, your website should now be available to view at yoursite.github.io/. It can take up to ten minutes for your content to become available at the address, so don't panic if it doesn't work right away. But after ten minutes, panic away.

Some other useful commands:

List remote repositories: git remote -v Delete remote repository: git remote remove origin

Automising¶

As we've seen, every time you change a setting, fix a typo you've just spotted or upload a new post, you'll need to run several comments within terminal. In the next step, we'll be installing and customising a theme, so here's one approach to automising common processes to save on your RSI.

Create a shortcut in a suitable location, then you can specify the target to perform one of the following useful tasks. You'll need to update the windows directories and python environment name. Hopefully the format is fairly intuitive if there are any other processes you might wish to automate.

# Activate environment, navigate to blog folder and run local configuration of pelican 
%windir%\System32\cmd.exe "/K" C:\Users\user\Anaconda3\Scripts\activate.bat C:\Users\user\Anaconda3\envs\ipynblog && cd Documents\ipynblog && pelican content

# Run local server:
%windir%\System32\cmd.exe "/K" C:\Users\user\Anaconda3\Scripts\activate.bat C:\Users\Dave\Anaconda3\envs\ipynblog && cd Documents\ipynblog\output && python -m http.server

# Activate environment, navigate to blog folder, run publish configuration of pelican and upload
%windir%\System32\cmd.exe "/K" C:\Users\user\Anaconda3\Scripts\activate.bat C:\Users\user\Anaconda3\envs\ipynblog && cd Documents\ipynblog && pelican content -s publishconf.py && ghp-import output -b master && git push origin master

Customising your blog¶

There are loads of great themes available for Pelican. We'll be walking through installing Flex by Alexandre Vicenzi, which just so happens to be the one I'm using on my blog. Pelican has a theme manager which you can use to install the blog, but we'll be taking a different approach and cloning the relevant GitHub repository.

• Create a home for your themes in the blogs directory: mkdir themes
• Navigate to themes directory: cd themes
• Clone the GitHub repository containing the theme: git clone https://github.com/alexandrevicenzi/Flex
• Open pelicanconf.py to start configuration:

Hopefully you'll want to put your individual twist on the theme, and there are plenty of options for customisation within Flex. But here's a few things to get started..

THEME = 'themes\Flex-custom'
SITETITLE = SITENAME
SITESUBTITLE = 'A Data Science Blog'
SITEDESCRIPTION = 'Welcome To My Blog'
COPYRIGHT_YEAR = 2019

MAIN_MENU = True

LINKS = (('Site', 'http://url.com'),)

SOCIAL = (('linkedin', 'http://www.linkedin.com/in/...'),
          ('instagram', 'http://www.instagram.com/...'),
          ('github', 'https://www.github.com/...'),)

MENUITEMS = (('Archives', '/archives.html'),)
             ('Categories', '/categories.html'),
             ('Tags', '/tags.html'),)

Use pelican content or the shortcut created earlier to take a look at your applied theme. Another easy way to customise your site is by updating the css (cascading style sheet):

• Navigate to the directory ..\themes\Flex\static\stylesheet
• Create a copy of variables.less and open it up
• Modify the hex colours of the various elements of the site
• Copy and paste the contents of this file along with style.less to this site, which will convert the less format in to css
• Copy and paste the css format code in to style.min.css and save (you might want to create a back-up of this file first)

The final step is to add your own picture, Flex will handle the formatting, so just put the image you want to use in C:\Users\Dave\Documents\ipynblog\themes\Flex\static\img and rename it to profile.png. Run Pelican using pelican content and view your blog.

While this guide isn't exhaustive, it hopefully got you through the process of setting up your blog, and will inspire you to explore some of the other options for customisation such as adding comments, adsense, analytics and translation. Happy blogging!