Skip to content

Setting up the Stanford Daily website on your Mac or Windows using Local by Flywheel

Jump to bottom
Yifei He 何一非 edited this page Jan 19, 2019 · 5 revisions

Now you can use Vagrant to set up the local server (which is way easier)!

Before you begin to contribute to the Stanford Daily website, you have to set up a local development environment so that you can test your code first before it is deployed on the actual Daily server. In another word, you will develop and debug using a cloned Stanford Daily website on your own computer. (Why do we need a local development environment?)

Local by Flywheel is a free local development environment for Mac and Windows designed to simplify the workflow of WordPress developers.

Setting up the environment

  1. Download Local by Flywheel from its website https://local.getflywheel.com.

  2. Install according to the instructions. (For Mac, just drag the app to ~/Applications/ folder)

  3. Launch the application. Initialize the app according to the instructions (just click Next should be okay).

  4. Click the button “Create a new site.” You should be now on a page like this:

  1. Enter the site name and the local site domain (i.e., the URL of your local Daily site; in my screenshot, it is http://tsd.local/), and choose where your site file will be stored. Then click "Continue."

  1. Here we will choose PHP version and web server software your local Daily site will use. Sticking to "Preferred" should be fine. Then click "Continue."

  2. Now set your local Daily site's username, password, and email. Since only your computer will have access to the website itself (hence "local"), you can just enter anything you like. Then click "Add site."

  3. Wait some time for the program to set up your website. Enter your computer password when prompted.

  4. Now you should be back to the Dashboard. You can try clicking the "View Site" button to visit the site. You'll notice that currently, the site is not using the theme and plugins the Daily uses. As such, we still have to clone the Daily site before we can start coding.

Cloning the Daily site

  1. Click the little arrow next to your folder path in Local by Flywheel to open the directory. Go in app/public to see your actual website files. Delete the two folders wp-content/themes and wp-content/plugins.

  1. Open https://github.com/TheStanfordDaily/stanforddaily-website and click the "Clone or download" button. Use a method you preferred (if you are new to git, I recommend using GitHub Desktop) to clone to the site to your computer.

  1. Open the cloned folder, copy the two folders wp-content/themes and wp-content/plugins from the cloned website to your local website folder (the one you opened in step 1).

  2. Login to your local Daily site. Go to "Appearance" - "Themes" and activate the theme "JNews - Child Theme" (NOT the "JNews" theme).

  1. Then go to "Plugins," select all plugins, change "Bulk Actions" to "Activate", and click "Apply" button.

  1. You will notice that there are lots of messages showing right now. You can safely ignore all of them.

  2. Now go to your local Daily site, and you should be able to see a somewhat similar website to the actual Daily website. Congratulations! You can now start working on your code and making the Stanford Daily website better than ever!

Visiting your local website from other devices

Sometimes you might want to see how the Daily website looks on your phones or tablets. To access your local website from other devices, click the "Enable" button next to "Live Link" at the bottom.

Now a link (like abcdefgh.ngrok.io) will be shown. You can now visit your local website from other devices using this link. Remember to disable "Live Link" after you have finished testing.

Adding actual articles and other data to make the development site more realistic

Currently, the local site only has one test article. To mock the actual site and test your design with different content, you have several options:

  • Using WordPress plugins like FakerPress to generate dummy content.

  • Exporting articles and other content from the actual Daily site and importing them into your local site using WordPress's built-in "Import" and "Export" tools (under the "Tools" section in admin page).

  • [ADVANCE] Importing the actual Daily database into your local database.

Final tips

  • For most, if not all, of the time, you only need to modify files inside the folder wp-content/themes/jnews-child/. You do not need to (and should not) modify any file inside the folder wp-content/themes/jnews/.

  • Before committing your changes, check carefully you are only committing the files you want to change.

  • Have fun! 😉

Making changes and uploading the changes

TODO...

Clone this wiki locally