Creating a Website Without a Tech Background

A Simple Walkthrough To Enhance Your Personal Brand

My own personal site created from this guide

First off, this is mainly targetted towards folks that don’t have a web development background but want to create their own website. You could use this to make a personal website to showcase your portfolio including projects you’ve worked on or papers you’ve written. Specifically, this may interest you if you are:

  • An intro-level computer science student interested in seeing what you can do practically with web development

This will be a walkthrough of how to make a simple website in about 30 minutes. We’ll mainly focus on setting up the website backend and hosting it. I’ll leave it to you to customize it afterward. Let’s get started!

Setup

Accounts

  1. Heroku — College students usually use this to host their websites. It has a pretty generous free tier (you get a website for free forever essentially). It’ll be “[something].herokuapp.com”, but that’s a small concession for your own plot of land on the internet.

Programs

  1. Code Editor — I would suggest PyCharm since its tools and prebuilt templates make things even easier to set up, but lighter weight editors like Sublime Text or Atom are also nice if you‘re familiar with coding practices already.

Creating a website

Go to Pycharm and hit File >> New Project

You’ll want to make sure Flask is selected on the left. Once you hit create, it’ll make a boilerplate app for you.

A couple of things of note here:

  1. That green Play button in the top right will run your application. You can then go to ‘http://localhost:5000' in any browser (chrome, safari, etc) to open your website.

When you do, you should see a page that says “Hello World!” — this is exactly what you see on line 8. If you changed that to “Hello [Your Name]!” and hit the green button again, now the webpage will say that.

You can also change @app.route('/'). We can add a route ‘/work’ so that when someone goes to www.[your website].com/work, it’ll load this logic. Note that you need to change the function name AND the route, otherwise, it'll give you an error.

There’s a bunch of other folders in the application on the lefthand sidebar. Let’s just focus on static and templates. Static usually contains things that don’t change. For a website, this is typically images, javascript, css scripts — things that won’t change no matter what the user does. Templates are your typical HTML pages.

Let’s make a basic template and load it. If you right-click templates and click new, you can autogenerate most of the HTML5 page. Then, you can import the function render_template and reference it in the return statement on line 8.

Now, if you go to localhost:5000, it’ll load the new HTML page that you made. Using this, you can load any HTML page. You can use CSS/JS just as you normally would by embedding it within those pages.

Hosting the webpage

Now, let’s take the webpage we made and saw at “localhost” and put it somewhere everyone can see using Heroku.

Hit the terminal button at the bottom:

We’ll need to create a git repository (we can optionally store it up on Github) and upload it to Heroku.

  1. run git init — this creates the git repo in that folder.

Pushing to Heroku will probably fail since you’re missing a few key files. Let’s create them and try again. You need three files: runtime.txt, requirements.txt, ProcFile

runtime.txt: (This tells Heroku what version of python to run it with)

python-3.7.7

requirements.txt: (This tells Heroku what to install)

You can generate this by typing in ‘pip freeze’ into your terminal. To send it to a file type ‘pip freeze > requirements.txt’

click==7.1.2
Flask==1.1.2
gunicorn==20.0.4
itsdangerous==2.0.0a1
Jinja2==2.11.2
MarkupSafe==2.0.0a1
Werkzeug==1.0.1

ProcFile: (This tells Heroku how to run it)

web: gunicorn app:app  --log-file=-

Your file directory should look like this (.gitignore is optional):

After all that, if you go through the commit and push process again (you remember all that right?) You should now be able to view your website on a special Heroku URL.

Congrats! Over the past 30 mins, you’ve created your own website with custom pages and set it up to be accessible to the whole world! All that’s left is to customize it and make it your own.

Here are a few thoughts and resources I’ll leave you with. Best of luck!

  1. Content — What do you want to tell people in the text on your website? This can be a simple description or a more complex essay depending on the nature of the work.

Sample code is available on Github. Feel free to send me questions!

SWE @ Nuro | Formerly Facebook/Google | Yale ’18 | alanliu.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store