A Simple Walkthrough To Enhance Your Personal Brand
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
- Someone outside of computer science that wants to make a website without paying for Squarespace
- A web designer that wants to have more flexibility in implementation.
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!
- 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.
- 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.
- https://brew.sh/ — This lets you install programs from the terminal/command line.
- Git — This is how programmers generally track different versions of applications or changes that are made. You can install it by using
brew install gitin your terminal after installing brew
- Heroku CLI — Follow the steps here. You’ll need this to access Heroku.
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:
- 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.
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.
git init— this creates the git repo in that folder.
heroku create— this creates an application repo on Heroku’s servers.
git add .— this adds all files into a pending git commit
git commit -m 'message here'— This saves the commit.
git push heroku master— This sends your local commit to Heroku's servers.
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)
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’
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!
- 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.
- Design — How would you like it to look? Tools: Sketch, Adobe Xd, Figma Recommended: Figma (Online and easiest to use)
- Convert Design into HTML/CSS — What frontend CSS/JS framework would you like to use? This is optional, but highly recommended since it’ll add a consistent format across mobile/desktop and save you time
Tools: Foundation, Bootstrap, Semantic UI
Recommended: Semantic UI (Mainly personal preference)
Sample code is available on Github. Feel free to send me questions!