Tag Archives: github

Creating and Deploying your Julia Package Documentation

By: DSB

Re-posted from: https://medium.com/coffee-in-a-klein-bottle/creating-and-deploying-your-julia-package-documentation-1d09ddc90474?source=rss-8bd6ec95ab58------2

A tutorial on how to create and deploy your Julia Package documentation using Documenter.jl and GitHub Actions.

If you are developing a new package for Julia, you might’ve followed the steps in this article, and is now wondering how to create the documentation for your package. Well, this is what this article is for. Here, our new package is also called VegaGraphs.jl, which is a package that I’m developing at the moment.

In this tutorial I’ll be using the package Documenter.jl together with the GitHub Actions plugin. The Documenter.jl package will help us create the documentation, and the GitHub Actions plugin will create a bot for us that will publish our documentation on our GitHub page.

1. Creating Docstring

First of all, when you write the functions in your package, above each function you should write a Docstring explaining the arguments used in the function, what the function does, etc.

# Example of function inside ./src/VegaGraphs.jl
"""
MyFunction(x,y)
This is an example of Docstring. This function receives two 
numbers x and y and returns the sum of the squares.
```math
x^2 + y^2
```
"""
function MyFunction(x,y)
return x^2+y^2
end

Note that you should use triple quotes, and place the text right above the function you are documenting. Also, you may use LaTeX to write math equations, as shown in the lines:

```math
x^2 + y^2
```

When you generate your documentation, this equation will be properly rendered, and you will have a beautiful mathematical equation.

2. Setting up Documenter.jl

Next we must set up the Documenter.jl. To do this, first create a folder named docs and inside of it create a file named make.jland another folder named ./src . Your package folder should look something like this:

VegaGraphs/
├── docs/
│ └── make.jl
│ └── src/
├── src/
│ └── VegaGraphs.jl
...

Inside the make.jl file we will write the code that Documenter.jl will use to create a nice webpage for our documentation. Inside make.jl write the following (changing the name of the package from VegaGraph to yours):

# Inside make.jl
push!(LOAD_PATH,"../src/")
using VegaGraphs
using Documenter
makedocs(
sitename = "VegaGraphs.jl",
modules = [VegaGraphs],
pages=[
"Home" => "index.md"
])
deploydocs(;
repo="github.com/USERNAME/VegaGraphs.jl",
)

Most of the code here is self-explanatory. You are defining the name the website for the documentation, the module which you will be documenting, and the pages your website will have. For now, our documentation will only have “Home”, and the information that will be on this page will be inside the index.m file.

Inside the ./docs/src you need to create the file named index.md. This is a markdown file where you will write how the “Home” page should look like. Here is an example:

# VegaGraphs.jl
*The best summation package.*
## Package Features
- Sum the squares of two numbers
## Function Documentation
```@docs
MyFunction
```

Everything here should be familiar to you if you know markdown. The only thing that looks different are the last 4 lines. Here is where our Docstring comes in. The Documenter.jl package will take the Docstring from the function MyFunction and place where we wrote:

```@docs
MyFunction
```

As your create new functions, just add more of this to your index.md , and you will rapidly create your package’s documentation.

The final step in regards to Documenter.jl is to build the whole thing:

# from your terminal,inside the ./docs/src
# Remember to install Documenter.jl before running this
julia make.jl

After running this command, a new folder called build will be created inside the docs , and this folder will contain all the html files for your documentation. You may now open this folder

3. Deploying your Documentation with GitHub Actions

Your website containing the documentation for the package is already created, and you may host the webpages using any method you want. In this section, I’ll then explain how to use GitHub Actions to automatically publish the documentation using GitHub pages.

Assuming you followed this article here on how to develop your package, you already have GitHub Actions working on the background. What you must do now is create a file named Documentation.yml inside the .github/workflows folder. Inside this file, you should have something like this:

name: Documentation
on:
push:
branches:
- master
tags: '*'
pull_request:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: julia-actions/setup-julia@latest
with:
version: '1.5'
- name: Install dependencies
run: julia --project=docs/ -e 'using Pkg; Pkg.develop(PackageSpec(path=pwd())); Pkg.instantiate()'
- name: Build and deploy
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # For authentication with GitHub Actions token
run: julia --project=docs/ docs/make.jl

You can pretty much copy and past the code above, and the next time you push new commits to your repository, the bot will run and generate the documentation. Also, note that it will create a branch named “gh-pages”. This is the branch containing the webpages for the documentation.

To use GitHub pages for hosting our documentation, we must enable GitHub pages on the repository containing the package. To do this, just go to the repository GitHub’s page, click on setttings , scroll down to the “GitHub Pages” section and enable it.

Example showing how to enable the hosting of your documentation

After doing all this, your documentation will be available at “https://username.github.io/VegaGraphs.jl/dev.

And you now has a beautiful website for your documentation.

Example of documentation page generated with Documenter.jl


Creating and Deploying your Julia Package Documentation was originally published in Coffee in a Klein Bottle on Medium, where people are continuing the conversation by highlighting and responding to this story.

Creating a Mathematics Blog with Jekyll

By: DSB

Re-posted from: https://medium.com/coffee-in-a-klein-bottle/creating-a-mathematics-blog-with-jekyll-78cdee0339f3?source=rss-8bd6ec95ab58------2

A Tutorial on how to setup a blog using GitHub, Jekyll and MathJax

There are several ways to create your personal blog on the web, but not as many alternatives when you want to focus on technical subjects and want to write mathematical equations. In this brief article, I explain how you can use GitHub with Jekyll to create your personal blog with MathJax, so you can write beautiful equations using Latex notation. Note that this tutorial is written for Ubuntu, but can easily be adapted for a different OS.

What is Jekyll and MathJax

In this tutorial, I will assume that you now what GitHub is, and that you can use it to host your personal website using GitHub Page. If you don’t, then take a look at this Tutorial. With that being said, let’s explain what Jekyll and MathJax are…

Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.

— Jekyll Official Website

In other words, Jekyll can be thought as an application written in Ruby, that easily creates a web site that is easily manageable and allows one to write using markup language, which is quite handy. Also, Jekyll is supported by Github and has some pre-built styles, so your blog is beautiful looking right out of the box.

MathJax is a JavaScript display engine for mathematics that works in all browsers.

— MathJax Official Website

In other words, MathJax is a service that renders the mathematical equation, so it looks neat in your browser. You can then write in your blog

$$ x = y ^2 $$

And in your browser, MathJax will render it as

Mathematical equation rendered on the browser with MathJax. Note that Medium doesn’t use MathJax, so I actually just copy and pasted an image of how the rendered text would look like.

The idea is to create a GitHub page, then to use Jekyll to style your blog and allow the use of markdown, together with MathJax to properly render the equations.

Setting up your Blog with Jekyll

There are several ways to set up Jekyll with your GitHub page. One can install themes using Ruby Gems, or use one of the themes provided by GitHub. But to enable MathJax, one has to manually tweak the html code for the theme. So instead, we will fork an specific theme, and modify it.

First, we need to install Jekyll and Bundle (which helps manage Ruby Gems). If you are using Ubuntu 20.04, you might already have Ruby installed. Otherwise, you might need to install it. The command below will install Ruby, and then install Jekyll and Bundle.

sudo apt install ruby-dev
gem install jekyll
gem install bundler

With these few lines of code, you can already set up your blog with Jekyll, just run the following

jekyll new my-website

This will create a folder “my-website” with all website code inside it. If you go inside the directory and run one command, you can start a local server with your blog running.

cd ./my-website
bundle exec jekyll serve

Now go into your browser and go to “localhost:4000” and you can see your blog.

Example of Website running using Jekyll

Your blog is already functional! You can just copy all the files inside the “./my-website” folder, and move them to your git repository, and then push them to GitHub. After a few seconds, your blog will be up on the web. Below I show an example:

mv ./my-website/* ./coffee-in-a-klein-bottle.github.io
cd ./coffee-in-a-klein-bottle.github.io
git add -A
git commit -m “Initiated my Jekyll blog”
git push -u origin master

Quick guide to using Jekyll

Now, I’ve explained how to set up Jekyll, but not exactly how to use it. There is a ton of tutorials out there, but, actually, you don’t need to know much to start using Jekyll effectively. Once your blog is created, to personalize it and start writing posts is straightforward. If you go inside the folder containing your new blog, this is what it might look like:

Screenshot of Terminal showing inside the “my-website” folder created by using Jekyll

The “.markdown” files are just, as the name says, markdown files containing information regarding each specific webpage. You can, for example, open the “about.markdown” file, and start modifying it with your personal information. After that, just run

bundle exec jekyll serve

from inside the “my-website” folder, and Jekyll will update your website files, which are inside the “_site/” folder. Note that you don’t do anything with the “_site/” folder, the files in there are taken care of by Jekyll under the hood.

Screenshot of “_config.yml” file

The “_config.yml” file will contain configuration properties used by Jekyll, such as the theme being used, the plugins that are necessary to be installed, the title of your website, and so on. We will be using a preset theme, so you won’t need to worry much about this file for now.

The “Gemfile” and “Gemfile.lock” contain information for Ruby, such as the version of Jekyll and so on. You don’t need to worry about them.

Finally, the “_posts/” folder is where you will store your posts files. This posts are markdown, so there is not much here to be said. Just follow the same structure as the example post provided, and you will be fine.

Updating the them to enable MathJax

Unfortunately, most Jekyll themes don’t come with MathJax enabled right out of the box, so we have to do this manually, and this require that we modify the files of the theme. When hosting your blog on GitHub, some themes are natively supported (such as the minima theme), but the theme files cannot be modified this way. So we will need to bring all the theme files to the repository and modify them there.

First, let’s go to the “minima” theme GitHub repository, and then download the repository to your computer. Delete all the files in your GitHub repository containing the website, and then copy all the files from the “minima” folder to your repository. Then, run the Jekyll command to see if your site is still working. Below are the commands showing an example of how to do this:

cd ~/
git clone https://github.com/jekyll/minima.git
cd ./coffee-in-a-klein-bottle.github.io
rm ./*
mv ~/minima/* ./
bundle exec jekyll serve

Go to the “localhost:4000” and see if your site is working properly. If it is, then stop the server, and let’s modify the theme to enable MathJax.

Open the “_layout/default.html” file and add the CDN for MathJax. In other words, open “_layout/default.html” and paste this two lines in the end of the file:

<script src=”https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id=”MathJax-script” async src=”https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

The image below shows what your file should look like

Screenshot of the “default.html” file

Writing Mathematical Equations

You are done! The only thing left to do is to actually start writing your blog posts. So let’s do an example. Open one of the posts files and write

$$ x = y^2 $$

Then, run the Jekyll to visualize your website on the localhost.

This is an example of how your post should look:

Example of using MathJax with Jekyll

Finally, just push all the file to your repository, and your personal mathematics blog will be on the web open and running.


Creating a Mathematics Blog with Jekyll was originally published in Coffee in a Klein Bottle on Medium, where people are continuing the conversation by highlighting and responding to this story.