Don't Make the Same Mistakes I did When You're Creating Your Website

Tue, Mar 16, 2021 5-minute read

I think as a computer science major it is a rite of passage to struggle when trying to make a customized website. As a computer science major and the daughter of a computer science professor it’s even more of a custom to one day decide that the best way to spend your time is creating a website from scratch. Of course, in my second semester of my first year of college I decided to begin the journey of website generation. It lasted about six hours on a Saturday and then I gave up. Maybe the inspiration wasn’t there, maybe it was too hard, I really don’t remember. Two years later I’m decided that I’m doing it. On October 15, 2020 I resolved that my website needed to grace the internet, and here I am. However, I didn’t really think it would be this hard…

I don’t know why I thought that I would be different from everyone else who has tried to make a website before, but wow, I have enjoyed my series of struggles in my week of trying out web development. Hugo makes things easy by providing so many themes to choose from when creating a website. Unfortunately, it doesn’t always work the first time around. Here is what I’ve learned so you don’t have to.

What you should know about making your website:

  • Please please please check how mobile ready the template you are interested in is

    I think I had a list of ten themes that I loved and almost all of them weren’t mobile ready: something that was important to me, and should be important to you too.

    • You can do this through developer tools! If you use Google Chrome it’s easy!

      Use the keystroke Ctrl+Shift+I


      1. Select the three dots in the upper right hand corner of your browser
      2. Select the more tools option
      3. Select the developer tools option

      The developer tools will open, allowing you to resize your screen! Test how reactive the theme you are interested in is to different screen sizes.

  • Knowledge of html and css are semi-important

    I started on my website journey with little-to-no knowledge of html and css, which made it difficult for me to understand how to customize the themes that I chose. So much so, that I had to switch my theme choice about halfway through developing my website

    • Check out the style.css file before you clone a theme and make sure you can understand the basics!

    • When editing your style.css file, ensure that you make a new, custom css file in your folder! Most themes’ GitHub repositories will give information on how to do this!

    • Developer tools are also super helpful when trying to change fonts, colors, padding and more!

      Use the keystroke Ctrl+Shift+I to open developer tools! Or follow the steps above!

      1. With developer tools open, click whatever object you are interested in changing (i.e. heading font, paragraph text, images)
      2. Developer tools will give all information about that object, including, possibly most importantly the file and line where the attributes of the object are located
      3. With the object information, change your css file where necessary
  • Use localhost when you’re first making changes

    The beauty of using Hugo is that the changes you make can first be run locally, before deploying your website! I created my entire website, first without connecting it to my domain. This helped ensure that all bugs were removed before I deployed!

    • Most theme templates give specific instructions on how they can be run in the terminal. Most Hugo sites use the command hugo serve, easy and simple to remember!

    • Running hugo serve or your theme’s equivalent command will generate a localhost, where your website is generated for your viewing pleasure

      ^Cmkapfhammer@kallistos:~/website/website2/websiteTwo/quickstart$ hugo serve
      Start building sites …
                      | EN  
      Pages            | 54  
      Paginator pages  |  0  
      Non-page files   | 33  
      Static files     | 10  
      Processed images |  0  
      Aliases          | 15  
      Sitemaps         |  1  
      Cleaned          |  0  
      Built in 249 ms
      Watching for changes in /home/mkapfhammer/website/website2/websiteTwo/quickstart/{archetypes,assets,content,data,layouts,static,themes}
      Watching for config changes in /home/mkapfhammer/website/website2/websiteTwo/quickstart/config.toml
      Environment: "development"
      Serving pages from memory
      Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
      Web Server is available at http://localhost:1313/ (bind address
      Press Ctrl+C to stop
    • Any change that you make in your repository, will update on localhost, as soon as the changes are saved

      Change detected, rebuilding site.
      2020-10-22 20:48:03.870 -0400
      Source changed "/home/mkapfhammer/website/website2/websiteTwo/quickstart/content/post/": WRITE
      Total in 16 ms
    • Stop running your localhost at any time with the command Ctrl+C

  • Even with the learning curve that web development can throw at you, HAVE FUN

    In between classes, studying, and papers, I have been working non-stop on this website. Even in the frustrating parts, where nothing worked, I pushed through the difficulties to get to the wonderful website that you are now seeing before you. It takes time to make a website, don’t give up!

Deploying to Netlify

When actually working to deploy my website I choose to use Netlify, a Git-based workflow and serverless platform that many developers use to build and deploy web apps. I had insignificant past experience using Netlify but was sure that I would be able to get my website up with no problem… unfortunately I was pretty wrong. Please check out my post Everything that went wrong when I was deploying my Hugo site to Netfliy and what you can do to make it go right for more information on my struggles and how I ultimately deployed my website.