For the ones who lack expertise on JavaScript, Flask can be a very good option to build simple websites, portfolios and online forms. Flask is a Python library that acts as a micro web framework.
In this post, I'll be describing the steps I took to develop my first portfolio page.
In order to find a structure that aligns with my sketches, I basically look into several portfolio templates available online and inspected the code. From those templates, I took the components that I would like to see on my portfolio, and I did my own adjustments. Finally I divided the code into sections:
About section: Having the navbar, a profile picture, an image and short intro about me.
Skills section: With icons and progressive bars.
Projects section: A container with several Divs, with images and links to my projects.
Contact section: A contact form, so people can reach me out.
In order to launch the client (server), the only code needed is the following:
from flask import Flask, render_template, request
app = Flask(__name__)
if __name__=='__main__':
app.run()
In order to render a certain HTML template, do the following:
@app.route("/")
def html_render():
current_year = dt.datetime.now().year
return render_template('index.html', year = current_year)
In the example above, you can see that I defined the variable current_year. In case you are wondering, I have done this, because in my HTML, I have a dynamic variable called year in my footer element:
<footer style="background-color: #f5deb33b; padding-top: 3%;">
<p>Still running in {{year}}. Built with 🧡 by Me.</p>
</footer>
With flask, you can define several variables on the HTML code, that will dynamically change according to your python code. These variables are then rendered in the render_template() function.
Note that for flask to recognize the CSS files, they must be inside a folder called "static".
If you are looking to have your own domain for a fair price I advise Namecheap. There you can find domains such as, .com, .org which are a little bit more expensive, but also very cheap options, like .xyz, .io, .tech, you name it 😉
For the hosting I'm using GCP (Google Cloud Platform), and with the help of Zeet I was able to jump all the DevOps steps. I just need to connect my GitHub account to Zeet, and the integrated DevOps tools do the rest. Every time I do a git push of my code, it automatically builds, and deploys it to a Zeet URL, it is indeed very useful and easy to use.
Of course, this easiness comes with a price, but at least it is free for the first 3 projects 😁
The GCP also comes with a certain cost, but since I'm not using Data Bases, Deep Learning or any order expensive computational activity in my website, I get to pay very few cents in the end of the month.
In order to map the domain bought previously, there are some steps to be done on GCP, I won't explain them, but you can easily follow them on this link.
Almost forgot 😊, check it here: