Difference between revisions of "TMS:Website Development Log"

From Marspedia
Jump to: navigation, search
Line 38: Line 38:
 
'''Setup Theme Development'''
 
'''Setup Theme Development'''
  
* Download '''understrap''' from Github (I prefer cloning) into /wp-config/themes.
+
*Download '''understrap''' theme from [https://github.com/understrap/understrap Github] (I prefer cloning) into /wp-config/themes.  Understrap is a great starter Wordpress theme because it gives you the excellent '''[https://getbootstrap.com/ Bootstrap]''' UX library and '''[https://fontawesome.com/ Font Awesome]''' icon library.
* Download our custom '''tms2019''' theme from Github (it's derived from understrap-child and we try to keep it in sync).
+
*Download our custom '''tms2019''' theme from [https://github.com/marssociety/tms2019 Github] (it's derived from [https://github.com/understrap/understrap-child understrap-child] and we try to keep it in sync).
* Run "yarn install" from the understrap directory.
+
*Run "yarn install" from the understrap directory.
** Note #1: This may result in warnings about jquery and popper.js, if so:
+
**Note #1: This may result in warnings about jquery and popper.js, if so:
** Install jquery@3.3.1 and popper.js@1.14.7 using "yarn add"
+
**Install jquery@3.3.1 and popper.js@1.14.7 using "yarn add"
** Note #2: Understap is currently using gulp 3.9.1 which is slightly older than the current release (gulp v4).  this is to avoid some compatibility issues.
+
**Note #2: Understap is currently using gulp 3.9.1 which is slightly older than the current release (gulp v4).  this is to avoid some compatibility issues.
* Switch to the tms2019 directory and run "yarn install".
+
*Switch to the tms2019 directory and run "yarn install".
* Use "gulp watch" to begin development.  This will auto-compile any changes to the SASS files into the final CSS.
+
*Use "gulp watch" to begin development.  This will auto-compile any changes to the SASS files into the final CSS.
* All custom CSS styles are located in sass/_tms2019.sass and _tms2019_variables.sass.  Do not edit the *.css files as Gulp will compile those for you from the SASS files.
+
*All custom CSS styles are located in sass/_tms2019.sass and _tms2019_variables.sass.  Do not edit the *.css files as Gulp will compile those for you from the SASS files.

Revision as of 12:39, 31 March 2019

This is a development log for the main Mars Society website.

The most recent version of the website (v6) was designed by James Burk and Shawna Armstrong.

Local Workstation Setup

  • OS: I use Windows Subsystem for Linux on Windows 10. Set this up by downloading Ubuntu 18.04 from the Windows Store. One could also use MacOS or a native Linux installation for development, but the toolset would be slightly different in some cases.
  • Locally installed tools:
    • Windows:
      • Editor: Visual Studio Code
      • S/FTP client: Filezilla
      • DB browser: HeidiSQL
      • Source control: Git for Windows
    • Ubuntu (within WSL)
      • Server: Apache
      • Database: MariaDB (this can also be installed on the Windows side. MariaDB Is a drop-in open-source replacement for MySQL, which is now owned by Oracle)
      • Package manager: Yarn or NPM (I prefer Yarn due to speed, but you can use either; just not both! if you switch, delete the lock files -- yarn.lock and/or package-lock.json )
      • Node
      • Gulp
      • Git
      • WP-CLI

I create a C:\Sites folder with Windows Explorer and associate that within Ubuntu by using "ln -s" to make it ~/Sites.

I set up the local Apache to host a domain such as "marssociety.test" to point to localhost with that ~/Sites directory. This allows me to easily use a browser in Windows 10 to test the local instance of the site, running on Apache.

Set up Wordpress locally

  • Reference: https://hellojason.net/blog/how-to-setup-wordpress-locally-on-windows-subsystem-for-linux/
  • Install wp-cli to live at /usr/local/bin/wp
  • Install and configure Apache to use local Sites folder as above, creating a new .conf file and enabling it.
  • Edit Windows hosts file to use .test domain
  • Run the WP-CLI command "wp core download" in ~/Sites/v6
  • Update the wp-config.php use local database and hostname as "127.0.0.1" (loopback IP address).
  • Test the configuration by opening a browser and doing Wordpress Setup.
  • Ready to go!

Setup Theme Development

  • Download understrap theme from Github (I prefer cloning) into /wp-config/themes. Understrap is a great starter Wordpress theme because it gives you the excellent Bootstrap UX library and Font Awesome icon library.
  • Download our custom tms2019 theme from Github (it's derived from understrap-child and we try to keep it in sync).
  • Run "yarn install" from the understrap directory.
    • Note #1: This may result in warnings about jquery and popper.js, if so:
    • Install jquery@3.3.1 and popper.js@1.14.7 using "yarn add"
    • Note #2: Understap is currently using gulp 3.9.1 which is slightly older than the current release (gulp v4). this is to avoid some compatibility issues.
  • Switch to the tms2019 directory and run "yarn install".
  • Use "gulp watch" to begin development. This will auto-compile any changes to the SASS files into the final CSS.
  • All custom CSS styles are located in sass/_tms2019.sass and _tms2019_variables.sass. Do not edit the *.css files as Gulp will compile those for you from the SASS files.