In this article, I would like to show you a fast and relatively simple way to create, host, and maintain your website and blog totally for free.
First, let's see what you can have without putting in any work. Check out the Default template.
Of course, this is just a demo. It is an initial template which you'll get using Harold - static site generator. If such a demo isn't enough, I built the whole julian.io using Harold.
You can, of course, modify everything there. From overall layout structure, going through JavaScript interactions and ending with unique post lists configurations.
You are probably thinking, ok, that's great, but I bet that it is very complicated and tricky like all other static site generators out there. That's not true. You'll be able to write in standard Markdown files. You can even use some desktop-based app to put your generated .md files in the proper place. All will just work with the default template.
Ok, and what about hosting? Is it also for free? Yes. Thanks to such services as GitHub Pages or Netlify, you can host your website for free. It is straightforward, and I'll show you how to do this in this article.
What is this Harold anyway?
Harold is a simple tool that generates static sites, blogs, etc. You only need to prepare your articles in Markdown files and configure your pages using Handlebars templating. It might sound more complicated than it is. So don't worry.
The best place to start with Harold would be the documentation site: https://www.haroldjs.com/docs/getting-started. But in short, what you need to do is to run :
npm init harold-app name-of-your-app
It will generate an initial structure similar to this one:
https://github.com/juliancwirko/harold-default-template-demo.
When you go to the newly created directory and run:
npm start
You'll get the initial website running at localhost:3000.
When you go to src/posts, you can start adding Markdown files and writing your stories. You'll find a couple of examples there. The important thing here is that you'll always need to provide at least three variables, layout, title, and publicationDate. All others are optional.
Every post can use a different blog layout. That's why you need to define one. Blog layouts should be placed in src/blog-layouts. These are standard Handlebars templates (.hbs files). If you don't know what Handlebars is, don't worry. It is a sort of enhanced HTML. But of course, if you want to modify the structure, you would need to learn a little bit about it. Check their docs: https://handlebarsjs.com/.
I don't want to spend a lot of time on Harold and how to use it. I will probably write some more detailed articles later. As I wrote initially, the best is to watch a quick walk-through video on Youtube and read the docs.
For now, what you need to know is that when you open your build directory, you'll find all HTML, CSS, and JavaScript files there. It is your whole website, and we will host it from that directory.
Hosting with Netlify
First, let's see the more straightforward solution, at least for me, and this will be Netlify. It is a service focused on simplicity when it comes to static site hosting. They provide many additional features, but what is most interesting for us is hosting from the git repository.
Netlify allows to point to the repository, configure build processes and destination directory. Then on every push to that git branch, Netlify will trigger build and deployment processes. So you will only need to make changes and push to the repository hosted by GitHub, Bitbucket, or GitLab.
Here is how to do this: Step by step guide deploying on Netlify
And if you prefer I prepared some quick walk-through video using my accounts here:
Hosting with GitHub Pages
Hosting with GitHub Pages service is a little trickier, but there is a fast solution. You can use GitHub Pages in two ways. The first one is to host your main website using a repository name like yourusername.github.io. When you create such a repository, you will host from the before-mentioned domain without subdirectories. It is an excellent option when you want to make your main personal website. There is a catch. Because we want to host our site from a specific folder, as in the Netlify case, it would be a build folder, we need to point to it somehow. The problem is that GitHub Pages will search for files at the root of a git branch. The only exception is the docs directory, which you can choose. For deployment, it makes no difference because we won't show this directory anywhere so that we can use it. To be able to do that with Harold, you would need to configure the output directory name. You can create the .haroldrc file in the root (next to the src directory). Then the contents of it should be:
{
outputDirName: 'docs',
}
I prepared some quick walk-through video using my accounts here:
You can also check the docs.
The second way of doing GitHub Pages is to host some projects from a subdirectory. It will look like yourusername.github.io/yourproject. It will allow you to host multiple projects as separate websites from separate repositories. The whole configuration process with Harold is similar. Also, development is the same, and we just need to tell it that we will host in a subdirectory. It also relates to every other use case when we must rely on subdirectory-based hosting. So, additional configuration is to add the name of the subdirectory:
{
outputDirName: 'docs',
hostDirName: 'yourproject'
}
You'll find an example of such a project here: https://github.com/juliancwirko/testing-github-pages
Summary
I showed you how fast and straightforward it is to build and host your website and blog for free. Harold is open-source and free-to-use, and services like Netlify or GitHub Pages will let you host your website for free. What is excellent they will give you SSL and CDN for free.
I'll continue to work on Harold because it is a tool for my projects. I use it for landing pages, my blog, and even documentation websites. I'll publish the third template for docs pages very soon, so follow me on Twitter and Github.
Top comments (0)