How to Create an Extremely Fast and Secure Static Website for Free in Minutes
Ever thought about building a blog, a company site, a portfolio site, documentation, a single landing page or a website with thousands of pages ? By the end of this article, you will be able to create one. Generally, you need to know HTML, CSS and some JavaScript to develop a website. But, for this, you don’t need much coding skills. You just need basic computer skills.
To put up a website, you need hosting where all your files will be uploaded. Whenever someone brows your website, these are the files that are presented to the user on the browser. Let’s get started with what you need to have and know:
Terminal (Command prompt):
For this article having a minimum knowledge of Terminal (Command prompt) command of your OS is a plus.
Google Account
I believe you might already have a Gmail account, which is enough. If not create one.
Domain
This is optional. There are various domain name providers; additionally you can buy one at Google. You can find a list of domain name providers. It is as simple as shopping on Amazon.
Hugo
Hugo is a Go language-based tool and one of the most popular open-source static site generators with its amazing speed and flexibility. Hugo provides a robust theming system that is easy to implement yet feature complete. You can view the themes created by the Hugo community on the Hugo themes website. You can install Hugo from here.
Firebase
Firebase is a mobile and web application platform, acquired by Google a few years ago. Firebase offers hosting as one of its features. However, many mobile developers use it for Analytics, Notifications and Crash Reporting of apps. We are going to use it for hosting of our website.
Node.js
Node.js is an open-source JavaScript run time built on Chrome’s V8 JavaScript engine. For this tutorial, you need it to be installed on your machine for Firebase tools to work. You can download and install it from here.
Step 1: Install Hugo on your machine
There is lots of talk about “Hugo being written in Go”, but you don’t need to install Go to enjoy Hugo. You can follow Hugo’s official installation guide here. However if you have GO & Git installed in your system The easiest way to get started is to clone Hugo in a directory outside of the GOPATH, as in the following example:
mkdir %USERPROFILE%/src
cd %USERPROFILE%/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended
If you are a Mac user, substitute the %USERPROFILE% environment variable above with $HOME.
Step 2: Create a template site
Head over to the location where you have decided to create your website and enter the command below:
hugo new site <path_to_folder>
At the given location you can see a folder structure as shown in below image.
These folders are just placeholders for your content. All the text content of your site goes to content folder. If you want to add a post, create a folder named “post” in the “content” folder and start adding your files. These files have an extension of “.md” which is Markdown files. You can run below commands to add new files.
hugo new file-name.md
Markdown is a plain text formatting markup language. It is pretty and easy. There are umpteen guides on how to approach Markdown, here is one.
Step 3: Set a theme for the site
Hugo themes are powered by the excellent Go template library and are designed to reduce code duplication. They are easy to both customize and keep in synch with the upstream theme.Hugo has a great community. Their themes site is enriched with different categories of website themes. Head over to it and select a theme that suits your requirement. You can install all available Hugo themes by cloning the entire Hugo Theme repository on GitHub from within your working directory. Depending on your internet connection the download of all themes might take a while.
git clone --depth 1 --recursive https://github.com/gohugoio/hugoThemes.git themes
To install a single theme change into the themes directory and download a theme by replacing URL_TO_THEME with the URL of the theme repository:
cd themes
git clone URL_TO_THEME
Alternatively, you can download the theme as a .zip file, unzip the theme contents, and then move the unzipped source into your themes directory. >Always review the README.md file that is shipped with a theme. Often, these files contain further instructions required for theme setup.
Step 4: Set up your preferences
Copy the config.toml file to the root folder of your website from the theme folder.Open the config.toml file and start editing it. Give your name and other details you wish to show up on the website. Some themes support Google Analytics so that you can track the user visit count etc. You can give your GA Id to gather data.
Step 5: Set up a Firebase Hosting Project
As I mentioned earlier, Firebase is a beautiful mobile platform with a ton of features. I used Firebase hosting to host my static website generated via Hugo. To use Firebase services use your Google account and login to Firebase website. Click on “Add project”. Create a project by giving it a name. You will be shown an overview page. Now you should click on “hosting” in the Develop section of the sidebar and follow the guidelines.
Step 6: Set up Firebase tools on your machine
Open your terminal/command prompt on your machine and type the command below:
npm install -g firebase-tools
The above command installs the Firebase-tools package. You need to execute a few more commands to be able to deploy your website directly.
firebase login
This command connects your machine to the Firebase project. It enables you to list and select the project to which you want to push your changes.
firebase list
You can run above command to see the project which you have created. Finally, you need to initialize the root folder of your website as Firebase project root.
firebase init
It will ask you some questions like 1. Which Firebase CLI features do you want to setup? Answer: Hosting. 2. Select a default Firebase project for this directory Answer: Select Firebase project you have created in Step 5. 3. What do you want to use as your public directory? Answer: public 4. Configure as a single-page app? Answer: Yes/NO
Finally! Firebase initialization is complete.
Step 7: Verify your website locally
Run below command to check your site locally on your machine.
hugo server -w
Hugo comes with a light-weight high-performance web server, where you can check all your changes. Make sure that all your images are put up in static/img folder. In an iterative process, change your config.toml and verify those on browser. Below is the port on which your server will be running.
http://localhost:1313
Step 8: Deploy your website
Type in below command to generate your site and push it to corresponding Firebase project which you have configured in Step 5.
hugo && firebase deploy
Step 9: Connect it to your domain (optional)
Firebase provides an option to connect your domain to Firebase app. Click on connect domain and give your domain and add the TXT records to verify your domain ownership.
Step 10: Create a post
Creating a post is pretty simple. Hugo understands markdown files. Just head over to content->post folder (folder location depends on the theme). Create a markdown file. Review the README.md for instruction. Repeat the Step 8 to see the results.
