I used sveltekit to create this portfolio website. I decided to go with sveltekit
because of the server-side rendering (SSR) and all of the SEO features, as well as
making the website really fast. The fact that this, to me, is less than an actual
framework as it relies heavily on vanilla HTML, CSS, and JavaScript is what I'm looking
for.
In comparing all of the frameworks for the best one to use, my list is 1.) Sveltekit 2.)
Astro 3.) React. I like Astro because it is really easy to use, and you can use any other
framework's components you want. I can use svelte with astro, react with astro, etc. I put
react as #3 because it is really verbose.. but it does the same thing that sveltekit and
astro do.
I am very knowledgable to the fundamentals of web development. CSS is a real hobby that
I have because I'm a very visual person. Sveltekit has made it super simple to put my
ideas on the web.
The framework is based off of html. Javascript is used in a script tag, css is used in a
style tag, just like you do it inline in html. Everything is scoped, so it makes it really
easy to build things.
Svelte is a client based compiler that generates optimized javascript. Sveltekit is a
framework that uses svelte under the hood. Think of how Nuxt is to Vue, or how Next is
to React. In the end, sveltekit is a new approach to building rich user interfaces.
Originally, svelte was created as a tool to build components for data visualization. It
makes creating data visualizations super easy!
Svelte is usually used for SPA's (single page applications), but with sveltekit, you can
use it's routing features to create a MPA's (multi-page applications). This is what I did
with this website.
You need Node.js installed. Once you have it
installed, you will use npm in your terminal. In your terminal, type
cd folder
to change the directory to whatever folder you want
to create your project in. If you're at where you want to be at, type
npm create svelte@latest
. This will create a new sveltekit
project. Once you have the project created, you will cd into the project and run
npm install
. This will install all of the dependencies that
you need to run the project. Once you have the project installed, you will run
npm run dev
to start a development server and start the project. Now when you make changes to your code
and press save, it will update on your development server without having to hit refresh!
Also, this starts the project on http://localhost:5173
.
Once you have the development server running, you can start building your project. You can
use the src/routes
folder to create new pages. You can use the
src/lib
folder to store and create new components or data for
your project.
You can use the +layout.svelte
file to create a layout for
your project. You can use the +error.svelte
file to create an error page. And +page.svelte
creates a new page.
If you would like to know more about svelte, click the link!