Skip to content

Tips for Building a Website

Jump to bottom
Meghan Smedes edited this page Jul 25, 2024 · 3 revisions

Tips for Website:

  1. Begin a document write-up of your website - at the same time you are creating the presentation slides.

    • You can assign 1 or 2 people or the same people who are doing a specific part of the research slides can do it. It may save time to have each person write up a section of the project. Then one person can be the “editor” to make sure it flows.
    • Consider who your audience will be: citizens of the area, students, scientists, etc.
    • Include headings and sub-headings in the write-up as a website would have. Titles should capture the main point/so what? of that section.
    • Write out what would be narrated in the presentation, but you can include more detail.
    • Include a sample of code in the website, with a link to the code if you want it to be reproducible. Google collab can be saved as Github code and vice versa (see number 6 for instructions)

  2. Create your webpage space with a url in github.com/cu-esill-edu

  • In settings > pages select the main branch

  1. Pick a theme:

    • Make sure it is a GitHub supported theme. (You do not need to download Jekyll or Ruby so don’t go down that rabbit hole. The point of GitHub is that it has those supports already built in.) GitHub supported themes don’t have to be from GitHub. Here are some sites for theme searching:

    • Find a real-world example of the theme being used with GitHub, not just on the demo page. This is crucial as you can use code examples to help you build the page. Google is a useful tool for this: “Website with ___ theme.”If there is not an example available, move on to a different theme. One theme, just-the-docs that has already been used by the ESIIL Stars team is: ESIIL Stars Syllabus and Syllubus GitHub Page. A link to that theme is here: just-the-docs theme.

    • If you want to make sure your page can be tailored the way you want it, you can check the config.yml. The config.yml is listed in the repository of the theme, along with readme and index, etc.

      • For example, if you want to be able to create and name navigation tabs, look for something like this in the config.yml folder: (To find this, click on the theme sample, then click on the GitHub link in the sample, and that should lead you to the GitHub folders page. Then click config.yml.)

        navigation:

              - title: Home


        url: /index.html


      - title: About


        url: /about


      - title: Contact


        url: /contact

        However, navigation tabs can also be built as individual

        pages. For this, you will want to look for a page heading that includes “nav” at the top of the page like this:

           layout: default


   title: Meet Our Team


   nav_order: 2

      The config.yml demo will have the word nav in it, something like this:

        nav_enabled: true

      • If you want to change the header photo, look in the config.yml for something like:

          #blog logo


  logo: "/assets/images/df_logo.jpg"


  float_logo: true # true, false (default)

        or:

          #blog cover


  cover: "/assets/images/cA4aKEIPQrerBnp1yGHv_IMG_9534-3-2.jpg"

      • If a site doesn’t have the functionality that you want, don’t pick it. You likely don’t have time to build it in.

    • After you pick a theme, in your webpage repository on GitHub, add the theme name to the config.yml.

      • If it is a GitHub theme, use the format

        theme: username/name of theme

      • If it is a Jekyll, jupyter, or other theme, use

        remote_theme: username/name of theme

        For example, your config.yml file might start with something like:

        Title: Project

        description: Water Quantityremote_theme: just-the-docs/just-the-docs

  2. Convert the write-up to code. There is an easy way:

    • Within Google Docs:
      • Extensions > Add-ons > Get add-ons
      • Choose Docs to Markdown
      • Now you can convert your document by highlighting the text you want to convert and then by going to Extension > Docs to markdown > convert
      • Images will need to be be converted individually: see below.
    • Within Microsoft Word
      • File > Get Add-ins and search for Markdown. Markdown or Easy Syntax Highlighter are some examples that might work similarly to Docs to Markdown.

  3. Adding images

    • On GitHub, create a folder to store images and name it img. Example: cu-esiil-edu /MSUDenver-DineWaterQuality2023/img
    • Within this folder, create a folder titled .keep. This will allow the img folder to save. Commit changes.
  • To add an image, first, save it on your computer. Then, in GitHub, go to Add file > upload file and add image that is saved on your computer. Commit changes.
  • Go back into the image, right click on the image, and select copy image link.
  • Paste image on webpage using Markdown. Example: ![Image title](image link "image blurb")
    • For resizing images, you’ll need to use html format. < img src = “image link” alt = “blurb about image” width = “# or % “ height = “# or % “
  1. Adding a link to the code
    • First, you need to save the code into the project repository.
      • If you need to convert the code from Collab to Github, in Google Collab, go to file >save a copy in GitHub>select location of the repository
    • Next, in the repository, click into the codespace you just saved. Click on the 3 dots on the upper right > copy permalink.
    • On your project page, paste the permalink into Markdown code like this: ![Title](code link “blurb about code”), or you can use html format. * If you want to link to the code with an image, use this Markdown format: [![Title of Image](image link “blurb about image”)](code permalink)

Congrats! Now you can build your webpage!

Clone this wiki locally