Hosting your website for free

It's the time of year when university students start the arduous process of applying for graduate jobs. I thought I would reveal an interesting insight into the number of jobs I applied for. A quick search of my mail inbox returns the result, '1 of many' which feels about right.

An aspect of applying for work that is ever-present is the request for a portfolio or work that you would like the interviewer to see. Personally, I believe that my portfolio (showing my diverse work) really helped me to receive interview offers as it demonstrated my skills and abilities.

However, once you've got your website made to showcase your work, how do you host it?

You may be familiar with a range of large hosting companies that reel you in with low prices but then quickly increase costs and make it difficult for you to leave. This post will talk you through two different ways you can host your portfolio for free!

1. Netlify

This first method of hosting your website is my favourite as Netlify is extremely easy to use and always updating it's offering.

Visit the Netlify website.

Step 1: You'll need an account.

You can register for an account with the following:

An email address
An existing GitHub account
An existing GitLab account
An existing BitBucket account

Step 2: Uploading your website

Once signed up and logged in, you should be presented with a dashboard, titled 'Team Overview'.

The page I am presented with says, 'Joe Lamyman's team', 'Team overview', so if you see something similar to that - you're in the right place!

A screenshot of the Netlify 'Team overview' screen, showing a title saying 'Joe Lamyman's team', the navigation presents options such as Sites, Builds, Plugins, Domains, Members, Audit log, Billing and Team settings. A section at the top of the UI is titled: Joe Lamyman's team, making it evident that a user is logged in. Beneath this title are quotas such as Bandwidth used, Build minutes used and Concurrent builds. Below this information are a list of sites on Joe Lamyman's account such as joelamyman.co.uk

Next, you will need to navigate to the 'Sites' page.

Here, you should see the option to drag and drop your site folder. You may find this section towards the bottom of the page.

I understand that this method is not accessible to all users, so I have contacted Netlify to understand if there could be a button or alternative method to upload a file without the need to drag and drop.

If you drag the folder containing your website to this section, your website will begin to upload. You should be given a random name and website address. On the screen, a message to tell you that your site is being deployed should be presented.

Everything is working great!

After a short time, your site will be deployed. You will know this has been successful as the message on screen will change to: Your site is deployed.

A screenshot of the Netlify 'Site overview' screen. The screen contains a random site name that has been generated, in this case it is elated-shaw-6de448, alongside it is the website's address that has been generated which is https://elated-shaw-6de448.netlify.app. Below this information is a checklist and under the first item is a message that says: Your site is deployed. This confirms that our site has been deployed correctly.

Step 3: Set up a custom domain

If you have already purchased a domain (I use Google Domains for all my domain names and have found it to be the most straight-forward to use, i.e. I'm not harassed by daily spam), you can now use this. If you don't have a domain, that's also fine! I'll explain how you can still get a customised domain.

Step 3.1: If you do not have a domain

From the 'Site overview' page for your website, navigate to the 'Site settings' page.

On this page you will find 'Site details' and information about your site. There should be the name of your site which will have been randomly generated.

If you select the button on this page titled, 'Change site name', a dialog will be presented. Here you can change the existing site name to something more appropriate.

A screenshot of the Netlify 'Change site name' dialog. The dialog contains a message saying: The site name determines the default URL for your site. Only alphanumeric characters and hyphens are allowed. Then there is a form field, labelled Site name, with a field underneath for the user to change the site's name. Below this field are Save and cancel buttons.

Make sure to save the change!

I changed my site's name to: joe-lamymans-portfolio. As such, the address for my site now will be: joe-lamymans-portfolio.netlify.app

Without paying for a domain, you will always have the netlify.app extension on your address, but I do not think that is a problem! The benefit of this, is that your site will be using HTTPS without you needing to do anything else.

You can find the link to your site towards the top of the page. The UI will say something along the lines of: 'Settings for' and then the name you just provided. The link can be found directly after this.

There's nothing more you need to do, skip to step 4!

Step 3.2: If you have a domain

If you have a domain, from the 'Site overview' page, navigate to the 'Domain settings' page.

On the domains page, select the button titled 'Add custom domain'. You will then be asked to enter the custom domain that you'd like to use. For example, if you purchased the domain www.joe-lamymans-portfolio.co.uk, in this field you would enter www.joe-lamymans-portfolio.co.uk.

You will then need to verify this domain. For the best results, you will want to use the Netlify DNS.

To do this, when you select your domain name on the Domains page, you should be presented with four name servers, these will look like: dns1.p01.nsone.net

Head over to wherever your domain is registered and within your DNS settings, there should be an option to use custom name servers. Select this and then add the name servers presented to you by Netlify on the domains screen.

It may take a little while for the changes to be made, I've had to leave it overnight before, so do not worry if the changes are not instant.

Step 3.2.1: Set up HTTPS

Finally, you will want to use HTTPS to ensure that it can be accessed and used securely.

Still on the domains page within Netlify, towards the bottom of the page should be a 'HTTPS' section.

To use HTTPS on your site, with Netlify it is as straight forward as selecting a button. This will then request a HTTPS for your website. Once requested it may take a little bit of time for the certificate to be requested and used. However, once you've done this, the process is managed automatically.

Step 4: You are good to go!

That is it. Process over, you have now got your website hosted for free with Netlify!

Now when you go for an interview, you can casually slip in a phrase like:

"Nice to meet you. Did you know I'm FULLY utilising the frictionless array of serverless utilities and REALLY expanding on the Jamstack methodology by hosting my site on Netlify!! Q4 is going to be MASSIVE for me and I can't wait to rehydrate my DOM with those Netlify serverless functions... WHO AM I KIDDING, we all know they're really just AWS Lambda functions LOL"

If that doesn't get you a job, you didn't want to work at that company anyways.

2. GitLab Pages

This is the other method for hosting free websites that I tend to use for quickly getting a site up and running. It is also really convenient if you're already using Git to host your code. In this example, I'll be using GitLab as GitHub refuses to drop ICE and GitHub recently fired an employee who warned of Capitol attack Nazi link.

Visit the GitLab website.

Step 1: You'll need an account

You can register for a GitLab account with just an email address and you might find this the quickest way to get going.

Step 2: Make a new project

Once you've signed up and logged in. From the 'Projects' page, you need to select the button titled, 'New project'.

A screenshot of the Gitlab 'Create new project' screen. The screen contains 4 options: Create blank project, Create from template, Import Project and Run CI/CD for external repository. You will want to select the first option, Create blank project.

You'll need to enter a few details and be sure to set the visibility to public!

A screenshot of the Gitlab 'Create blank project' screen. The screen severak fields. The first, Project name, contains a text field within which I have entered 'Joe Lamymans Portfolio'. Next is the Project URL, I have left this as it was generated: https://gitlab.com/j-lamyman/. Next is the project slug, this is again automatically generated from the project name and as such is joe-lamymans-portfolio. Next, a text area labelled: Project description (optional). I have filled this with the text: A portfolio of the projects I have worked on during my time as a University student. Next, a fieldset of radio buttons. There are two options: Private and Public. The public radio button has been selected. Finally, the, 'Initialize repository with a README' checkbox remains unchecked. Below these fields is a button labelled, 'Create project'.

If you are confident enough with the command line, you can follow the instructions to push an existing folder. If not, you can select the button titled, 'New file'. This will take you to an online text editor where you can create your files and copy over all of your code into them.

A screenshot of the Gitlab's in browser code editor. The screen features a menu down the left which shows the files that the user has added. I have added an index.html file which is visible. The majority of the screen is taken up by HTML5 code that I have copied and pasted in. Scanning this code, the user can see a <head> element containing references to a website called Style Stage. At the bottom of the screenshot is a button labelled 'Commit...' and some text letting the user know that 1 file has changed.

Once you've added your files, you need to select the 'Commit' button to save your work. You will be asked for a commit message, just describe the files you added. Something as simple as: "This was a YOLO commit, added my whole site", will suffice for now. You can go ahead and commit this now.

If you head back to your projects page, your commit message should be on screen, as well as the files that you created.

A screenshot of the Gitlab's 'Project overview' screen. The screen is titled: 'Joe Lamyman's Portfolio'. On screen is relevant information explaining how many commits there have been (1), the number of branches (1) and the size of files (143KB). More pertinent for this post, a message is visible that mirrors the commit message I provided, 'Created the index page and added in content'. Below this, listed are a series of buttons for the user to add files, such as a README, a license, or to set up CI/CD. Finally, files in the repository are listed. Here the index.html file I created previously is listed.

Step 3: Setting up Pages

On your project's 'Project overview' screen, select the button titled, 'Set up CI/CD'.

This will take you to an intimidating looking screen, but we do not need to do too much here.

A screenshot of the Gitlab's 'New file' screen. The screen contains a series of dropdowns along the top for changing the branch, file type as well as providing the user an option to Apply a template. In this screenshot, I am on the main branch, the file is named .gitlab-ci.yml. This name was automatically generated. I have selected the 'Apply as template' button and am hovering over the option 'HTML' under the Pages subheading in the resulting dropwdown.

Select the dropdown button titled, 'Apply a template'. Then, you can filter for, or navigate through the dropdown, you are looking for the HTML option under the subheading, 'Pages'.

A screenshot of the Gitlab's 'New file' screen with the HTML template applied. The screen contains the same dropdowns along the top as in the previous screenshot. However, now that a HTML template was applied, there is YAML in the code editor on the page that has been automatically inserted. This YAML contains information like, stage: deploy, script: mkdir .public. At the bottom of the screenshot is a Commit message which is: 'Add .gitlab-ci.yml' and below that, the field target branch is set to main.

Select this HTML option. As in the screenshot above, a text editor will be automatically filled with YAML config. Ensure that the only: section contains the name of your branch. For example if your branch name is main, ensure that the config under this is main. Ignore everything else on the page and then select the button titled, 'Commit changes'.

It will take roughly a while for your site to be uploaded, but that is the process. When it's available, you can navigate to 'Settings' and then 'Pages' to find your website's domain. As with Netlify, you can change the existing domain or upload a custom domain.

A screenshot of the Gitlab's 'Settings/Pages' screen. The screenshot is titled Pages and contains text that says: With GitLab Pages you can host your static websites on GitLab. Combines with the power of GitLab CI and the help of GitLab Runner you can deploy static pages for your individual projects, your user or your group. Below this, I have the Force HTTPS checkbox checked. Underneath this, a section titled Access pages tells me the URL that the pages are surved under. Selecting this link will take you to your site. Below this is a button for removing pages.

Wrapping up

I hope that this post helps you to get set up with your own website! Once set up, send me your websites, I would really love to see them.

Additionally, if you have any trouble or find any problems with this guide - just send me a message, I'm happy to help you if you get stuck!