Publishing your changes

If you want someone other than yourself to be able to see your hard work, you'll need to host it somewhere. Obvious caveat: once something is out on the Internet, anyone with the link will be able to see it. Sometimes just having an obscure url is enough to keep something out of the public eye, but links have a way of leaking.

As of now, this is an internal site so we don't have to worry about hosting. We have an internal VM which hosts the official site at http://prospector.

Pushing to the internal agency web server

• To push we use a tool called scp ("secure copy") which is part of the SSH suite of tools. SSH and scp are installed along with Git for Windows, or should already be on your Mac.
• Test all changes on your local machine before pushing!
• Did you test on Internet Explorer, Chrome, and Firefox? What about Safari?

When you're satisfied it's ready to go live:

cd build
scp -r * sfcta@prospector:

That's it! Some notes:

• Don't forget that colon at the end of the scp line! It tells scp that you are copying to a named remote server (prospector) and not to a file on your local computer.
• scp will ask for the general TA-staff password
• If you screwed something up, well... revert your changes using git, rebuild everything, and run scp again
• You can also ssh sfcta@prospector (no colon this time) to log into the prospector machine and see the files directly, if you need to do that for some reason.
  • One reason you might want to do that is to delete extra files that are no longer necessary; scp doesn't delete old files, it only copies new ones.
  • And if you want a tool that deletes old files, you may want to do some google searches on rsync
  • rsync -avr --delete * sfcta@prospector: might do what you want, but good luck getting rsync installed correctly on Windows.

Condragulations, you should now be able to see your changes at http://prospector!

Extra Credit: What if I want to publish on the Internet?

There are a bazillion options for real web hosting; two that I like are:

Surge.sh

I am a big fan of surge.sh because they make it crazy easy to host sites straight from the command line. Seriously, you can host a site with just six keystrokes. Their service is free for basic web hosting; you only have to pay them if you want SSL (https) support on a custom domain name (e.g. https://prospector.sfcta.org) . SSL is only $14/month so it's quite a bargain. (I'd recommend using https for any government website these days, just to give the NSA the middle finger.)

Pushing site to surge

So easy, it hurts:

cd build
surge

• Surge will create a new site for you called random-words.surge.sh -- or choose your own words like billy-prospector.surge.sh as long as it hasn't been taken yet.
• Subsequent calls to surge will update the existing site automatically. Kinda amazing.

Now, anyone can browse to that URL and see your creation.

GitHub Pages

SFCTA has an account with GitHub, and if you create a branch named 'gh-pages' in any public repository, its contents become available for hosting at sfcta.github.io/[reponame]. You can then add a "custom subdomain" if you want; that's what we did for http://tncstoday.sfcta.org -- but GitHub does not support https for custom domains.

Pushing to Github Pages

...is a bit more complicated.

• Use git to create a branch named gh-pages. Use a regular git push command to push your site! Any files you push will be available at http://sfcta.github.io/[reponame]
• You probably just want to push the build/ folder to the gh-pages branch. That's kinda tricky. Here is the basic flow:
  • In the main branch, make sure that your project's .gitignore file includes the build subfolder.
  • Inside the _site folder, run

    git init 
    git checkout -b gh-pages
    git remote add origin git@github.com:sfcta/[reponame].git
    git add .
    git push -u origin gh-pages
    

  • Whew! I told you surge was easier. But now that it's set up, you can just run git push from the build folder to update.

Setting up a custom domain name such as prospector.sfcta.org

Follow the instructions from your web host provider. For surge that is at https://surge.sh/help/adding-a-custom-domain

Condragulations, you are now a fully-enabled front-end website developer!