Developer

How to Make Your Website

How to Make Your Website

Table of Contents

Introduction

Hello and welcome to my third blog! If you’re here, I’m assuming you want to make a website, perhaps similar to tortiebear.com. This blog will outline the following:

  1. Background: A high-level overview of Tortiebear’s tech stack and decision-making process towards it.
  2. Tutorial: Easy steps to get the Simple Blog template by Little Sticks up and running, assuming beginner-level knowledge in web development.

Background

Tech Stack Info

  • Astro
    • Role: Front-End Framework
    • Description: Astro is a modern front-end framework for building fast, content-focused websites. It allows you to write your website using less client-side JavaScript, leading to faster page load times. Astro supports various front-end frameworks and libraries, making it versatile for different development needs.
  • Tailwind CSS
    • Role: CSS Framework
    • Description: Tailwind CSS is a utility-first CSS framework that allows for rapid UI development. It provides a wide range of predefined classes that can be combined to create custom designs without writing lots of custom CSS. Tailwind is known for its flexibility and ease of customization, making it a popular choice for developers who want to quickly build responsive and visually appealing websites.
  • AWS Amplify
    • Role: Hosting/Backend Services
    • Description: AWS Amplify is a set of tools and services from Amazon Web Services that help front-end web and mobile developers build scalable full-stack applications. In your case, you’re using Amplify primarily for hosting your website. Amplify integrates well with various front-end frameworks and provides features like authentication, data storage, serverless functions, and more, although you might not be using all of these in your current project.
  • Additional Tools and Libraries:
    • Git
      • Role: Version Control
      • Description: Managing changes to the codebase and, in turn, the Blog!
    • NPM
      • Role: Package Management

Development Environment:

  • Visual Studio Code (VSC)
    • Role: IDE (Integrated Development Environment)
    • VSC Extensions
      • Astro VSC Extension
        • Role: Enhanced Support for Astro.
      • Code Spell Checker VSC Extension
        • Role: Spell Checking. I am a notoriously bad speller.
      • Git Blame VSC Extension
        • Role: Git Blame Information to see who last modified a line of code and when.
      • Markdown All in One VSC Extension
        • Role: Enhanced Markdown Support, including keyboard shortcuts, table of contents generation, auto-preview, list editing, and more.

Lessons Learned: First-Time WebDev

Color Me Tortie:

I created a Technical Brand Style Guideline for TortieBear. The resulting color palette made development of the UX/UI easier. Tortiebear’s Brand colors include hues of brown and olive, reflecting roots in nature (my cats’ colors haha) and a touch of playfulness.

Crafting the Pages:

With a solid foundation, the creation of each page was like weaving a tapestry. On top an initial Astro template, the additional and custom newsletter landing page stands as a testament to Tortiebear’s commitment to minimal yet meaningful communication.

Solidify Processes Early:

The existence of solid processes in place does not have to lead to an unbearable of overhead, increasingly so with greater experience. When I identify a new Tortiebear Feature or project process, I take time to ideate, implement/document, deploy, test, and wrap up documentation. Solid processes help assure me that I do not lose focus on the systematic aspect of Tortiebear in day-to-day operations.

  • For example, solidifying my Privacy Policy and its Process early on ensures a Privacy-informed mindset through development and that a frame of reference for Privacy exists.

What is TortieBear?

The name TortieBear draws inspiration from my cats:

  • one is a tortie shell cat
  • the other has the “Bear” nickname.

But, if I was asking this question more rhetorically, I would give the answer below:

TortieBear stands as a digital embodiment of my journey – a young professional and mentor who’s weaving her path in the tech world. TortieBear is also a celebration of curiosity and self-advocacy - more on this to come in future blogs 🤠.

Tutorial

Now, let’s dive into how you can create your version of Little Stick’s frontend template!

Pre-requisites

Before you start building your website, you need to install some tools on your computer. Each of these pieces of software is a development tool and gets easier to use with time and practice!

  1. Installing Git
  • Role: Git is a version control system that lets you manage and keep track of your source code history. You’ll use it to download the blog template.
  • Installation:
    • For Windows: Download and install Git from git-scm.com.
    • For macOS: Install Git using Homebrew with the command brew install git in the Terminal. If you don’t have Homebrew, install it from brew.sh.
    • For Linux: Use your package manager. For example, on Ubuntu, run sudo apt-get install git.
  1. Installing Node.js and npm
  • Role: Node.js is a runtime environment that lets you run JavaScript outside of a browser. npm is a package manager for JavaScript and comes bundled with Node.js.
  • Installation:
    • For Windows & macOS: Download and install Node.js (which includes npm) from nodejs.org.
    • For Linux: You can install Node.js and npm using your distribution’s package manager. For example, on Ubuntu, use sudo apt-get install nodejs npm.

Getting Started

  1. Clone the Repository:

    Clone the Simple Blog template to your computer. This command/step copies all the files you need from the remote Github repo to your local machine. Open your command line (Terminal on macOS and Linux, Command Prompt or PowerShell on Windows) and enter:

    git clone https://github.com/littlesticks/simple-blog-astro

  2. Install Dependencies:

    Dependencies are libraries and tools your project needs to function correctly. Navigate to your project’s directory and install the project dependencies with npm:

    cd simple-blog-astro
npm install
    • This command looks at the package.json file in the project and downloads all the necessary libraries (dependencies).

  3. Launch Your Local Server:

    Almost there! Start your website locally with this command:

    npm run dev
    • You can see your site at address localhost:3000 in a browser on your machine.
    • This server lets you see your changes in real-time as you develop your website.

  4. Explore, Modify, and Learn:

    • Explore: Check out the files in the simple-blog-astro directory. You’ll see HTML, CSS, and JavaScript files that make up your website.
    • Modify: Try changing some text or styles. Refresh your browser to see your changes.
    • Learn: As you get comfortable, experiment with more advanced features and customization. Building your website is a journey of learning and creativity. Take it one step at a time, and don’t hesitate to look up tutorials or ask for help when you need it.

  5. Deployment

    Choose a platform like GitHub Pages, Netlify, or Vercel for making your website live. These platforms have simple guides to help you.

  6. Using GenAI for Assistance

    If you’re stuck or want to optimize manual work, generative AI tools can be a huge help. Here’s how:

    • Branding : Use AI tools like OpenAI’s ChatGPT to get a Brand Color Scheme that aligns with your style.
    • Code Help: Struggling with a tricky code snippet? AI coding assistants can offer suggestions.
    • Boilerplate Content Creation: AI can help outline and organize blog posts.

Conclusion

Building TortieBear was an adventure in creativity and tech. I hope this blog inspires you to weave your digital fabric and share your unique voice with the world. Dive in, experiment, and most importantly, have fun with it! I’d love to see your work if you end up following any part of this blog- tag me on LinkedIn!

Resources & THANK YOUs!

Little Sticks Simple Blog Template