3. Editing the Template
The default template for Saussure uses Bootstrap, which you're probably already familiar with from other character storage platforms.
You will want to download Visual Studio Code to edit your website.
After that, you can use GitHub desktop to make a copy of your code on your computer, or your other favorite Git client (such as Sourcetree, or just the command line with git clone).
Once you have a copy of the code on your computer, it's time to edit!
First you may want to edit the front page of the site.
Open up the folder of your website in VS Code. You should see something like this on the right hand side:
This looks like a lot, but don't worry! We're mostly interested in the layouts section.
Click on the file index.njk.
You will see the contents of the file open in the main window. Leave everything in the section marked by --- alone. Everything else you can feel free to edit!
For example, I'll be pasting a profile code from Toyhouse that I made:
Type in ctrl+s to save the file. You'll notice that this icon off to the side now has a blue dot:
Click that icon. Type something short and simple for the message describing the changes you made, such as "Updated front page" and click "commit".
You'll now notice that button has changed to "Sync Changes". Press the button again.
Now, after a short period of time, you'll see your changes on your live website!
You can make similar changes in characters.njk to update the text on the characters page.
You may also want to edit the layouts to add your own custom styling/CSS.
The layout files have comments explaining various parts, but I'll walk you through updating the title and footer in base.njk.
In VSCode, click the base.njk file.
This will open it up in the main window. Much like the previous file, we can make any edits we want here.
I'll be changing the title and footer to have my actual username:
Much like before, you will click the icon on the left hand side, type in a commit message, and press "sync".
After a short period of time, you'll see the footer/title updated on your main site!
You can follow this exact same process for any HTML or CSS edits you want to make. Explore and try things out!
Vercel limits you to 100 deployments per day. If you are uploading a lot of files, or making a lot of updates, it's easy to hit this limit.
To reduce the amount of deployments, we can preview our changes locally before pushing them to the live website.
First, we will install Node.js. This allows us to compile the code on our own computer.
Scroll down until you see this button. Click "Download".
Run this file to install it and leave most settings as default.
Check this button when installing:
You will see a series of windows popup as Node installs. Be patient!
When the windows command line opens, simply press "enter" twice and wait for the windows to process. Do not close them yourself!
After that, restart your computer.
Next, go back to VSCode. We are going to open a new terminal:
First, type in npm install. This will install all the libraries and code necessary to run your website.
You will see some text like this. You should not receive any errors as long as Node was correctly installed.
Next, type in npx @11ty/eleventy --serve. You will see some text fly past the screen as it builds your website!
Open the URL it gives you in your browser (usually http://localhost:8080/). You should see a copy of your website!
This version of the website will generally update live as you make edits to the styling and pages.
If it doesn't update, simply go back to the terminal and hit ctrl+c. You should now be able to type in commands again.
Go to the left hand side and look for a folder called _site. Delete that file.
If it gives you any warnings, don't worry! This folder is completely safe to delete. Just keep clicking "yes" until the folder is deleted.
Re-enter the text npx @11ty/eleventy --serve and go back to your browser. You should now see any pending updates!
Congratulations! You now know how to run a local copy of your website, as well as make any styling changes.