I’m always amazed by Bamyan, a city in the central highlands of Afghanistan. The people are kind and hardworking, the young generation is curious and energetic, and the city is full of life, color, and history. When my wife got a job in local government in Bamyan, I saw it as an opportunity to use my web development skills to promote this incredible place.
We decided to gather reliable content and information and create a website to introduce more people to the beauty of Bamyan. Through our website, we hope to showcase the city’s rich culture, history, and people, and to make it more accessible to a wider audience. I was excited to use my skills to help promote Bamyan and share its wonders with the world.
So I sketched the first-look pages in InVision Freehand tool. Freehand is a great digital whiteboard for brainstorming with your team. Then designed the user interface and the prototype in Figma.
Then I decided to go with SSG stacks (Static Site Generator) to learn more about SSGs.
A static site generator is a software application that creates HTML pages from templates or components and a given content source. Most static site generators, including HexoJs that I used for my website, accept Markdown-formatted text files as a source, although SSGs is not limited to Markdown. You can find a list of SSGs in JamStack website.
I choose Hexo as it’s super fast and simple framework to build a blog platform that I need for my website.
$ npm install hexo-cli -g $ hexo init blog $ cd blog $ npm install $ hexo server
With above commands your website / blog are ready to open locally. To create a new page or blog post you just need run following command:
$ hexo new "Hello Hexo"
After customizing all your needs and template and creating your website’s pages, last step is to generate a production version and push it to your hosting server.
$ hexo generate
Now that you have all your statis site’s files generated, you need to host it somewhere on a server, There are free hostings like Github, Cloudflare, Netlify and Firebase.
I selected Firebase as my free hosting, Firebase is a Backend-as-a-Service (BaaS) platform provided by Google that offers a variety of services, including cloud storage, authentication, real-time database, hosting, machine learning, analytics, NoSQL, and more. It enables developers to build mobile and web applications quickly without needing to set up and manage server infrastructure. Firebase is well-suited for mobile app development too, with features like real-time database and scalability. Firebase provides a reliable, secure, and scalable infrastructure for running applications, with automatic scaling and security features built in.
You need to have account in Firebase, I believe you might already have a Gmail account, which is enough, If not create one!
Login to Firebase and create your project, then install the Firebase CLI, login, and initialize and link your project:
> npm i -g firebase-tools > firebase login > firebase init hosting > firebase deploy --only hosting