TMS:Website Development Log - Revision history

Jburk at 19:57, 31 March 2019

2019-03-31T19:57:43Z

← Older revision		Revision as of 20:57, 31 March 2019
Line 47:		Line 47:
	*Switch to the tms2019 directory and run "yarn install".		*Switch to the tms2019 directory and run "yarn install".
	*Update browserSyncOptions in gulpconfig.json to reflect your local machine.		*Update browserSyncOptions in gulpconfig.json to reflect your local machine.
	*Use "gulp watch-bs" to begin development. ~~This will auto-compile any changes to the SASS files into the final CSS.~~		*Use "gulp watch-bs" to begin development.
	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.
			'''''Benefits of this workflow:'''''

			All custom CSS styles are located in sass/_tms2019.sass and _tms2019_variables.sass. Do not edit the *.css files directly, since Gulp will compile those for you from the SASS files.

			Using "gulp watch-bs" (with Browsersync) or "gulp watch" (without Browsersync) will auto-compile any changes to the SASS files into the final CSS.

			Gulp and Browsersync will automatically compile and update the browser as you do development, greatly speeding up the overall workflow and eliminating manual deployments & refreshes (I found these took the majority of overall time with my previous development workflow)

	===Deployment Methodology===		===Deployment Methodology===

Jburk at 19:52, 31 March 2019

2019-03-31T19:52:53Z

← Older revision		Revision as of 20:52, 31 March 2019
Line 11:		Line 11:
	***S/FTP client: '''Filezilla'''		***S/FTP client: '''Filezilla'''
	***DB browser: '''HeidiSQL'''		***DB browser: '''HeidiSQL'''
	***Source control: '''Git for Windows'''		***Source control & Deployments: '''Git for Windows'''
	**Ubuntu (within WSL)		**Ubuntu (within WSL)
	***Server: '''Apache'''		***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)		***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 )		***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		***JS Runtime: '''Node'''
	***Gulp		***CSS Compilation: '''Gulp'''
	***Git		***Testing tool: '''Browsersync'''
	***WP-CLI		***Source Control & Deployments: '''Git'''
			***Wordpress maintenance tool: '''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 create a C:\Sites folder with Windows Explorer and associate that within Ubuntu by using "ln -s" to make it ~/Sites.
Line 45:		Line 46:
	**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.		*Update browserSyncOptions in gulpconfig.json to reflect your local machine.
			*Use "gulp watch-bs" 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.

	=== Deployment Methodology ===		===Deployment Methodology===
	I plan to develop the site locally using the above setup, and to test it extensively.		I plan to develop the site locally using the above setup, and to test it extensively.

Jburk: /* Deployment Methodology */

2019-03-31T19:45:27Z

Deployment Methodology

← Older revision		Revision as of 20:45, 31 March 2019
Line 53:		Line 53:
	Then I plan to push all changes to github, and use github to deploy to the webhost.		Then I plan to push all changes to github, and use github to deploy to the webhost.

	Reference: ~~<nowiki>~~https://jasonyingling.me/efficient-wordpress-development-workflow/~~</nowiki>~~		Reference: [https://jasonyingling.me/efficient-wordpress-development-workflow/ Efficient Wordpress Development Workflow by Jason Yingling]

Jburk at 19:44, 31 March 2019

2019-03-31T19:44:53Z

← Older revision		Revision as of 20:44, 31 March 2019
Line 47:		Line 47:
	*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.

			=== Deployment Methodology ===
			I plan to develop the site locally using the above setup, and to test it extensively.

			Then I plan to push all changes to github, and use github to deploy to the webhost.

			Reference: <nowiki>https://jasonyingling.me/efficient-wordpress-development-workflow/</nowiki>

Jburk at 19:39, 31 March 2019

2019-03-31T19:39:20Z

← Older revision		Revision as of 20:39, 31 March 2019
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.

Jburk: /* Local Workstation Setup */

2019-03-31T19:35:49Z

Local Workstation Setup

← Older revision		Revision as of 20:35, 31 March 2019
Line 5:		Line 5:
	===Local Workstation Setup===		===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.		*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:		*Locally installed tools:
	**Windows:		**Windows:

Jburk at 19:32, 31 March 2019

2019-03-31T19:32:16Z

← Older revision		Revision as of 20:32, 31 March 2019
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.

Jburk at 18:07, 31 March 2019

2019-03-31T18:07:43Z

← Older revision		Revision as of 19:07, 31 March 2019
Line 3:		Line 3:
	The most recent version of the website (v6) was designed by James Burk and Shawna Armstrong.		The most recent version of the website (v6) was designed by James Burk and Shawna Armstrong.

	=== Local Workstation Setup ===		===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.		*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:		*Locally installed tools:
	** Windows:		**Windows:
	*** Visual Studio Code		***Visual Studio Code
	*** Filezilla		***Filezilla
	*** HeidiSQL		***HeidiSQL
	*** Git for Windows		***Git for Windows
	** Ubuntu (within WSL)		**Ubuntu (within WSL)
	*** Apache		***Apache
	*** NPM / Node		***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)
	*** Gulp		***NPM / Node
	*** Git		***Gulp
	*** WP-CLI		***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 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.		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!

Jburk at 17:41, 31 March 2019

2019-03-31T17:41:51Z

← Older revision		Revision as of 18:41, 31 March 2019
Line 2:		Line 2:

	The most recent version of the website (v6) was designed by James Burk and Shawna Armstrong.		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:
			*** Visual Studio Code
			*** Filezilla
			*** HeidiSQL
			*** Git for Windows
			** Ubuntu (within WSL)
			*** Apache
			*** NPM / 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.

Jburk: Initial Page

2019-03-30T04:10:45Z

Initial Page

New page

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.