Instructions for updating the website

Last Updated 2019-08-26 Adam Lu

---

• First, navigate to the Website or Website_BAW directory

  • On fishfish:

    • Connect to the server via these instructions.

    • Open a terminal on the server via these instructions.

    • Set up s3cmd via these instructions.

    • Navigate to the home directory for the website

      # For the lab website
      cd /media/shareX/Website
                
      # For the Brain Awareness Week website
      cd /media/shareX/Website_BAW
      

  • On a local Windows computer:

    • Install MobaXTerm

    • Install Hugo by downloading the appropriate binary file from this page and place it on the Desktop

    • Open a local terminal with MobaXTerm via these instructions. In the local terminal, apply this command to move the binary to a place (such as /bin) where hugo.exe will be called from everywhere:

      mv ~/Desktop/hugo.exe /bin
      

    • Install Git, then open Git Bash and navigate to either ~/Desktop or ~/MyDocuments (you can access these folders more easily with MobaXTerm)

    • Type these commands within Git Bash:

      # Clone the Website or Website_BAW repository
      git clone http://github.com/blabuva/Website.git
      git clone http://github.com/blabuva/Website_BAW.git
              
      # (Optional but useful) Clone the Settings_Website repository
      git clone http://github.com/blabuva/Settings_Website.git
              
      # Change to the Website directory
      cd Website
              
      # Initialize and update the submodules (the themes)
      git submodule update --init --recursive
      

    • Navigate to the created Website directory in both MobaXTerm and Git Bash:

      # This is for instance
      cd ~/Desktop/Website
      

• Before you make any changes, update the directory from GitHub (use Git Bash if you are on a Windows computer):

  # Apply these commands in sequence
  git pull origin master
    
  # If you are on fishfish, you can use this alias
  git_update
  

• Next, draft the website on the local server

  • Build the website locally with one of these commands (use MobaXTerm if you are on a Windows computer):

      # Build the website on http://localhost:xxxxx/, no drafts included
      #	Note: the default path is localhost:1313, but if it's in use, another path will be assigned
      hugo server
    
      # Build the website on http://localhost:xxxxx/, drafts included
      hugo -D server
    
      # Or use this alias for hugo -D server
      # 	Note: this is stored in your ~/.bash_aliases file
      draftwebsite
    

  • Open a browser and view/inspect your changes at the address http://localhost:1313. If this address is already occupied, read the output of hugo server for the correct address (replace 1313 with the random number that it generates).

  • Once you are satisfied with the draft website, remove draft flags by changing the draft parameter in the front matter to false:

      draft: false
    

• Update the public website.

  • If you are on fishfish, just type one of the following command aliases that Adam made for all accounts:

      # These are aliases stored in your ~/.bash_aliases file
      updatewebsite     # for beenhakkerlab.org
      updatebrainhow    # for brain.how
    

    The alias is for the following sequences of commands, respectively:

      # updatewebsite (only use this command in /media/shareX/Website)
      git pull origin master
      rm -rf public
      hugo
      s3cmd sync --delete-removed public/ s3://www.beenhakkerlab.org/
      git_update
    
      # updatebrainhow (only use this command in /media/shareX/Website_BAW)
      git pull origin master
      rm -rf public
      hugo
      s3cmd sync --delete-removed public/ s3://brain.how/
      git_update
    

  • Alternatively, if you are not on fishfish, do ALL of the following:

    1. Build the website (generate the public/ directory)

        # Build site in verbose mode
        hugo -v
       

    2. Remove the public/ directory and all of its contents:

        # Remove recursively (-r) with force (-f)
        rm -rf public
       

    3. Sync the public/ directory to the lab AWS S3 bucket the way you want it (awsBucket is either s3://www.beenhakkerlab.org/ or s3://brain.how/):

        # Simulate syncing to bucket to see what files will be updated
        s3cmd sync --dry-run --delete-removed public/ awsBucket
       
        # Sync to bucket
        s3cmd sync --delete-removed public/ awsBucket
       
        # Sync to bucket without checking all files
        s3cmd sync --skip-existing --delete-removed public/ awsBucket
       

    4. Update Github:

        # Apply these commands in sequence
        git pull origin master
        git add -A
        git commit -a
        git push origin master
       
        # If you are on fishfish, you can use this alias
        git_update
       

• Importantly, if a new or updated css file is uploaded, one needs to change the detected MIME type in the AWS console

  • Open a browser and go to https://s3.console.aws.amazon.com/s3/buckets/www.beenhakkerlab.org or https://s3.console.aws.amazon.com/s3/buckets/brain.how
  • Navigate to the css file that was newly uploaded/updated (usually under the css/ folder)
  • Select the file with the checkbox, then click on More -> Change Metadata
  • In the field Value for Key: Content-Type, type text/css

• Finally, enjoy the published website

  • Open a browser at http://www.beenhakkerlab.org.s3-website.us-east-2.amazonaws.com/ or http://brain.how.s3-website.us-east-2.amazonaws.com/
  • If one needs to refresh, hold the CTRL button down when clicking the refresh button so that cached pages will be deleted.