Easiest way to make a website

If you’re not following the web technology news, you might still think that to have a website available to the public, you need to rent out a server, maintain it yourself, load balance it, protect it from attacks, upload the files from FTP client, etc.

These days are long gone, and with the advent of all the ‘serverless’ startups we can forgo all of the hassle we had to deal with just a couple of years ago.

Now all you have to do is write your code, track it with git, have a repo somewhere on the internet and all the rest will be done for you automatically. I’ll explain how to achieve that, and mention many more conveniences in this article.  

Basics

HTML To write a page you have to know HTML. There isn’t really a way to get around that. Luckily this ‘language’ is very simple and if you know the basics of programming you can pick it up easily just by looking at a website that you like, and adapting their code to your liking.  

CSS Using raw HTML would net you with a very rough looking website. This is where the CSS comes in - we use it to make things look similar to our vision and behave well on any screen. This is probably the most evolving area currently on the web, as lately the support for styling options changes very frequently (which is a good thing!). This also means that if you want to know everything about this topic you must keep learning and reading about it.

To make a basic website though, you absolutely don’t have to - after you learn about Grid and Flex you can create any layout you can dream of, that is easy to maintain on any device (whatever you do, don’t use floats).  

Flavours of styling

The gripe that people have with CSS is that it’s very verbose and code reusability is hard to achieve. That’s where all of the alternatives come in like SCSS or TailwindCSS. SCSS sticks to syntax of normal CSS, while providing many conveniences to the developer.

Tailwind proposes an entirely different approach and moves all of the styling to HTML, through classes. It’s easily the fastest way to develop and due to many optimizations it does not create a gigantic file with all of the possible styles - it only includes the styles that are used throughout the project and minifies them automatically!  

Interactivity

To have interactivity on your page, you need JavaScript. If you’re feeling adventurous, by all means you can learn about it, but to create a basic website for your portfolio, or a restaurant with menus and photos - all you need is HTML and CSS. Common advice is to resist touching JavaScript whenever possible and stick to what HTML and CSS offers, which, against common belief, is actually a lot.  

Creating website

Where to start?

As mentioned before, all you need for a nice website is HTML and CSS. The problem is that for any serious project, you might end up with gigantic files that are hard to maintain and have parts of the code that are hard to reuse.

That’s where the Astro framework comes in. It provides us with a very simple wrapper around HTML and CSS, but grants us other superpowers like the ability to have components, building and minifying our applications and integrations with deployment services. It even lets you write your websites using the Markdown language, which it then converts to HTML.

This is useful when you have a blog and you just cannot be bothered to write HTML for the document - all you want to do is create content and let the code handle all the boring stuff!  

Writing first code

To get started with Astro follow the G short tutorial and initialize the new project on your computer. Note that you have to have N installed.

During the project setup you can select whatever template you want. When you’re starting from scratch you might want to choose the empty one, so you’re not bothered by any extra files. You’ll also get a question about using typescript. This should not matter, unless you dabble with JavaScript on your website, in which case you’ll have to manage it on your own - good luck out there!

If you chose to add Tailwind to your project you can follow t.

To learn more about how to use Astro, make sure you visit their documentation, but in short any .astro file in the pages directory will be a page on your website and its link corresponds to its place in the folder. Any .astro file in the components directory, will be available and can be imported in these pages and used however many times we want.

There are many more directories that have their own functionality like layouts or static folders and you can read more about it in the documentation.

In these .astro files you can write plain old HTML with CSS. This means that all you need for your website does not touch any JS so you can just focus on the important things.  

Git

For the next step to work and because it’s a good practice, you need to make sure you’re tracking your code with Git. Astro should initialize the repo for you, but you still need to upload your code to a service like Github or Gitlab.

There are plenty of tutorials on how to do that, but it does not need to be anything fancy - all you need is a way to push to Main and that’s it; you don’t even have to use branches, just the common git commands will be plenty.

After you’ve created a page, filled it out with your code, committed and pushed it to github we can get to showing it to everyone and deploying it!  

Deployment

Deployment traditionally involved having a computer running somewhere 24/7, managing it, uploading files to it by hand etc. To be honest - nothing changed, the only thing is that there are services that do this for us! There are plenty to choose from, but the one I use most often is N.

You need to sign up to their service. I advise you to do so through the Git service you’re using - Github for me, which will connect it to our repositories.

After you’re signed in and authorized Netlify to read your Github repositories all you have to do is click on the Add new website button, select Import and existing project option and from there you can see a list of all the repositories. Select the one you’d just uploaded and Netlify should detect everything else automatically. From there there is nothing else that you have to do, but click the deploy button.

Netlify will upload your website on their servers, give it a random URL (which you can change if you have a domain) and turn on a service that listens to changes on your repo, so every time you update your website it’ll be automatically updated.