Skip to content

Latest commit

 

History

History
 
 

start

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

Getting Started

You can use these steps to create a website with free GitHub hosting

We'll help you create a new website repo, or a custom page within our "apps" repo

First, clone the apps repo, the localsite repo, and the io repo. Place all three in the same local webroot folder.

Local Webroot Setup

1. Activate a webroot folder on your computer

The following will allow you to launch http://localhost:8887/localsite/ to view multiple repos in the same webroot.

WITH A PYTHON COMMAND:

Go to the folder where you'd like your webroot to reside and run the following to view pages on localhost:
Run this command to start localhost whenever you restart your computer.

python -m http.server 8887

Or run anywhere and include a path to your webroot. Change /Sites to your custom path.
You may be prompted to install XCode if this is your first use of Python 3.

python3 -m http.server 8887 -d /Sites

If the above do not work, you can also try:

python -m SimpleHTTPServer 8887

If you receive the message: "This site can't provide a secure connection", upgrade from Python 2.7 to 3+.

MORE OPTIONS:

ON A PC: Install IIS to view using http://localhost/   With this approach you'd avoid typing the port number.

WITH CHORME: Alternatively, you can install Web Server for Chrome to view and develop pages offline using http://localhost:8887 on your computer. Web Server for Chrome also allows you to load a custom domain. Web Server for Chrome does not work as a Brave browser extension on Mac (as of December 2019), but you can add as a Chrome extension, then utilize from within Brave.

On a Mac, you can add a shorthand "localsite" command in your .bash_profile file. Change /Site to your webroot:

alias localsite="python3 -m http.server 8887 -d /Site"

2. Clone the "localsite" repo into your webroot

Place the localsite repo within the root of your local web folder, along with other repos that reference it, such as the apps repo and the io repo.

Fork any repo you intend to edit, such as the apps repo. (Click the Fork button in the upper right, then clone from your fork.)

Click the green "Code" button and "clone" the repos you don't plan to edit. (You can convert a clone to a fork later.)

Choose "Open with Github Desktop" to pull down using GitHub Desktop.

Save the file in the webroot folder you created in step 1.

A static page should now be visible at http://localhost:8887/localsite/
An industry impact widget is embedded on the page.

Also clone the apps repo if you are making a custom entry page.

Also clone the io repo into the same webroot to include the input-output widgets. Learn more

For the address search to work, you'll need to get a new Google Maps API key. You can get yours and enable it by following these instructions: https://developers.google.com/maps/documentation/javascript/get-api-key

When you get a key, set the google_api_key in localsite/map/auto/config.json

3. Deploy your updates

Deploy your updates using GitHub. If you are not a project collaborator, GitHub Desktop will prompt you to create a project fork on GitHub. Place a pull request when your updates are ready for review.

Mac Users

To avoid commiting your local .DS_Store files to GitHub, you can run the following to ignore .DS_Store files during commits forever. The .DS_Store files will continue to set icon sizes in your local file manager.

git config --global core.excludesfile ~/.gitignore  
echo .DS_Store >> ~/.gitignore

If you encounter the error "xcrun: error: invalid active developer path", install the Xcode toolkit first.

You can toggle hidden file viewing using Command+Shift+Dot, .DS_Store will not be displayed. To fix a conflict you may need delete the .DS_Store within the github.com website.

4. Activate your website

Turn on Github Pages to view your site online

To activate GitHub Pages on your fork’s settings page, set the Github Pages Source to “Branch: master” with “/(root)“. Wait a few minutes for new GitHub Pages site to become available at the Github.io link. You can point a domain at all the repos in your Github account with the steps below.

How to host multiple repos in one site using Github Pages - without using subdomains

  • Use CloudFlare.com as a free proxy for your domain name - setup steps - more about Cloudflare with GitHub

  • Important: Avoid adding the 4 Google A records (these prevent adding the CNAME record).

  • Create a repo in your primary account matching the name of the account: [github username].github.io

  • Click settings and activate GitHub Pages for your [github username].github.io and each repo that is a subfolder in your site.

  • Add your custom domain name to the root repo called [github username].github.io.

  • Add a CNAME record for your domain in CloudFlare with @ and [secondary github username].github.io. Using a secondary GitHub username allows more than one repo folder to be accessible through your primary domain.

  • Wait 2 to 10 minutes for new GitHub Pages site to become available.

  • Activate GitHub Pages for each additional repo residing within the primary account. These can be forks from other accounts.

  • Avoid putting referenced files in your [github username].github.io root repo because it won't be the root of your site when you view on localhost.

  • Make a fork of the current "localsite" repo to include it's functionality in your site design.

5. Update your forked repos

Occasionally merge in updates from the main repos (localsite and io) by doing a "pull request"

  • On your forked repo: Click Compare
  • Flip the order. (Pick a third repo temporarily because if the two match a warning occurs.)
  • Create pull request > Give the pull request a title
  • Create pull request (again)
  • Merge pull request (scroll down) > Confirm merge.

Images of steps for updating your fork

Additional Resources

The Localsite Framework is designed to allow multiple Github repos to communicate using hash values.

View Starter Samples - maps, charts, widgets. Contact our team for pointers and join us on Slack.

Learn more about JAM Stack Development - the process of creating fast sites using static pages with CSV files, JSON and APIs.

Edit online using stackedit.io and Dillinger Markdown to HTML

AWS Amplify, and site hosting info - Azure, Firebase, GitHub Pages, Netlify and more.



[Edit the page above in Github](https://github.com/modelearth/localsite/blob/master/start/README.md) - [Edit in StackEdit](https://stackedit.io/app#providerId=githubWorkspace&owner=localsite&repo=localsite&branch=) - Click folder icon in upper right within StackEdit. ([Direct links are not yet available in StackEdit](https://community.stackedit.io/t/open-file-from-github-using-a-link/495))