Table of Contents
- Overview
- Prerequisites
- Setup
- Creating the Flask Application
- Setting up the Routes and Templates
- Creating the Navigation Bar
- Building the About Page
- Creating the Portfolio Page
- Wrapping Up
Overview
In this tutorial, we will learn how to build a personal portfolio site using Flask, a Python web framework. By the end of this tutorial, you will have a functioning Flask application that showcases your skills and projects. We will cover the basics of Flask, setting up routes and templates, creating a navigation bar, and building pages for the About section and the Portfolio.
Prerequisites
To follow along with this tutorial, you should have a basic understanding of Python programming. Familiarity with HTML, CSS, and the Flask framework is beneficial but not required. You will need to have Python and Flask installed on your machine.
Setup
First, let’s make sure we have Python and Flask installed. Open your terminal or command prompt and run the following commands:
bash
python --version
This will check if Python is installed and display the version. If Python is not installed, download and install it from the official Python website.
Next, let’s install Flask using pip, the Python package installer. Run the following command:
bash
pip install flask
Once Flask is installed, we are ready to start building our portfolio site.
Creating the Flask Application
To begin, let’s create a new directory for our project. Open your terminal or command prompt and navigate to the desired location where you want to create the project directory. Run the following command to create the directory:
bash
mkdir portfolio-site
Now, navigate into the newly created directory:
bash
cd portfolio-site
Inside the portfolio-site directory, create a new file named app.py. This file will contain the main Flask application logic.
Open the app.py file in a text editor and import the necessary modules:
python
from flask import Flask
Next, create a new Flask application instance:
python
app = Flask(__name__)
Setting up the Routes and Templates
In Flask, routes are used to map URLs to functions. Let’s create some routes for our portfolio site. Add the following code to app.py:
python
@app.route('/')
def index():
return 'Hello, World!'
This defines a basic route that will display the text “Hello, World!” when we access the root URL of our site.
To test our route, we need to run the Flask application. Add the following code at the end of app.py:
python
if __name__ == '__main__':
app.run()
Save the app.py file, open your terminal or command prompt, and navigate to the portfolio-site directory. Run the following command:
bash
python app.py
This will start the Flask development server. Open your web browser and visit http://127.0.0.1:5000/. You should see the “Hello, World!” message.
Now that we have a basic route working, let’s create some templates to improve the appearance of our site. Inside the portfolio-site directory, create a new directory named templates. This directory will store our HTML templates.
Create a new file inside the templates directory named index.html. In this file, add the following HTML code:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>Welcome to My Portfolio</h1>
</body>
</html>
``` This is a simple HTML structure with a heading element. Save the `index.html` file.
We now need to modify our index() function to render this template instead of returning plain text. Update the code in app.py as follows:
```python
from flask import render_template
@app.route('/')
def index():
return render_template('index.html')
``` The `render_template` function takes the name of the template file as an argument and renders it.
Save the app.py file and restart the Flask development server using the previous command. Visit http://127.0.0.1:5000/ again, and you should see the heading “Welcome to My Portfolio.”
Creating the Navigation Bar
A navigation bar is an essential component of any website. Let’s add a simple navigation bar to our portfolio site.
In the templates directory, create a new file named _navbar.html. In this file, add the following HTML code:
```html
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/portfolio">Portfolio</a></li>
</ul>
</nav>
``` This creates an unordered list with three list items representing the different sections of our site. Save the `_navbar.html` file.
Next, let’s modify our index.html template to include the navigation bar. Update the code in index.html as follows:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
{% include '_navbar.html' %}
<h1>Welcome to My Portfolio</h1>
</body>
</html>
``` The `{% include '_navbar.html' %}` code includes the contents of `_navbar.html` in the template. Save the `index.html` file.
Restart the Flask development server and visit http://127.0.0.1:5000/ again. You should now see the navigation bar above the heading.
Building the About Page
Let’s create a new page for the About section of our portfolio site.
Inside the templates directory, create a new file named about.html. In this file, add the following HTML code:
```html
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
{% include '_navbar.html' %}
<h1>About Me</h1>
<p>I am a web developer passionate about creating beautiful and functional websites. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</body>
</html>
``` This is a basic HTML structure with a heading and a paragraph describing yourself. Save the `about.html` file.
Next, let’s create a route in app.py for the About page. Update the code in app.py as follows:
python
@app.route('/about')
def about():
return render_template('about.html')
Save the app.py file and restart the Flask development server. Visit http://127.0.0.1:5000/about, and you should see the About page with the navigation bar.
Creating the Portfolio Page
Finally, let’s create the Portfolio page to showcase your projects.
Inside the templates directory, create a new file named portfolio.html. In this file, add the following HTML code:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<style>
.project {
border: 1px solid #ddd;
padding: 1rem;
margin-bottom: 1rem;
}
</style>
</head>
<body>
{% include '_navbar.html' %}
<h1>My Portfolio</h1>
<div class="project">
<h2>Project 1</h2>
<p>This is an example project. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="project">
<h2>Project 2</h2>
<p>This is another example project. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="project">
<h2>Project 3</h2>
<p>This is yet another example project. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</body>
</html>
``` This code defines a CSS style for the `.project` class and creates three project sections with headings and descriptions. Save the `portfolio.html` file.
Update app.py to add a route for the Portfolio page:
python
@app.route('/portfolio')
def portfolio():
return render_template('portfolio.html')
Save the app.py file and restart the Flask development server. Visit http://127.0.0.1:5000/portfolio, and you should see the Portfolio page with the navigation bar and project sections.
Wrapping Up
Congratulations! You have successfully built a personal portfolio site using Flask. We covered the basics of Flask, setting up routes and templates, creating a navigation bar, and building pages for the About section and the Portfolio.
Feel free to customize and expand upon the project by adding more sections, linking to your actual projects, or styling the site further. Flask offers many features and options to explore, making it an excellent choice for web development with Python.
Remember to always practice and experiment with different techniques to enhance your skills. Enjoy building your portfolio site and showcasing your work to the world!