Use-ready Website Template With Svelte and Tailwind

Background

Whenever I come up with a business idea, that almost always involves creating a website. Be it a trade or an app idea I always need to create some sort of interface with a backend to execute the idea.

That doesn't mean all business ideas require a website. But the ones I come up with almost always do. Perhaps, that's why those ideas look interesting to me in the first place.

So, since I'm creating websites with high frequency, with relatively similar stacks (Svelte, tailwind), I decided to create a template so whenever I need to create a site, I can just use the template. This will help me avoid boilerplate steps in website development like, creating a folder, initializing a git repo, adding a navbar, creating routes, etc.

Method

Here I create a simple Svelte & Tailwind website template that provides fundamental elements in website creation so you don't have to write them over and over again when creating websites.

Folder Structure

Below are the major folder/ files that are in above picture:

• .git: Folder that is created with git init for version control
• .svelte-kit: Folder that is created with create app
• node modules: Use npm install --legace-peer-deps to install all the libraries. They will appear in this folder
• src: This is where all the elements (routes, images, components) of a website reside. Will deep dive into this folder at a later section.
• static: Keeps static files to be referred from html file. E.g. website logo.
• .env: Keeps environment variables (E.g. API keys). Note: When you move the code to production, you need to add these environemnt variables to the production environemnt.
• .gitignore: Lets git know which files to not track. E.g. .env, node_modules. environemnt.
• .prettier__: Linting & formatting.
• netlify.toml: I use netlify to publish my website and I highly recommend using it as it is super easy to do. This file helps netlify build a running version of your site on production.
• package__: NPM modules necessary to run the project.
• README.md: Primer on your site. This is seen on the landing page of your repo on GitHub.
• svelte.config.js - vite.config.js: Files for running svelte & vite on the project.
• tailwind.config.js - postcss.config.js: Files for formatting of the website.

Deep-dive On Source (src) Folder

As mentioned above, src folder makes up the backbone of a svelte project. This folder is structured into below format:

• components: This is where we keep the svelte files that are used to fill in your pages. Components could be the whole page, or just a part of a page. For elements, that are repeatedly used (E.g. contact form, comments, titles) we turn them into components in order not to create them from scratch.
• icons: Small images (usually SVG) to help people navigate your site. I prefer keeping these icons as svelte file as well, in order to feed icon color, size as props to the element.
• images: Folder that keeps images used in the website.
• routes: Pages on your website. Create a folder for each language (en, jp)
• stores: Folders that control the state of yor site (E.g. dark mode, user id, logged in)
• utils: Folder to keep your .js files that include the commonly used functions (E.g. add record to database, convert timestamp to date)
• app.css: Keeps css rules that are globally applied to the site.
• app.html: Entry point to your website.

Conclusion

Using the template created here, you will have access to founding elements of a website. These include:

• Navbar
• Navigation & basic pages such as "About", "Contact"
• Language suport (Add as many languages as you want in addition to English and Japanese)
• Svelte and Tailwind setup from the get-go
• Small icon library to help people navigate site better
• Pre-determined & easily changeable design choices (font family, background color)
• Clear folder structure to keep your images, routes, icons, function separated

Resources

You can take a look at the demo site hosted at Netlify here. This website was created for Adam Smith but it can be morphed into anything

The template code can be found here.

Happy hacking!