Why and How to Create a Portfolio Website Using Svelte?
Before we dive into the “Why” and “How” of creating a portfolio website using Svelte, let’s first explore the essence of Svelte.js and its distinguishing features.
Svelte.js, as its definition, is slender and efficient. It’s a modern JavaScript framework designed for constructing user interfaces (UIs). While it shares similarities with component-based frameworks like React.js or Vue.js, its operational method and reactivity principles stand distinct.
i.e. Svelte.js is component based framework
Unlike its counterparts, Svelte adopts a compilation approach, shifting the bulk of the workload from the browser to the build step. While React.js and Vue.js deliver framework code directly to the browser, interpreting and applying changes at runtime, Svelte takes a different route. It compiles application code into highly optimized vanilla JavaScript during the build process, resulting in a smaller footprint in the final application compared to React or Vue.js.
i.e. Svelte.js works on compilation approach
Svelte provides a reactive programming model similar to other frameworks, but it achieves reactivity differently. While React uses a virtual DOM to efficiently update the UI and Vue.js utilizes a reactivity system based on getters and setters, Svelte takes a compiler-based approach. It analyzes the application code and generates code that directly manipulates the DOM when data changes. This approach eliminates the need for a virtual DOM or runtime overhead for tracking changes.
i.e. Svelte employs compiler-based reactivity, bypassing virtual DOM and runtime.
Because Svelte compiles away much of its framework code during the build process, applications built with Svelte tend to have smaller bundle sizes and better performance. This can lead to faster load times and improved runtime performance.
Introducing SvelteKit: The Framework for Svelte
While not a direct analogy, think of SvelteKit as the equivalent of Next.js for React. It’s a framework tailored for building web applications with Svelte. The advantages it brings are plentiful: support for routing systems for both multi-page and single-page applications, options for Server-Side Rendering (SSR), Static Site Generation (SSG), and optimization of the build process through Svelte’s compiler. Moreover, it comes with built-in support for stores and more.
Why Did I Choose Svelte for My Portfolio Website?
So, why did I choose Svelte for building my portfolio website? The answer lies in its performance benefits, ease of use, and flexibility. Svelte’s component-based architecture makes it straightforward to create reusable UI elements, while its reactive programming model ensures efficient updates to the DOM. Additionally, with SvelteKit’s support for static site generation, I could achieve fast load times and optimal SEO performance for my portfolio site. Moreover, Svelte’s small footprint and minimal runtime overhead make it an excellent choice for showcasing my skills and projects to potential employers or clients. Personally, I’m enamored with Svelte.
Please feel free to check out my website https://nirajpaudel.me — I built it with Svelte! 😎
Please view the Lighthouse reports for further insights on SEO & Performance.
Guys, if you find this portfolio website charming, you’re welcome to craft your own version, perhaps even more beautiful! Feel free to borrow and tweak my code — it’s all there for the taking. Here’s the link to my repository: https://github.com/itsmenirajpaudel/MyPortfolio
Building Your Portfolio Website with Svelte
Now, let’s explore how you can create your first optimal, performant, slender portfolio website using Svelte and host it on GitHub Pages.
But before we jump into that, let’s first understand how pages, routes, and components work in SvelteKit.
Bear with me for a few more minutes.
Pages & Routes:
- In SvelteKit, each page of the application is represented by a Svelte component file.
- These files are typically located in the src/routes directory of the project.
- Each page file in src/routes corresponds to a specific route in the application. For example, if you have a file named about.svelte in the src/routes directory, it will be accessible at the /about route of the application.
- Similarly, if you create a folder named blog inside src/routes and create an index.svelte file inside the blog folder, the page will be accessible at the /blog URL.
- Additionally, SvelteKit supports dynamic routes. For example, if we create a file [slug].svelte inside the blog folder, then URLs like /blog/my-post-1 and /blog/my-post-2 will use this page.
In my repository code, you will find +page.svelte and not other routes. The reason is that my portfolio is one page, and +page.svelte is typically used for defining a single component that handles all unmatched routes within your application. Since I only require one route, this acts as the main page or component.
Components
To describe a component in Svelte, let’s imagine we are building a webpage with a button that changes its color every time we click it. Here’s how we can do it in Svelte:
1. Create a new component file: Let’s call it ColorButton.svelte
2. Define the component’s template (HTML) in ColorButton.svelte. For example:
<! - ColorButton.svelte →
<button>
Click me!
</button>3. Add some styles (CSS) to style your button. For example:
<! - ColorButton.svelte →
<button class="color-button">
Click me!
</button>
<style>
.color-button {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>4. Add some behavior (JavaScript/TypeScript) to change the button’s color when clicked. Add a script tag:
<! - ColorButton.svelte →
<script>
let color = 'blue';
function changeColor() {
color = color === 'blue' ? 'red' : 'blue';
}
</script>
<button class="color-button" on:click={changeColor} style="background-color: {color}">
Click me!
</button>
<style>
.color-button {
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>In this example, we’ve added a color variable to keep track of the button’s color. When the button is clicked, the changeColor function is called, which toggles the color between blue and red.
Note: That’s the basics of pages, routes, and components. If you require a deep dive into Svelte, please mention it in the comment, and I will create a separate article for that. :)
Well, well, well, let’s delve into the topic now. Without further ado, let’s discuss the steps for creating the first high-performing portfolio website with Svelte and hosting it. :)
Step 1: Setting Up: Forking the Repository and Running Locally
- Fork the repository at: https://github.com/itsmenirajpaudel/MyPortfolio
- Clone the forked repository to your local machine using the `git clone` command followed by the URL of your forked repository.
- Navigate to the cloned directory.
- Run `npm install` to install the necessary dependencies.
- After the installation is complete, execute `npm run dev` to start the development server.
- You can notice that the project is running locally on http://localhost:5173
Folder Structure:
src
├───── components
├───── lib
│ └─────── images
│ └─────── ……
├───── routes
│ └─────── +page.svelte
static
└───── ……
svelte.config.js
vite.config.js- All the components such as SEO, Hero, About, Resume, Article, Contact are stored inside the components folder.
- Images are stored in the lib folder.
- The +page.svelte file is typically used for defining a single component that handles all unmatched routes within the application. Since only one route is required, this file serves as the main page or component.
- The `Robots.txt` files and favicon are stored inside the static folder.
- The project uses `@sveltejs/adapter-static` in svelte.config.js, allowing the Svelte compiler to generate a static site easily deployable on GitHub pages.
- Vite is a build tool responsible for optimizing and building all the code for production. vite.config.js contains configuration settings for the build process.
If you require more information on Vite, please refer to the Vite documentation. Feel free to mention in the comments if you would like a simple article on this topic.
Step 2: Customize Your Code
Now, it’s time to make modifications! You have the freedom to adjust various sections according to your preferences:
- Navigate to `src/components` where you’ll find different components. Feel free to alter the text, enhance the code, or make any desired improvements.
- In the lib directory, you’ll find images. Replace my images with your own to personalize the visual elements of your website.
Get creative and tailor the code to suit your unique style and requirements :)
Step 3: Purchasing a Custom Domain:
Once your code is pushed on GitHub, it’s time to acquire a custom domain name. Personally, I opted for “nirajpaudel.me” and purchased it from Domain.com. You can explore and purchase your desired domain from there or any other portals. If you’re based in Nepal and have a dollar card, the process is straightforward; you can use the dollar card for the purchase.
Alternatively, if you’re in Nepal and prefer not to make a purchase or don’t have the necessary balance, you can opt for a .com.np domain. You can register for one using the provided link: https://register.com.np/
Although I’ll be discussing the Domain.com platform, similar procedures apply to other domain providers as well.
After making the purchase, you’ll need to log in. Upon logging in, you’ll be directed to the Summary section.
By default, the LetsEncrypt Free SSL option may be disabled, and it typically takes about 24 hours to activate.
Navigate to the side menu and click on “DNS & Nameservers”. From there, access the “DNS Records” tab. You should only have four A records.
If there are any additional records, remove them. Ensure that the A records contain the IP addresses provided by GitHub. If they’re missing, add them by clicking on “Add DNS Record” and fill in the necessary information.
Note that it may take some time for these changes to take effect.
Other domain platforms offer similar functionalities and processes, so you can follow similar steps regardless of your chosen provider.
Final Step (Step 4): Configuring GitHub Pages 🛠️
Go ahead and open up your repository’s Settings page. On the left menu bar, you’ll find a Pages menu. Click on that to dive into the settings. You’ll encounter a setup similar to the image below.
- Now, let’s delve into the pivotal step: selecting the “gh-pages” branch from the dropdown. For those of you who’ve opted for a custom domain, this is where you can input it. Simply enter your domain name in the custom domain section. And if you do not have a custom domain, your page will be hosted on the GitHub URL: https://<username>.github.io/<repository-name>/
- Enabling HTTPS options will only be enabled when you have selected the “SSL” option on your domain platform’s dashboard. It may take some time to take effect.
- Once everything is set up, whenever you make changes and run “npm run deploy” GitHub takes charge; its automated processes promptly deploy your modifications, quicker than you can say “commit” 😀.
- Navigate to the “Actions” tab on your GitHub repository and check if the deployment process has been completed.
- Once the deployment is successfully finished, your portfolio website should be up and running.
Additional Notes: 💡
Note 1: If you’re curious about the inner workings of “npm run deploy” take a look at the `package.json` file. Inside, you’ll find a script named `deploy`. This script initiates the build process for your SvelteKit project. Using the `@sveltejs/adapter-static` setup configured in your `svelte.config.js`, your project gets compiled into a static website. The resulting compiled code is then pushed to the `gh-pages` branch, facilitated by the gh-pages npm package integrated into the deploy script. GitHub Pages utilizes the `gh-pages` branch to host your site. Opting for static site generation aligns perfectly with GitHub Pages’ hosting capabilities.Note 2: At times, the page may load without the assets loading correctly. In such cases, adjustments need to be made in the svelte.config.js file. Here’s an example of what that might look like:
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter(),
paths: {
base: process.env.NODE_ENV === "production" ? "repo-name" : "",
relative: false,
},
},
};It’s important to note that this change is typically unnecessary when using a custom domain. It’s primarily required when relying on the default URL provided by GitHub.
And, that concludes my article. Thank you for taking the time to read it. I welcome your feedback in the comments section below.
For further exploration, you can visit my GitHub Repository: https://github.com/itsmenirajpaudel/MyPortfolio
You can also check out my website at: https://nirajpaudel.me
