Website Howto

  • Facebook is terrible for discoverability.
    • Facebook makes it hard to find what you need.
    • Facebook makes it hard to know who is interested vs who just wants to browse
  • A real website feels professional.

Accounts to Create

Netlify

Github

Software to Install

Install Github Desktop

Install Typora

Install Notepad ++

Install Git

Install Go

Install Python

This is optional it’s really just for Yamllint and you can do that at yamllint.com. I don’t think you really need it unless you are doing a LOT of Yaml.

Install NodeJS

Install Hugo

Install additional NPM Packages for Docsy Theme

  • npm install autoprefixer
  • npm install postcss-cli
  • npm install postcss

Install Netlify CLI

Discussion

Open Source

  • Freely distributed software with a permissive license

Markdown

  • https://commonmark.org/help
  • Why use markdown
    • Easy to read.
    • Good editors.
    • Converts to other formats.
      • Converting from Word using Typora.
      • Exporting to PDF with Typora.

Yaml

Hugo

Hugo Frontmatter

Docsy Hugo Theme

Running Hugo Locally

  • Why do this?

    • Test Changes before sending to the website
    • Run at the campsite

  • How do you do this

    • Run from the root of the website folder
    • hugo server -D
    • http://localhost:1313/

Git

  • Commits/Changes

  • Local and Remote

  • Github Desktop Application

  • Github Web User Interface

  • Command Line Interface

    • git add .;git commit -m 'updates'; git push

  • Branches - Make a version of the site for Staff/NPC’s or for testing.

  • Blame/Annotate - See who made a change and when.

  • Binary Files - Use large file storage. This is only for Text not for Binary Files.

  • Triggered “build”

    • Netlify doesn’t deploy if build fails!

Netlify

Lets make this website!

Before we get started

  • This is as easy as this process can be but this is NOT a novice process it’s technical and intiminating. If you decide this it too much for your needs thank you for your time I can either configure this for you or we can find a tool that works better for you like Squarespace or Wix.
  • We will be using the command line and you will need to take notes.
  • We will go as slow as the slowest person on the call.
  • If you have any questions ask and we will talk it through. No need to stay confused.
    • If you want to go over this again please let me know we can just go through any parts you have had problems with.

Configure Local Hugo Instance

image-20221225121301263

  • Point local docsy example to remote crestfallen repo
  • image-20221225204655204

Configure Netlify Integration

  • add github repository in netlify ui.
  • pick a subdomain.
  • redirects
    • I use one for Discord and the google feedback form.
    • public/_redirects
  • configure Netlify CLI
  • confirm that build and deploy worked good

Configure Site URL in Hugo Setup File

  • update configuration file
  • push
  • confirm that we are good. Watch it build

Configure Search in Hugo Setup File

Configure Github in Hugo Setup File

Configure Favicon

https://www.docsy.dev/docs/adding-content/iconsimages/

https://cthedot.de/icongen/#output

Configure Large Media Setup

Static resources

  • Static Resources Folder
    • PDF
      • Layout with Affinity Designer
    • Epub
      • Convert with Typora / Panadoc
    • Maps / Large images