How to Build a Static HTML Blog with squido in 10 Minutes

Static websites built using Jamstack architecture offer a way to create a modern website with incredible performance, cheap to host, and easy to maintain. Thankfully there are many different static website simplifying the process. I will be using , which aims to be a dead-simple (no dev) generator with all the built-in tools. generators squido Getting started Things you will need: installed. Git installed. Node.js A text editor, like . Visual Studio Code Open your Terminal and install globally: squido # npm i -g https://github.com/mrvautin/squido Speed things up by cloning the example blog Git repository: # git clone https://github.com/mrvautin/squido-blog-example my-blog Building Enter your new blog directory: # cd my-blog Build your blog: Note: The command creates a local webserver to view your new blog. The flag is to build, the is to watch for changes and rebuild if needed and the flag is to clean old files. serve -b -w -c # squido serve -b -w -c You can now view your blog by opening the following URL in a browser: http://localhost:4965 You should see: If you open up your new blog directory in a text editor, you should see: : This is the generated directory that will contain your blog HTML files build : The actual source files used to generate your blog source : Contains the javascript, CSS, and image files for your blog content : Contains the layout file which has the basic structure layouts : Contains the markdown files which contain the actual content of your blog posts/pages posts , , , , : Are all template files used to drive the layout of those pages 404.hbs index.hbs page.hbs post.hbs tag.hbs : Contains the config of your blog, including name, description, URL, pagination, and config.js more Let's clear out the old example markdown files from the folder by selecting, right-clicking and : lorem ipsum /source/posts Delete Then create a new file called in the folder with the following text: hello-world.markdown /source/posts --- title: Hello world permalink: hello-world description: Hello world date: '2021-06-16 19:17:00' tags: - hello - world --- ## Hello world Your blog will automatically rebuild and refreshing your browser will look like this: You can now edit the templates with your custom layout, change the logo, add your CSS colors later. Deployment Back in your terminal, initialize your local Git repository: # git init Create a new Github repository to make deploying your blog even easier: Visit . Github Jump back into your Terminal and link your new Github repository to your local one. First, run a Git status: # git status You will see this: This shows all our deletions and our new file. hello-world.markdown Add the changes: # git add . Create your first Commit: # git commit -m "Init" Change the branch to : main # git branch -M main Add your remote Github repository: # git remote add origin git@github.com: /my-blog.git Push your changes: # git push -u origin main Deploy to Netlify is a specialty static website host which will allow you to host your blog for free in a matter of minutes. There is no server management or complicated setup. Netlify After you have created a Netlify account, click the button: New site from Git Select from the Continuous deployment section. Authorize Github, and select your repository. Change the to Click and set a new variable to . Finally, click the button. Github my-blog Publish directory /build. Advanced NODE_ENV production Deploy site The result should look like this: You will have to wait a few seconds to a minute for your blog to deploy. You can then view your blog by clicking the link: You can finish here. However, by clicking "Domain settings" you can set up your own custom domain you have purchased from a domain register. Click and follow the steps to set up your DNS records to point to your new Netlify blog. Add custom domain There are other deployment options on the . There is also other help and guides on customizing your blog over on the . squido documentation squido website