• Overview
• Requirements
• How to Download and Setup the Site
• How to Build the Site (Local)
• How to Edit Pages (Remote / Local)
• How Sync Site with the Team Wiki (Remote)
• How to Sync Site with the Team Wiki (Local)
• Helpful
  • HTML Converter
• iGEM Wiki General Information
  • Deliverables / Requirements
  • Sitemap
  • Default Wiki CSS
  • Making Manual Changes

The website for Miami University's Team Website for the iGEM 2021 Competition.

Important note: There are a lot of strange and sloppily looking design decisions that were made (For instance, a CSS file to undo CSS). These decisions were made to take into account how iGEM's MediaWiki server handles file uploads.

• Git bash
• Python (version >= 3.0.0)
• Pip
• An iGEM account
• An IDE of your choice (VSCode recommended)

1. Download the site.

$ git clone [email protected]:Kyle-L/iGEM-2021-Website.git

2. Install Pipenv using pip, install pip if you haven't already.

$ pip install pipenv

3. Setup a virtual environment with Pipenv.

$ python -m venv env

4. (on Windows) Start the virtual environment

$ ./env/Scripts/activate

4. (on Unix / Linux / MAC OS) Start the virtual environment

$ source env/bin/activate

5. Install the requirements

$ pip install -r requirements.txt

Now you are ready to start editing the site!

To cut down on down on code and make the site more maintainable, the Python package iGEM Site Builder has been setup to use as a utility package to aid in the process of building a site for the iGEM competition. What does this mean? In the directory iGEM-2021-Website/src, a template layout for all the pages is definined in iGEM-2021-Website/src/.template.html. When built, the body of each page which is defined in iGEM-2021-Website/src/pages is inserted into this template. So, how do we build the site?

1. Navigate to the root directory

$ cd iGEM-2021-Website/

2. (Optional) Call the template command. This will take the body of each page in iGEM-2021-Website/src/pages and insert it into the template at iGEM-2021-Website/src/.template.html

$ python igem_site_builder template-site 'temp\\build' 'src'

3. (Optional) Call the post-process command. Post processing applies some nice quality of life changes to the templated site. To see more on what those specific changes are, checkout section on post-process in documentation for iGEM Site Builder.

$ python igem_site_builder post-process 'temp\\build' 'src'

4. Alternatively to 2 & 3, you can call build which will combine both into one nice command.

$ python igem_site_builder build 'temp\\build' 'src'

You can now view the full website under iGEM-2021-Website/temp/build.

To edit pages on the wiki, navigate to iGEM-2021-Website/src/pages. These are the html files which will be present when the site is built. For instance, if you create an html file called test.html and insert the following.

<p>This is some placeholder text!</p>

When the site is built, that placeholder text will be placed into the layout defined in .template.html.

This repository is setup to make use of GitHub Actions and iGEM Site Builder to sync the site on a push to the master and dev branch. On any push to the master or dev branch, GitHub Actions will run the workflow in .github/workflows/main.yaml and sync the repository with the iGEM MediaWiki server.

Specifically, the entire CI/CD pipeline looks like the following:

If you need to sync the site with you local wiki, you can use the following instructions. Note: This repository is setup to make use of GitHub Actions to sync the site on a push to the master branch. Thus, these instructions should only be used if needed.

1. Check into the cloned repository's root.

$ cd iGEM-2021-Website/

2. Create the file .env at the root of /iGEM-2021-Website with following information. Replace Your_username and Your_password with your iGEM info.

IGEM_USERNAME=Your_username
IGEM_PASSWORD=Your_password

3. Run python igem_site_builder sync-site. Note: please ensure that you have properly built the site.

$ python igem_site_builder sync 'temp\\build' 'temp\\sync' 'MiamiU_OH'

The utility python site-builder convert-file has been supplied to help convert files for web use by converting a .docx, .doc, or .md file to .html.

That can be run with the following command:

$ python site-builder convert-file <some .docx, .doc or .md path> <some .html path>

Please be conscientious of the requirements for the wiki and the expected deliverables. Failure to take this into account might result in potential disqualification. Carefully read through https://2021.igem.org/Competition/Deliverables/Wiki to ensure that the wiki meeting all requirements.

The iGEM wiki already has a fair amount of CSS applied to each of the pages. If you would like to remove that CSS, add the following CSS to a page between the style tags.

<style> 
    #sideMenu,
    #top_title,
    .patrollink,
    #firstHeading,
    #home_logo,
    #sideMenu {
        display: none;
    }
    #content {
        padding: 0px;
        width: 100%;
        margin-top: -7px;
        margin-left: 0px;
        border: none;
    }
    body,
    html {
        background-color: white;
        width: 100%;
        height: 100%;
    }
    #bodyContent h1,
    #bodyContent h2,
    #bodyContent h3,
    #bodyContent h4,
    #bodyContent h5 {
        margin-bottom: 0px;
    }
    #bodyContent a[href ^="https://"], .link-https {
        padding-right: 0px;
    }
</style>

For more information of the iGEM default CSS, checkout https://2021.igem.org/Resources/Template_Documentation.

If you need to make changes to the iGEM wiki manually, you can go in and modify individual pages/templates using the MediaWiki UI. For more information on this checkout https://2021.igem.org/Resources/Wiki_Editing_Help.