🍎
Introduction to Web Development
  • Introduction To Web Development
  • Tools
    • Notes: Web Development Process
    • Notes: Replit
    • Notes: GitHub
    • Notes: Replit + GitHub Integration
    • GitHub Pages Hosting
  • Week 1: HTML
    • Notes: HTML
    • Notes: Working With Images
    • Project: Hello World
    • Project: Subject of Interest
  • Week 2: CSS
    • Notes: CSS
    • Using CSS for Layout
      • Notes: Box Model
      • Notes: Flexbox
      • Notes: Responsive Layout
    • Project: Styling Subject of Interest
    • Project: Image Gallery
  • Week 3: JavaScript and HTML Forms
    • Notes: JavaScript
    • Notes: Processing HTML Forms with JavaScript
    • Project: Dynamic Style Change
    • Project: Mad Libs
  • Week 4: Web Site Using Bootstrap
    • Notes: Anatomy of a URL
    • Notes: Content
    • Notes: Bootstrap
    • Notes: Overriding Bootstrap
    • Notes: Favicons
    • Notes: License
    • StartBootstrap Templates
    • Project: Bootstrap Website
  • Wrap Up
  • Videos
Powered by GitBook
On this page
  • Connecting Replit to Github
  • Step Through Replit/GitHub Integration
  1. Tools

Notes: Replit + GitHub Integration

PreviousNotes: GitHubNextGitHub Pages Hosting

Last updated 1 year ago

Connecting Replit to Github

Connecting Replit to Github involves installing Replit on GitHub by connecting the GitHub service to Replit, and requesting authorization from GitHub to allow the Replit user to push code to GitHub.

Our process starts by writing code. In order to push this code to GitHub we need create a GitHub repository. The steps below will connect us to GitHub, create a repository and push the code to GitHub. We only need to run the step that connect to GitHub the first time we want to push code from Replit. After that, the connection will be setup and we only need to use the Replit Git User Interface to authorize the user and create a repository and push code.

This will walk you through the Replit+GitHub Integration.

Step
Notes

Add a README.md file

The README markdown file appears on the GitHub website and describes the Repository (this is optional but if you don't do it, GitHub will indicated that you should)

Connect GitHub Service in Replit and Authorize in GitHub

Navigate to Account in Replit to find Connected Services

Authorize Replit Account to add and change code in GitHub Repository

You will get prompted to Authorize if you have not already done so.

Create Repository

You only need to create the repository once per Replit project.

Commit changes with a message and "Sync with Remote" changes to GitHub from Replit.

When ever you make a set of changes to your code, you'll click on Sync to move the code into GitHub.

Step Through Replit/GitHub Integration

Install Replit On GitHub By Registerig it as a Connect Service in your Replit Account.

GitHub is Connected When Connect Services offers Disconnect Link

Create or Open a Repl That is Not Integrated with GitHub

Check the "Create initial commit with all changes" or you will be prompted later to set up your first commit.

Click on Create Repository to create a new Repository on GitHub. Replit needs to know the GitHub account name labeled Remote (https://github.com/rebeccapeltz1) and the Repository name (HelloWorld2).

Select "Public" for Privacy and then click to create the repository on GitHub.

Click the radio button (blue circle) next to Default Profile. If this is the first time you've created a GitHub repository, this will not exist and you'll have to click on GitHub Settings as shown in the lower commit author to authorize this user.

A few seconds after you click on the "Create Respository on Github" button, you'll see the green message on the bottom right letting you know that the repository was successfully created. You can return to the main Git view by clicking on the "<" Settings at the top.

You may get prompted to authorize the push and to sign in to GitHub.

Now you can continue modifying code and syncing to GitHub.

Open Git Tab on the Right
Click on blue link to go to Git Settings View
Read to sync more code
video
GitHub will show Replit as an Installed App When Replit Shows GitHub Services Connected
Enter Values for Remote, Repository Name, and Select Default Replit User or Authorize New User
Click on "Create Repository on GitHub" Button
Now you can push your code to GitHub.
Cick Confirm to continue to push the code
You are signing on to GitHub here so use your Github Account Name and Password.
This is what the Repository will look like without a README.md