Difference between revisions of "TMS:Website Development Log"
| Line 8: | Line 8: | ||
*Locally installed tools: | *Locally installed tools: | ||
**Windows: | **Windows: | ||
| − | ***Visual Studio Code | + | ***Editor: '''Visual Studio Code''' |
| − | ***Filezilla | + | ***S/FTP client: '''Filezilla''' |
| − | ***HeidiSQL | + | ***DB browser: '''HeidiSQL''' |
| − | ***Git for Windows | + | ***Source control: '''Git for Windows''' |
**Ubuntu (within WSL) | **Ubuntu (within WSL) | ||
| − | ***Apache | + | ***Server: '''Apache''' |
| − | ***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) | + | ***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) |
| − | ***NPM / Node | + | ***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 | ***Gulp | ||
***Git | ***Git | ||
| Line 24: | Line 25: | ||
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. | 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 ==== | + | ====Set up Wordpress locally==== |
| − | * Reference: https://hellojason.net/blog/how-to-setup-wordpress-locally-on-windows-subsystem-for-linux/ | + | *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 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. | + | *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 | + | *Edit Windows hosts file to use .test domain |
| − | * Run the WP-CLI command "wp core download" in ~/Sites/v6 | + | *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). | + | *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. | + | *Test the configuration by opening a browser and doing Wordpress Setup. |
| − | * Ready to go! | + | *Ready to go! |
| + | |||
| + | '''Setup Theme Development''' | ||
| + | |||
| + | * Download '''understrap''' from Github (I prefer cloning) into /wp-config/themes. | ||
| + | * 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. | ||
Revision as of 11:32, 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.
- 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
- Windows:
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 from Github (I prefer cloning) into /wp-config/themes.
- 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.
