Home

Deploying Websites

• Github Pages
  • Github Pages Adding Domain Name
• Heroku
  • Website
  • Terminal
  • Using keys
  • MySQL
  • Heroku Adding Domain Name
• Netlify
  • Netlify Adding Domain Name
• Vercel
  • Vercel adding domains
• MongoDB Atlas
  • Making a new project
  • Deleting a new project
• Domain Names

Github Pages

1. Push your code to git. Have your deployable code in the “docs” folder
   • Make sure it is all correct because it maybe hard to change the website once it is deployed
2. Go to “Settings” tab and click “Pages” on the left side
3. Change “none” to your branch you want ot deploy from
4. Change “/(root)” to “/docs”
5. Click “Save” and wait. It may take a while
   • Any new pushes to that branch should be automatically deployed
   • If any new changes are taking a very long time to deploy then you need to create a new repo with your code and deploy from that.

Github Pages Adding Domain Name

1. On github go to user -> Settings -> Pages
2. Click Add a domain
3. Put your domain name in and follow the direction(Adding A TXT DNS record).
4. Click Add domain and wait for it to verify
5. Go to your github pages repo -> Settings -> Pages
6. Add you Custom domain and click save

On Porkbun

1. Login
2. Account -> Domain Management
3. Click the arrow down in the red box on the right of you domain name you want to use
4. Under DNS RECORDS click Edit
5. Remove the 2 default DNS records of type ALIAS and CNAME*
6. Add TYPE CNAME, Host www, and ANSWER (github username).github.io.
7. Add 4 TYPE A DNSs. Leave the Host blank and put these 4 ip addresses
   • 185.199.108.153
   • 185.199.109.153
   • 185.199.110.153
   • 185.199.111.153
   • These may change in the future. So double check on this website.

You have to wait around 30 mins.

• After around 30 min on your github pages repo click Check Again under your Custom domain

Heroku

Website

1. Login or create Heroku account at https://id.heroku.com/login
2. Click on top right “New” and click “Create new app”
3. Give an app name of {github username}-{github repo name}
   • Make sure to replace any spaces or underscores with dashes
   • You can name it whatever you want, but this is the recommended naming convention
4. Click create app
5. Go to “Deploy” tab and set your deployment method to github and connect your github repo
6. Got to “Settings” tab and set your buildpack to what your app is using.

Terminal

1. Make sure to have the Heroku CLI installed at this link https://devcenter.heroku.com/articles/heroku-cli
   • On Linux: curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
2. Run heroku login in the terminal
   • A website should popup and make sure to login there
3. Make sure your code is pushed to your git branch
4. Run heroku git:remote -a my-app, but replace my-app with the app name you gave.
   • This should create a new heroku location for git
5. Run git subtree push --prefix my-subdirectory heroku master, but replace my-subdirectory with your root directory and replace master with your branch you want to deploy from.
   • This will make Heroku use my-subdirectory as the root directory

Using keys

• On the Heroku website go to Settings and click Show Config Vars
• In nodeJS use the package dotenv and use the Keys that are in your Config Vars

MySQL

1. Go to Resources
2. Search for JawsDB MySQL
3. JAWSDB_URL should be automatically added in your config vars

Heroku Adding Domain Name

1. On heroku website go to Settings
2. Click Add domain
3. Paste your domain name
4. Copy the DNS target link

On Porkbun

1. Login
2. Account -> Domain Management
3. Click the arrow down in the red box on the right of you domain name you want to use
4. Under DNS RECORDS click Edit
5. Remove the 2 default DNS records of type ALIAS and CNAME*
6. Set type to ALIAS, leave Host blank, and past your heroku DNS target link under Answer. Then Click Add
7. Set type to CNAME, under Host put *, and past your heroku DNS target link under Answer. Then Click Add

Netlify

1. npm run build to get a dist folder
2. Go to netlify
3. Drag and drop dist folder into sites in netlify

Netlify Adding Domain Name

1. Domain management
2. Add domain name
3. Type your registered domain name -> Add domain (There should be something saying it was already registered) -> Add domain again
4. On your domain name click options -> Set up Netlify DNS
5. Verify -> Add domain -> Continue -> You should get ~4 domain name servers. Make sure to copy these.

On your register website(Not netlify) paste those ~4 domain name servers in.

Vercel

Vercel doesn’t allow you to make monetary transactions on the free tear.

Vercel adding domains

1. Top left ryansheehy0’s projects
2. Click the 3 dots to the left of your project
3. Manage domains
4. Add A record to DNS on porkbun
5. Add CNAME record to DNS on porkbun When adding domain names add the A records and the C

MongoDB Atlas

MongoDB Atlas

Making a new project

1. Top left project dropdown -> + New Project
2. Name your project
3. Create Project
4. Create a deployment
5. For this user there should be an auto-generated username and password. Make sure to save the auto-generated password.
6. Create User
7. Finish and Close
8. Left side -> Under the green security header -> Network Access
9. Edit button
10. Allow access from anywhere
11. Confirm
12. Left side -> Overview
13. Green connect button
14. Drivers
15. Copy the connection string which starts with mongodb+srv://
16. Replace <password> with the password from your user you saved.
17. You can now connect to the db with this link

Deleting a new project

1. Left side -> Under the green Deployment header -> Database
2. Click on cluster name link in blue
3. Right side 3 dot buttons
4. Terminate
5. Wait for cluster to shut down and be removed
6. Top left project dropdown -> View All Projects
7. Delete your project with the trash button

Domain Names

• Porkbun
  • Under your domain name. Small red NS and paste in.