Create and publish your first website and blog.

Post COVID-19, our daily lives have become more digitized than ever before, with more and more businesses and professionals moving the bulk of their work online, it’s an important milestone to achieve for any developer. In this blog post, I will go through the steps to quickly get your identity on the web.

Domain

First thing we need to do is buy ourselves a good domain. Skip to the next step if you already have one! A good domain is usually a short and memorable domain especially if you are targeting a specific group of people. For a personal portfolio, it’s always a great idea to have your name for your domain or even an internet pseudonym. I use Porkbun to buy domains, but feel free to use any other service. Come back to this tutorial once you’ve bought yourself a domain.

Creating your website

Github pages is a pretty good place to host most of your websites, personally though I prefer Netlify for the entirety of my domains as they have a really sweet DNS management system!

We’re going to use Eleventy, which is a pretty cool static site generator tool similar to that of Jekyll. You can imagine it to be a more bare bones alternative to WordPress with a lot more creative freedom!! Which means you can maybe start a blog today and even host an entire app on one of the pages!! Eleventy supports various layout and content filetypes (.njk, .mdx, .html, .md ). So you are all set for creating websites right from the beginning. To not go too much into the details, I have created a template repository on github that you can fork and make changes to suit your own liking. If you want nothing more than a simple blog that gets you started with writing and publishing on the web, this is it!

Link to the eleventy template: Eleventy Template

Add your details

Once you’ve finished creating a repository from the template, we can get started by forking the repository to our local computer to make changes. So go ahead and fork it to your computer!

Before we make any changes to the codebase we need to install our dependencies.

Now you can give the website a good first look by running npm start and heading over to localhost:8081.

The website looks amazing!! For now it’s just a small website with a weblog attached to it, but thanks to eleventy you have the freedom to make this website pop in your own creative ways! If you look at the code structure, there’s a lot of things happening over here, and it may seem daunting at first, but don’t worry, everything is clearly organized in such a way that your focus is only and only on creating awesome content!

Now let’s start from the beginning:

• _data – This folder is used to store all your global site data, which may include your personal details, global navigation, and any static data you’d want to display and have access to throughout the website.
• _includes – This folder is very self explanatory, but I’ll go over it once again. Here you can store all of your template files. If you’re coming from a react background, think of this as the place to store components. I have created a folder called layouts explicitly to store different page layouts we have in our website.
• _site – This is the default output folder for eleventy. Since eleventy is a static site generator, it will go through our website and render the output from template engines and other plugins here. We will use this build folder for hosting.
• css – To store any styles for our website.
• img – Images for our website as well as the blog posts
• posts – All of our posts! The cool thing about eleventy is that we are not tied to markdown. We can use mdx for example where we can include our react components inside markdown files!!!
• .eleventy.js – This is the configuration file for eleventy. We can tinker with eleventy’s settings, add folders like css and img into the build pipeline so that they can get copied into the _site folder etc.
• index.liquid – This is our home page!
• netlify.toml – Instructions for netlify to build our website!

I will go to _data/site.js file and make changes according to my needs:

Once this is done, all that is left to do is drop in some blog posts and publish our small blog!!! 😍

I’ll go ahead and use the example blog posts for now, but do feel free to add your own blog posts if you already have them! And don’t worry, you can always come back to this repository to edit and make changes to the blog post, or if you’re feeling adventurous, even the website theme!

Netlify & DNS

If you haven’t already, go and make a netlify.com account and connect your github account. When you are on the dashboard, click on "New site from git" to start the process!

Once you’re in the process, select your github repository and hit next to the deployment page.

As you can see, netlify automatically pre-filled our build instructions. All we need to do now is slam that deploy button!!!! Whoohoo!!

Alright, now we’re in the game. Once your website is published, you should get a temporary url from netlify that you can visit to check how your website has deployed and do any final checks. Now before we brush our hands off, we have one last thing to do. DNS. We need to connect our website to our domain, but to do this, we need to use netlify’s DNS nameservers instead of our domain name registrar’s DNS servers. You will need to go to Netlify Domains in your teams dashboard and add a new domain.

Once you’ve added the domain, you will need to your domain settings (just click on the domain in the domains section) and copy these DNS records.

• dns1.p04.nsone.net
• dns2.p04.nsone.net
• dns3.p04.nsone.net
• dns4.p04.nsone.net

Once you have the DNS records handy, we will now head out to our own Domain registrar and go to our domain settings, and then, one by one, add the new DNS records.

🚀 Go Live!

This is the last part!! Alright, all we need to do now to make our website live for reals is to point our website to the newly added domain. Go to site settings and select "Domain Management" in the side panel. Here, you can type in your domain name (as long as it’s not tied to any other domain!) and save it. What next? Well, you just need to wait for somewhere around a couple of mins to 24 hours for the DNS servers to update themselves to the new website, in most cases this should be within an hour or so. Aaaaandd you’re live!! 👏 Congratulations on your first website!!!