Skip to content
- Important: edit meta data in
src/_data/meta.js, it’s being used all over the template.
- Have a look at the blog posts, they explain some basic features that aren’t covered here.
- Search for ‘eleventy-excellent.netlify.app’. You’ll find an entry in
src/assets/css/global/global-styles.css. Replace with your own domain. This is about the external link indicators, they are matched with your domain. If you don’t want to use external link indicators, delete the whole style rule (not the whole style sheet!).
- Edit your social media in
src/_includes/icons. If you add new icons they must be prefixed with “social-”. By default you have RSS, mastodon, twitter, ko-fi, linkedin and github. Great resource: https://lucide.dev/
- Edit your navigation items in
- Not required, but recommended: Delete
src/_data/github.js and the blog posts, as these serve only as an example.
- Edit your preferences (colors, fluid text sizes etc.) in
- Optional: add your custom (favicon) icons in
- Optional: rename
.env. You may set a custom URL for local development and add your own variables.
- Optional: Change fonts. This starter uses three fonts, Red Hat Display, Inter and Roboto Mono. You can add or delete fonts in
src/assets/fonts. I recommend creating font subsets for performance, for example using the Fontsquirrel Webfont Generator. Next, edit
src/assets/css/global/fonts.css. Add your new font aliases in
src/assets/design-tokens/fonts.json. Finally, in
src/_layouts/base.njk edit the font preloads. Roboto Mono is only used for code blocks. It’s preload is set directly in the post layout:
- If you don’t want to feature any code examples, you may delete the whole stylesheet for syntax highlighting:
- Add and delete your custom block stylesheets in
src/assets/css/blocks/*.css, they get pulled in your output stylesheet automatically.
- If you are working with VS Code I recommend installing the Tailwind CSS IntelliSense addon, as it works just as fine for our custom utility classes!