How to Develop and Host Your Portfolio Website
- 5 min read
For a software engineer / developer a personal portfolio website is a must. It allows the developer to market themselves much more effectively
to recruiters and clients alike. In this article, we will look at some of the most important things to consider when developing and hosting your personal
website.
Also, we will only be looking at dynamic websites instead of static ones. Static websites offer zero extendability
and customizing the content of those websites is a very time-consuming process. So a dynamic website will offer easier development experience
due to component-based development and hassle-free extendability, when you decide to add new features to your site later-on.
When starting any website development project, we have to decide several factors, like:
- Server-side rendering vs client-side rendering
- Technology selection
- Finding the required assets such as images and media
- Hosting the website
Server-side vs Client-side Rendering
In server-side rendering, the webpage is generated ("rendered") at the server and then will be sent to the client's machine. In contrast, with client-side rendering the
web app (running on the client machine) will be decoupled from the server app and both will communicate using a standard protocol such as REST or GraphQL.
Both has pros and cons. Server-side rendered webpages are more secure as there isn't any sensitive communication happening between the client machine and the server and also they are easier to
develop as well since the both the webpages and the server app are developed together and tightly coupled. The main disadvantage of the server-side rendering is it is significantly more involved
to design and develop more interactive user experiences as pages are generated by the server and not by the client machine. So server-side rendering is much suited for websites that are
designed primarily for content-consumption as they would require less user interation.
Client-side rendered pages offer significant flexibility compared to server-side rendered pages as far as the user experience is considered. It is possible to create exceptional
user experiences using JS libraries such as React or Vue. But at the same time, they will also take longer to develop as now you need to develop two apps instead of one and also setup an API
interface so these two apps can talk. Great care must be taken to secure the API endpoints on the server as they provide an easy opening for cyber-hackers to hack and access the application database.
So client-side rendering is suited for web applications where the quality of the user interactivity is paramount.
As for personal website, server-side rendering is best as it is a consumption focused website and will also offer a faster development timeframe.
Technology Selection
There are many server-side rendering frameworks and technologies available. The most common ones are:
- ASP.NET (C#)
- Flask (Python)
- Django (Python)
- Spring Boot (Java)
- Next.js (JavaScript)
When selecting a framework, we need to consider the performance, resource utilization and development time required to code the server app. Out of all the frameworks listed above,
ASP.NET and Spring Boot are the fastest. Servers developed using those technologies can handle several thousands of requests per second. But the main disadvantage of those technologies
are that they are very resource intensive, so in a resource constrained server (with low RAM, say <2 GB) they cannot be deployed or if they were deployed their performance will suffer
significantly.
Flask and Django are Python-based servers and they serve (pun not intended) different purposes. Flask is a very-lightweight framework that offers essential tools needed for developing a server app
while Django is "batteries-included" type of framework that integrates almost everything (and more) a web developer needs. As for the performance, Flask apps are measurably faster than Django servers as
it is a micro-framework and has much less overhead than Django. Flask's memory consumption is the lowest of all the frameworks mentioned above (30 MB for Flask vs 300 MB for Spring Boot). Actually
it is an order of magnitude less than that of the Spring Boot. But one minor disadvantage is since Flask is a micro-framework the developers have to add any additional components themselves. Flask
has the shortest development time of all the other frameworks.
Next.js is a JavaScript - Node.js framework for developing server apps. As far as the performance, resource utilization are concerned it will slot right between Flask and Spring Boot. So based on
this I recommend either Flask or Next.js for developing your personal website. For instance, this website is developed using Flask since the less resource utilization is very important
for me as this website is hosted in a VPS with 1 GB of RAM.
Flask has the lowest resource utilization of all other web frameworks.
Finding Images and Media
One of the problems I always encounter when doing web development is finding stock images and content for the design of web pages. There are many
websites such as Unsplash and Pexels that have free stock images and videos for your website.
Also since this is a portfolio website, it is a good idea to post a recorded video of yourself introducing your skills and work experience.
Hosting
Hosting is a one of the most crucial part of your personal website. There are free hosting services out there as well as paid ones. Each of these services have their pros and cons. Before you can host your website you need to buy a domain name so that the users can reach your website using a standard web URL instead of the ip address of your server. Since hosting is a multi-step process, I will create a separate post outlining the various hosting options available and the best ones to use for your website.
Hopefully this post helped you to develop your own portfolio website. Stay tuned for my other software development related posts.