Giter VIP home page Giter VIP logo

cool-retro-term's Introduction

Host a static website in Heroku for FREE using Python Flask framework

Guideline:

Part 1: Push your website live to Heroku

-Download [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
-Download [Heroku CLI](https://devcenter.heroku.com/articles/getting-started-with-python#set-up) (Command Line Interface)

2.Create a Heroku account

3.Create a project folder and organize the folder structure - in your Terminal / Command Line Prompt

$mkdir Website_Example

$cd Website_Example

$mkdir templates

so your folder structure will look like:

Website_Example

templates

index.html

4.Create a virtual environment and activate it

$pip install virtualenv

make a virtualenv called "venv":

$virtualenv venv

activate this virtual env:

- macOS:

    $source venv\bin\activate

- windows:

    $venv\Scripts\activate

5.Init Git in project folder

$git init

6.pip install all required dependencies:

$pip install Flask

$pip install gunicorn

7.Create a Flask app/backend

$touch index.py
from flask import Flask, render_template


app = Flask(__name__)


@app.route("/") #www.domain.com - render homepage
def index():

    return render_template("index.html")


if __name__ == "__main__":

    app.run(debug=False)

8.Create a Procfile

$touch Procfile

make sure you capitalize the first letter and name the file WITHOUT any extension. in your Procfile, include:

web: gunicorn index:app

make sure you:

  1. do NOT include any space between "index:" and "app" - "index" is the .py file where your Flask backend lives in and "app" is the variable name of the flask object that's defined in index.py file.

  2. include ONE space between "web:" and "gunicorn" -

9.Create a requirements.txt file

$pip freeze > requirements.txt

10.Push our app/website to Heroku

$heroku login

-your browser pops up asking you to log into your Heroku CLI

$heroku create

-create a new Heroku app randomly named by Heroku (you can pass a specific App name but it has to be uniquely available.)

$ git status

-track your file changes and locate the untracked files detected by git

$ git add .

-add all files to git staging area so that you can push files to Heroky in next steps

$ git commit -m"give your wished comments for app pushing"

-this is to commit all your changes

$ git push heroku master

-finally pushing your apps and files to Heroku server wait a few minutes and let Heroku do all the heavy liftings for you. After successfully deploying:

$heroku open

-open your app url and view it in your browser.

Part 2: Add a custom domain to your Heroku hosted app

  • Get a free domain

    1. Go to freenom to sign up an account
    2. Grab a free domain
  • Visit your hosted webste in Heroku

    1. Log in Heroku and go to dashboard to visit the hosted app

    2. Add custom domains in your app's setting page.

  • Add Heroku DNS CNAME records to Freenom DNS console.

    1. Head over to Freenom DNS Console

    2. Point CNMAE records to Heroku-required records

  • Await a few minutes to see your website live @ yourwebsite.com

cool-retro-term's People

Contributors

0-wiz-0 avatar alex-spataru avatar alexdantas avatar alexmyczko avatar b0n541 avatar barak avatar cornelius avatar darkpioneer avatar eateroa avatar firemark avatar gmmeyer avatar gottz avatar inzanity avatar jekader avatar jightuse avatar kamikazow avatar kiwistrongis avatar matthiasbalke avatar michaelneas avatar mikeu avatar rbanffy avatar robatron avatar scruss avatar shawndooley avatar swordfish90 avatar tgerczei avatar theridane avatar tomchiverton avatar viljoviitanen avatar yurikhan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.