1 of 30

THE

SIMPLE�WEB

2 of 30

WORKSHOP

PREPARATION

If you’re a OSX user, please make sure to have XCode installed before the workshop �⚠️ it might take hours to install and download it ⚠️

You can check if you have it already by pressing “CMD” + “Space” and typing XCode

If you have the software, open it up and check for the version, if it’s smaller than 10, please download a new version

To download/update it you can check this guide

Please choose a jekyll theme and download it before the workshop. Here are some resources, but it can be any jekyll theme:

3 of 30

EXPECTATIONS

Do you use the terminal in your day to day?
Have you ever coded something?

HTML, CSS, JS?

Have you ever set up a development environment?

Conda based?

Have you ever used git?

SSH?

4 of 30

EXPECTATIONS

Questions are welcome!

They have to be within the current topic

Feel free to skip ahead if you’re an advanced user

But keep in mind I’ll just be able to help you once everyone got there

Feel free to just chill
Opinions and ideas are also welcome!

5 of 30

WHO AM I

𝕡 𝕤 𝕪 𝕔 𝕙 𝕠 𝕟 𝕒 𝕦 𝕥 𝕘 𝕚 𝕣 𝕝

Software engineer @Anaconda
Subject of matter expert @NASA: ethos of open source
NumFOCUS DISC & Jupyter widgets committee
PyLadies Berlin and WoCCode

6 of 30

Building an environment

Git basics

Markdown

Jekyll

7 of 30

BUILDING�AN ENVIRONMENT

01

8 of 30

OS-agnostic package manager

9 of 30

Get miniconda (choose a version based in your OS)
(Unix) Open your terminal

(Win) Click the exe file and follow the GUI instructions
Close and open your terminal again

10 of 30

11 of 30

12 of 30

GIT BASICS

02

13 of 30

Create a github account
Generate an auth token for ssh (advanced) or go for the https option

14 of 30

Create a github repository called “username.github.io”

15 of 30

Clone your repository and set up a link to it:

��

Copy the desired template to the “username.github.io” directory

16 of 30

17 of 30

MARKDOWN

03

18 of 30

Markdown markup language is a plain-text formatting language.

19 of 30

20 of 30

For Markdown documentation

21 of 30

04

JEKYLL

22 of 30

Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website.

23 of 30

Jekyll it’s written in the Ruby programming language. And Ruby has a package manager called gem. That’s what we used to install Jekyll.

24 of 30

25 of 30

26 of 30

27 of 30

Encountering problems with Jekyll?�Head over to this blog post that I wrote!

:-((

28 of 30

For custom domain documentation

\

29 of 30

EDIT IT

GIT IT

TEST IT

FLOW

Make your changes. HTML, CSS, JS, Markdown, images, directory structure …

Go back to the git slide and use the git add, commit and push commands

Check if everything is working keeping an eye on the logs generated by the jekyll server

30 of 30

THANKS!

mariana@psychonautgirl.space

CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik