How to Make a Website 101

Overview

In this beginner guide, I'm going to walk you through the essential steps to build your first website. We'll start by talking about domains and finding the right web hosting provider. Then, we'll dive into setting up SSL encryption and handling technical stuff like SSH connections and Composer installation. Finally you’ll spin up Automad so you can build your website without knowing any coding.

Required Skills

  • Hold a computer mouse
    • Find letters on the keyboard
      • ctrl+c, ctrl+v
        • Read instructions carefully

          Step by Step Instructions

          1. Domains
            1. Web Hosting
              1. Setup SSL Encryption
                1. Open Terminal / Console / Shell
                  1. Establish SSH Connection
                    1. Install Composer
                      1. Install Automad

                        Let's Go!

                        Now, let's dive into each section step by step to help you build your website.

                        1. Domains

                        Before we delve into the technical aspects, let's clarify the importance of domains. Domains serve as the address of your website on the internet, allowing users to access your content easily. Choose a domain name that reflects your brand or project. You can use websites like GoDaddy or Domain to check if your desired domain is still available. I suggest to choose a web hosting provider that includes a few domains.

                        2. Web Hosting

                        What is a Web Hosting Provider?

                        A web hosting provider is a service that stores your website's files on servers, making it accessible to users worldwide. It provides the infrastructure and technology needed to keep your website running smoothly. Of course you have to pay for that.

                        Why do I need one?

                        Web hosting is essential for making your website available online 24/7. It ensures reliability, security, and scalability for your website. The alternative of putting a computer somewhere in your basement and configuring everything yourself is just too much to deal with.

                        Technical Requirements for the Provider

                        Include Domains: Integrating domain management within your web hosting provider simplifies the setup and management process. It makes your life better.

                        SSL (Secure Sockets Layer): Ever noticed the little lock icon next to the address in your browser? You want that. SSL encryption secures data transmitted between your website and its visitors, enhancing security and trust.

                        SSH (Secure Shell): And SSH provides a secure way to access your web hosting server remotely, enabling efficient management and deployment of your website. More on this later.

                        Suggested Provider for this Tutorial

                        For this tutorial, I recommend the all-inkl.com Premium plan. SiteGround also seems to offer all the suggested features, but I have not tested it.

                        Once you have a Web Hosting Provider you can continue with step 3.

                        3. Setup SSL Encryption

                        SSL encryption ensures that data transmitted between your website and its visitors remains secure and private. Follow the provided link for detailed instructions on setting up SSL encryption with your hosting provider.

                        SSL setup instructions

                        4. Open your Terminal / Console / Shell

                        This is the hacker stuff. At least it looks like that when you have this black window with white text open. But don’t worry, with a little help of AI you can fly through it. You need to open it now so we can access the web server in the next step. Here’s how:

                        Mac:

                        Spotlight Search: Press Command + Space to open Spotlight Search. Type "Terminal": In the search bar, type "Terminal" and press Enter. Terminal App: Click on the Terminal app icon that appears in the search results.

                        Windows:

                        Start Menu: Click on the Start Menu button located at the bottom left corner of the screen.Search for "Command Prompt" or "PowerShell": In the search bar, type "Command Prompt" or "PowerShell".Open the App: Click on the Command Prompt or PowerShell app that appears in the search results to open the terminal.

                        5. Establish a SSH Connection

                        Okay, how the heck do you get into this server that sits somewhere on the other side of the internet? You can’t just plug a monitor, mouse and keyboard into it, right? So you need to use the terminal from your computer to access it. SSH (Secure Shell) allows you to securely connect to your web hosting server remotely. Refer to the provided link for instructions on enabling SSH connections with your hosting provider.

                        SSH setup instructions

                        After finishing the tutorial above, connect to your server by using (on Mac):

                        ssh username@hostname

                        Now you should be in this location in your console:

                        /www/htdocs/<login-name>$

                        You can continue with the Composer installation in this folder.

                        6. Install Composer

                        Composer operates as a dependency manager for PHP, enabling you to declare the libraries your project depends on and manage them effortlessly. It automates the process of installing, updating, and removing packages, significantly simplifying the management of dependencies.

                        Run the following command to download Composer globally on your server. This command retrieves the Composer installer script and executes it, installing Composer globally for all users:

                        php -r "copy('<https://getcomposer.org/installer>', 'composer-setup.php');"
php composer-setup.php
php -r "unlink('composer-setup.php');"

                        This will download the composer.phar file to your server.

                        Verify Composer Installation: To verify that Composer was installed correctly, run the following command:

                        composer --version

                        This should display the installed version of Composer.

                        7. Automad

                        Automad is a flat-file content management system (CMS) that simplifies website creation and management. Follow this tutorial to get Automad running on your server.

                        Conclusion

                        That’s it, you can start building your website now! There’s a ton of information on the Automad website that you can reference when tweaking your website.