Your very own site on GitHub Pages

talks
Published

February 25, 2025

For the Layer8 Cybersecurity club here at Cal State Northridge, and potentially more clubs, I will do a presentation on how I set up my site with Github pages, and how to set up your own site the same way.

This guide uses Github Actions to autodeploy, so all users need to do is commit from the web interface of Github, their site will automatically render changes.

Below is the same presentation, rendered to html with the slide titles as headers.

If you want to see the presentation in slides form, click the “RevealJS” format on the right, under “Other formats”.

Here is a qr code to the slides:


About me and my site

Benefits of a site

  • Portfolio and resume
  • Notes on longer projects
  • Social Media — A few friends follow my blog

Setup

  • Go to github.com and create an account
    • Your site will be located at “username.github.io”
  • Go to github.com/moonpiedumplings/blog-template and select “use template”
    • The repo name should be “username.github.io”
    • make sure to select “include all branches”
    • in the github settings, make sure “gh-pages” is selected as the deploy

Directory Structure

The files and folders are laid out simply.

.
|-- _quarto.yml # Configuration for quarto
|-- blog
|   |-- index.md # Directory listing
|   |-- markdown
|   |   `-- index.md
|   `-- quarto
|       `-- index.md
|-- index.md

Directory Structure (cont.)

  • The “index.md” within of each folder is what gets rendered into a an html file, a browser page
  • The “index.md” in “blog” is a special format called a “listing”, rather than a normal article, it generates the list of articles, the filtering, etc on the “blog” page

Markdown

  • Markdown is markup language
  • Enables users to render formatted documents from plaintext
  • Most static site generators use markdown

Markdown Code Snippets


`this is code snippets`


They result in unformated, monospace text:


this is code snippets

Markdown Basics

*italics* = italics

**bold** = bold

[linktext](example.com) = linktext

More Markdwon Basics


# top level header

top level header


## lower level header

lower level header

Useful HTML in Markdown

<br> = line break


<details><summary>summary text</summary>

collapsable content

</details>


summary text collapsable content

Quarto

  • Static site generator
  • Converts markdown into html, the language powering websites.
  • Feature Rich by Default
    • Full text search
    • Light and dark theme

Quarto

  • Outputs: website page, pdf, or presentation (html)
  • Designed for Data Science, so has integration with Jupyter Notebooks
  • Does not have any form of templating engine

Template Engine

Not included in Quarto

{% for i in list %}
  i.attribute
  {% if something %}renderif{% endif %}
{% endfor %}

Questions? Comments? Anything you want to do?

Thank You!

I hope you use this to host your own blog/site, like I do.