How to Create a Simple Site With a Static Site Generator

The advent of the internet has brought a lot of companies and businesses online, making them more visible to their clients and customers than was previously possible. Any serious business out there already has a website or is planning on building one.

Asides websites for businesses, there are other categories of websites on the internet. There are news websites, gaming websites, academic journal websites, blogs, portfolio websites, and lots more. These sites are built by web developers using HTML, CSS, Javascript and depending on the situation, a server-side language like Python or PHP.

They can also be built with content management systems like WordPress or Joomla. But sometimes, these methods of creating websites can be overkill for something as simple as a portfolio website or a blog. In such cases, Static Site Generators or SSGs can be used.

Unlike dynamic sites where each webpage displayed to the user is unique and generated from a database by the server, Static Site Generators prepare this content by creating the HTML, CSS, and Javascript files needed beforehand. It then serves that same set of files to anyone that visits the website. This means the server doesn’t have to create a new instance of a website for each user, hence the word ‘static’.

Asides the ease that comes with creating sites with SSGs, SSG sites are much more secure as they do not have backends that could be hacked. They are also very fast and do not have hosting limitations as they are made up of just HTML, CSS, and Javascript.

There are several SSGs out there to choose from, each with their pros and cons. In this tutorial, we would be making use of one of the popular SSGs out there called Hexo to create a simple blog.

Installing Hexo

Before commencing, you have to install node.js and npm on your computer. You can do so by going here to install it. Installing node.js through that link, install npm automatically. You also need git installed on your computer as well. To get that installed go here.

After completing the installation, open a terminal on your computer and type in this command. This would only work if you have both packages installed sucessfully.

C:> npm install hexo-cli -g

This would install Hexo on your computer through the terminal. The whole installation takes about two minutes. After installation, you should have something similar to the picture above. Ignore the warnings you see after running.

Creating your site

The next thing is to create the website using hexo. To do so, you type into your terminal this command.

C:> hexo init Blog && cd Blog

The command that creates the site is before the && symbol.  cd Blog changes your directory to the just created Blog directory. You don’t have to call it Blog, though. It could be called anything. The Blog folder gets created after running hexo init Blog. For Windows Powershell users, replace the && symbol with a semi-colon. For cmd users, use just one ampersand symbol(&).

When it is done running, you should get a screen like this. You can ignore the vulnerabilities discovered during the initialization.

If you navigate to the Blog folder, you should see items like node_modules, scaffolds, source, etc. The Blog folder is created in the current directory of your terminal. Mine would be found in the C:/Windows/System32 directory. If you wish to create it somewhere else, you can change your directory in the terminal before running the command.

Before we start the server and see what the site looks like, we have to install some other dependencies for the site. To do that, type into your terminal the command below. Make sure you are in the Blog directory.

C:Blog> npm install

This should install the missing dependencies.

Loading the website

To see what the website you just created looks like, go back to your terminal and run the command below.

C:Blog> hexo server

You should see something similar to the image below. This means you can now access your website through the underlined URL. Clicking on the link opens a new tab with the website. You can also copy and paste the link into a browser. To go back to your terminal prompt or stop the server, press Ctrl + C

Changing your theme

If you are not okay with the way the default theme of the site looks, you can change it. There are more beautiful themes available that you can change it to. Hexo has a couple of themes on their website which you can check out.

You can also search for specific themes through the search box.

To change your theme, visit the link above and click on one of the available themes. It would lead you to its GitHub page. Copy the URL of the page and place it in the command below without the angle brackets. This would download the theme files from GitHub to the folder specified in the command.

Before you type in the command, press Ctrl + C to stop the server.

C:> git clone <github-url> themes/theme-folder-name

After that, change the theme property in your _config.yml file to aircloud. Your _config.yml can be found at the root of the Blog folder. The _config.yml controls certain things about the site like the title, subtitle, author, URL, etc. You can edit these properties by opening it in a text editor.

Rerun hexo server in the terminal and refresh the webpage, you would notice the theme of your website change.

Creating your blog post

Now that we have set up the essential things, we can move to creating the blog post. The majority of the work that would be required to create the post would be done using Markdown a lightweight markup language (You can learn how to use Markdown at markdownguide.org)

To begin, we need to create the blog post on the site. To do that, run the command below. You would have to stop the server first by pressing Ctrl + C.

C:> hexo new post “My Blog”

Running this creates a .md file —a markdown file which you can fill in with your content, and format using markdown’s easy to use syntax. The markdown file can be found at source/_post in the root folder.

Hosting your blog

Now that you have set up the site and created a blog post, the next thing is to host your website so that it’s visible to anyone around the world. There are a couple of ways to do this. You can host your site on regular hosting services like AWS, Google Cloud, etc.

You can also do this for free by creating a username.github.io website with GitHub. Netlify (a web hosting service, among other things) also gives you the option to create webpages from your GitHub repository. Of course, these methods would require that you have a GitHub account and know your way around it. To learn more about this, you can check here and here.

Conclusion

These are the basic things you need to know to create a simple website with Hexo. If you want to create simple sites with little or no interactivity, an SSG is a very simple solution for you. For more information on Hexo, you can visit their website at hexo.io.