Svelte GitHub Website Template
This is a basic website built using Svelte to show the website in GitHub Pages. When visiting a page that isn't a preprogramed svelte page, it pulls in the markdown file for that page, runs it through a Handlebars processor, processes it into HTML using Showdown, and puts it into the site. Therefore, you compile your site once and just add new markdown files for the pages, posts, etc.
The code can be used on any server that supports running flat file sites and not just GitHub pages. I wrote it for GitHub pages because that is where my site is being hosted.
To get started, copy the template to your system using:
npx degit raguay/SvelteGithubSiteTemplate <name of your project directory> cd <name of your project directory> npm install
This template makes use of Mask to build the project. To run the development environment, you type:
or you can just use npm to start the development server:
npm run dev
To compile the site into the
launch folder, you type:
mask build 'your commit message'
The mask file,
maskfile.md, has a lot more work that
it does for the building process. You can examine this file
to see what all it does. If you don't have Mask on your system,
simply run each command found in the file under
## build heading.
Run the template in development mode and start making changes. The basics in there will help you to know what to do.
To launch your new site, you have to have a GitHub pages account. Once that is setup, set the launch
directory as your repository for that account. When you do a
mask build 'your commit message', it
will push your site to the GitHub pages.
Once GitHub pages has synce the changes, it will be live. Once you have the look and feel
for your website, you just add markdown pages and edit the markdown indexes to point to them.
You do not need to recompile each time you make a change. You just recompile whenever you change
one of the files in the
src directory. But, the
mask build command does recompile each time
just to make sure everything is in order. You can just add markdown files and do the git commit and push
commands yourself on the command line.
I have a tutorial on using this template. Check it out.
Have fun! If you create a site using this template, let me know and I'll add it to my list.
Sites using Svelte GitHub Website Template
Changes made since initial release:
- Added Theming menu option
- Added dropdown menus
- Fixed many bugs and removed redundant code.
- Added responsiveness to the design.
- Fixed several bugs.
- Fixed bug of not unsubscribing from stores that was causing a slowdown after changing pages many times. Also, the error page is now a page in the site directory that is loaded. It is correctly displayed on page errors.
- Added partials, styles controled by the
info.stylesvariable in the
infoStore, and various bug fixes.