How I set this website up 💲Zero cost💲*

“Do one thing every day that scares you.” ― Eleanor Roosevelt

Thanks to Ibrahima Ndaw¹. I referred to his article for the base setup. Also, thanks to Omkar Prabhu for reviewing the first published draft of the website 🙏🏽.

Before I get into the mechanics of it. Let me clarify a couple of questions.

Will you be able to do this on your own after reading this article?

Yes, if you are anyone who deals with building software - doesn't matter if you are an undergraduate or a working professional. You should be able to do this with a little help.

If you are not technical, you can reach out or take help from any of your acquaintances who fit the above criteria. After the initial setup, you should be able to make changes or publish new posts by understanding very little tech. You can get away using just plain text² and using a GUI tool like GitHub Desktop to publish your changes⁸.

The time required for an initial setup is under 30 minutes. Yes, you will be faster than pizza delivery! Customizing is completely up to you and how much you want to indulge.

Why am I blogging? Why should one anyway?

I find myself mentoring people officially and otherwise. While some of the advice is personal and customized to a specific person or situation, there are a lot of common pieces. This is my attempt to publish some of the knowledge from several of my interactions.

P. S. Nothing that I write here, or say otherwise has to be the absolute truth. If you feel otherwise, and if you care, reach out and I'd be ready to listen 🙂.

Secondly, sharing is good. Yes, I am one of those people. If I stumble upon something new and interesting, I will be advertising it to at least 10 people. I feed off that kind of energy. I believe in creating an environment where everybody learns and shares. We get more creative from the collective knowledge base.

I've been fortunate to have learned from the greats. If something can help more than one person, then it should be a blog. Not an email or a text message. Why? Because, you have only so many keystrokes left in your life 🙂.

Why now and not earlier?

• I wanted to do something scary. Putting views out in public under your name is difficult, at least for people like me. I'm trying to get used to it.
• It is quarantine time, do I have to justify anything any longer? Just kidding, but it is partly true.
• Lastly, there are a lot more options available these days, and I finally found a setup and workflow that meets my requirements.

What are my requirements?

• Own my content³, kind of.
• Own its storage.
• Not worry about any hidden terms and conditions from other free services.
• Ensure low cost. Zero, if you discount the amount paid for purchasing your domain name.
• Use Markdown, which is very close to plain text.
• Deploy automatically.
• Version the content easily.
• Host and maintain the server with minimum effort or cost.
• Overall a workflow without friction, that let's me put my thoughts out there easily, in seconds.

~ ▪ ~ look away, and rest your eyes ~ ▪ ~

Instructions for the initial setup

Okay, so you're still here. So, here goes. You will need to follow the below steps to get what I have promised you. It is just 15 steps!

1. Create a new GitHub account or log in using an existing account.
2. Duplicate the blog-template repository.
   • You can name the new copy appropriately
   • You should mark the forked copy as private
3. Create Vercel account. You can sign up using your GitHub account.
4. Import your project into Vercel
   1. Click on Import Project
   2. Click Continue under Import Git Repository
   3. Copy the URL of the new git repository from Step #3 above and paste it in Vercel
   4. Click Yes to answer Is this your personal GitHub account?
   5. Select Personal Account to answer Select Vercel account
   6. Select Only select repositories and use the dropdown to select the newly created repository then click Install
   7. Click Deploy under Import Project
   8. Wait and watch until you Vercel congratulates you 🥳
   9. Click on Visit to verify deployment. It will open a dynamically generated link with an arbitrary name.
   10. Once done verification, you can return to the tab where Vercel was open and click on Dashboard to review the details.
   11. Note: This and the below steps are optional if you just want to try things out. Also, This is the only place that you'd have to pay . Click on the Settings tab. Here you can click on Domains and enter your custom domain⁴ if you have bought one. Vercel will initially say Invalid Configuration and guide you to fix this.
   12. Now simply navigate to your URL with your custom domain and you should be able see and play with your very own website!

Instructions for the local setup:

1. Clone your new repository locally
2. Using your command terminal navigate into the folder where you cloned the repository and enter the below commands. i. npm install ii. npm run dev
3. This should start the server locally and you should be able to view the website locally in your browser on the same machine by going to http://localhost:3000
4. Now you can open the folder where you cloned the repository and edit the files in your favorite editor. Your changes should reflect automatically.
5. Feel free to make changes to the pages\about\index.mdx file to change the About page.
6. You can add content under the pages\blog folder to add your blog posts

Workflow to publish your changes (this assumes your have done steps 1-3 from the local setup above 👆🏽)

1. Make changes. Let's change the name in the pages\about\index.mdx page.
2. Verify the changes locally on your browser by going to http://localhost:3000/about
3. Commit and push changes to GitHub
4. Wait for about 30 seconds. You're done!

If you find something that can be improved, or if something needs to be fixed. Feel free to raise issues in GitHub and I'll tend to it. Think of it as your contribution to open source.

I will work on updating the documentation here.

What's the box made of?

It is a simple Next.js in GitHub. Vercel provides CI and hosting. The project has MDX packages added to let you create content using Markdown.

Other things you will need to do

• Add metadata to change how your the preview for your website looks like⁵
• Add analytics to help you with the information about user traffic on your website⁶
• IMPORTANT: more than 80% of your readers will read your content on mobile phones. So make sure it fits right on smaller screens.

What is not included?

• Interactions with your readers on the article page via comments or likes. You can rely on Twitter, LinkedIn, Reddit or WhatsApp. The other option would be to enhance this setup to add a database and write more JavaScript to make your page more interactive.

• You will have to use the same channels as above to notify your readers about any new activity or new posts. if you don't want to get your hands dirty to host a RSS-feed or a mail server

  Both of the above will be a one time thing.

BONUS: While researching this I found another option using Notion⁷. It requires even less technical knowledge after setup and you get a WYSIWYG editor with all the Notion goodness. Why didn't I take it? I didn't want to add a dependency. Also, I have experience with technology so, the above gives me more flexibility.

~ ▪ ~ breathe ~ ▪ ~

That's it, folks! You've been empowered. Off to host your words about your most favorite things in the world or simply to host your profile as an About me page. You have been empowered! Happy Halloween! 🎃🦇💀👻

For more fun posts like these, click here to see a list of all my posts