loading...
Cover image for How to deploy a static website for free in only 3 minutes with Google Drive

How to deploy a static website for free in only 3 minutes with Google Drive

gaelthomas profile image Gaël Thomas Originally published at herewecode.io Updated on ・6 min read

This was originally posted on: https://herewecode.io/blog/how-to-deploy-a-static-website-for-free-in-only-3-minutes-with-google-drive/


Discover how to deploy a static website for free in only 3 minutes using Fast.io. A beginner's guide to doing it with a cloud storage such as Google Drive.

Disclaimer

In this article, I'm going to share with you a new service called Fast.io.

I'm not sponsored by them to create this article. I'm just writing on it because I found the solution exciting and useful to host a static website for free.

What is Fast.io

Fast.io is a solution created by Mediafire to simplify how the web. In a few terms, their goal is to make your life easier by making the web more accessible and manageable.

If today I'm sharing this website with you, it's because they launched it at the end of 2019.

How it works

With this solution, you will be able in a few clicks to connect to your cloud (Google Drive, DropBox, etc.), choose a website name, and deploy your content.

If your content is ready, only 3 minutes are required to put your content online and accessible to everyone.

Once your website is online, you can configure it, add a custom domain name, and connect Google Analytics to know how many people you are reaching.

I didn't tell you, but the service automatically updates your website once you modify the source files. For example, if you are using Google Drive to share your content, once you change something in your HTML page, it will be updated.
Fast.io - How it works

Available storage provider

I give you a list of available storage provider the day were I publish my article:

  • GitHub
  • Dropbox
  • Google Drive
  • Box
  • Mediafire
  • OneDrive

We can imagine this list is going to grow up with new services. What I wanted to show you is that you have many possibilities to host your static website.

Competitors

It exists different companies creating a solution to put online quickly a static website. The most famous solutions are GitHub Pages, Heroku, and Netlify.

I'm not telling you Fast.io is the best one, but what I like about it is the simplicity of deploying a simple website.

If you want to deploy something more complex like a Python Flask website, you can't do it with Fast.io.

In this case, I highly recommend using Heroku.

As I told you, I'm transparent with you. It's an excellent service to do some tasks.

What is a static website

Before showing you how to deploy your website, I think it's essential to define what is a static website and what is the difference with a dynamic one.

A static website contains web pages with fixed content. The content of your page is in HTML, and all users see the same thing.

For example, you can use this website type when you want to do a landing page for your website (a basic page with information about your product).

The main difference with a dynamic website is obviously… the dynamic part!

A dynamic website uses a server technology to build the page when a user requests the website.

For example, you can use this website type for your blog. Every time you're going to add a new article in your database, the website will display it.

It’s time to deploy your website

Are you ready to share your page to everyone? Let’s do it!

In this part, I will show you how to put your website online in a few clicks. I’m going to use a basic HTML page, but once you understand how Fast.io works, you are free to modify everything.

Feel free to send me a message on Twitter if you have any questions or to get the last updates and follow my activities.

1) Create a index.html file

You need to create an index.html file with your HTML code inside. I recommend you to start with something simple because you can update it later.

Save the file on your computer.

<!DOCTYPE html>
<html>
  <head>
    <title>My Static Website</title>
  </head>
  <body>
    <h1>My Static Website</h1>
    <p>
      Hello, I'm online, and everyone can see me!
    </p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Index.html example

2) Open Fast.io homepage

Fast.io homepage

All you need to do to start with Fast.io is opening the website. Once you did it, click on "Sign up now - it's free!".

3) Configure Google Drive

Fast.io - Storage provider

This page appears after step 2, and you can select a storage provider. Select "Google Drive".

If you want to create a website with another provider, you can do it later by adding them through your account page.
Fast.io - Connect Google Drive

Fast.io needs access to your Google Drive account to work. They will create a "Fast.io" folder to contains your websites. Click on "Connect Google Drive Now".
Fast.io - Select your Google account

You need to select your Google account to link it with Fast.io.
Fast.io - Allow Fast.io to access Google Drive

You need to allow Fast.io to access your Google account to link it correctly.
Fast.io - Create your account

Your account is ready, choose a password then click on "Create Account".
Fast.io - Welcome page

When your account is ready, a "Welcome to Fast!" page will appear. Click on "Let's begin!".

4) Create your website

Fast.io - Dashboard

You are ready to create your website and share it with everyone! Click on "Add New Site".
Fast.io - Choose a website name

Choose your website name and type it in the input box. When you finished, click on "Next".
Fast.io - Choose a website type

Fast.io allows you to create three website types: File Sharing website, Web Pages, or Files Browser website.

In our case, we will select "Web Pages" because we want to host an HTML web page.

If later you want to create a website to share some documents, you have to go back to your dashboard, create a new one, and select File Downloads.
Fast.io - Choose a storage provider for your website

Once you clicked on "Web Pages", you need to select your storage provider. Click on "Google Drive".
Fast.io - Choose your website URL

Choose your website URL and type it in the input box. When you finished, click on "Create Site".
Fast.io - Successfully created website

You did it! Your website is online and available at the URL you chose. In my case, you can find my site on mygoogledrivewebsite.imfast.io

5) Upload your index.html

If you open your website, you may notice an error because you didn't upload your index.html file on your Google Drive.

Two ways to do it:

  • Open your Google Drive and search for Fast.io folder, then the folder of your website (in my case, "mygoogledrivewebsite.imfast.io").
  • On the step 4 success page, click on "See your Google Drive".

Fast.io - Google Drive before upload

Once you did it, right-click with your mouse and select "Upload files". A new window will open, find your "index.html" file, and select it.
Fast.io - Google Drive after upload

Wait for a little before the change appears on your website.

6) Celebrate!

Fast.io - Website demo

Spread the word to all your friends! Your website is only, and everyone can see it!

🎉 Please share it on Twitter by clicking here! 🎉

7) Bonus

If you are curious and want to configure everything, you can go back to your dashboard and click on your website.

You will be able to link your website to Google Analytics (visitors statistics), change domain name by yours (for example, mywebsite.com), and a lot more!


If you want to read more content like this, you can follow me on Twitter where I share content about programming, self-development and other advice to reach your goals as a developer!

Discussion

pic
Editor guide
Collapse
osde8info profile image
Clive Da

fabulous i think you might have just invented a whole new architecture ! have a look at is DSR the future ?

Collapse
gaelthomas profile image
Gaël Thomas Author

Thank you! I checked your post. I'm happy to see my tutorial inspired you to create something! I'm waiting to see the result of your work.

Collapse
osde8info profile image
Clive Da

wow thats great motivation ! thanks ! i promise to publish SOMETHING today !

BTW i was up late yesterday publishing my node express pug 4 glitch & zeit demo so 'today' means before 2am tomorrow 😄

Collapse
sqlmancerqueuellc profile image
SQLmancerQueueLLC

I recently did something similar with a Google Cloud Storage bucket and a domain that I registered through Google Domains. All I needed was my Google account and some help from the Google documentation (cloud.google.com/storage/docs/host...).

I'm a little conflicted when I read about stuff like fast.io. On one hand it seems simple and convenient. On the other hand it feels like it adds something extra that isn't really necessary.

Anyway, I enjoyed reading the article. Thanks for sharing your knowledge and enthusiasm.

Collapse
gaelthomas profile image
Gaël Thomas Author

In my opinion, there is a lot of tools available on the web to host and deploy websites.
Every tool is "specialized" for one type of deployment. It depends on what you need and what you prefer (also it depends on the price of the solution).
For example, I think this solution is pretty good to deploy fast or for people who are not very experienced but want to put their site online.

Thank you for your feedback! Glad you like the article!

Collapse
lucis profile image
Lucis

Can't argue simplicity compared to Netlify. You can literally open it (logged in), drop a folder from your OS, and the site is deployed.

Of course, alternatively to configuring to run builds automatically from each push on a Git Repo.

Collapse
gaelthomas profile image
Gaël Thomas Author

That's why I decided to share these tools. It's so simple.
I didn't make a beginner's guide for Git because I wanted to differentiate my articles from other static hosting posts (most people do a tutorial with Git).
However, as you say, it's working pretty well with Git also.

Collapse
osde8info profile image
Clive Da

nice heres mine running from github osde8info

Collapse
gaelthomas profile image
Gaël Thomas Author

Congratulations! Did you discover the tool with this article?

Collapse
osde8info profile image
Clive Da

yes never heard of fastio before

Thread Thread
gaelthomas profile image
Gaël Thomas Author

Then, I hope you enjoyed my article and the tool! Thank you for sharing your website!

Collapse
manishfoodtechs profile image
manish srivastava

Nice article

Collapse
gaelthomas profile image
Gaël Thomas Author

Thank you for your feedback!

Collapse
shaijut profile image
ShaijuT

Thanks, but What if I want my custom domain name point to Google drive hosting ?

Collapse
gaelthomas profile image
Gaël Thomas Author

Hello, as I said in the article, you can go back to the dashboard and click on your website.
You will find some options in the left pane. In "Domains" you have the possibility to configure a custom domain name. Hope it helps you!

Fast.io - Options

Collapse
devpato profile image
Pato

Have you tested firebase deployment? I like it a lot. I'm going to give yours a try for sure

Collapse
gaelthomas profile image
Gaël Thomas Author

I never tried Firebase deployment. I will give a try. Thank you for sharing this tool!

Collapse
fyresite profile image
Fyresite

Wow, this was very through... Great article!

Collapse
gaelthomas profile image
Gaël Thomas Author

Thank you for your comment! I'm happy you liked the article. Keep coding!

Collapse
anjalbinayak profile image
Anjal Binayak

Thanks, it made me easy for completing my school project

Collapse
gaelthomas profile image
Gaël Thomas Author

Perfect, I'm happy it helped you with your school project!

Collapse
mayur profile image
Mayur Bhonde

Wow, this looks really interesting. Might give it a try. ✌🏾

Collapse
gaelthomas profile image
Gaël Thomas Author

Send another comment when you tried it! I'm curious to get your opinion!

Collapse
zenulabidin profile image
Ali Sherief

Question, If I have a static website, can I make it dynamic by connecting it to Firebase?

Collapse
gaelthomas profile image
Gaël Thomas Author

I‘m not sure about it.
A static website can use javascript and, for example, JQuery.
Using Firebase looks to be able with a server-side language. In that case, you are not able to do it.
However, you can host a static website with Firebase. Maybe you can have a look and check if it’s possible to make a dynamic website.