WIP - porting site from React to 11ty
This site can be run locally using NodeJS. Using the command line, install the site and dependencies:
npm i
To serve the site locally:
npm run start
After serving the site locally, to build all css assets, open a new terminal tab, then run the following:
npm run assets:build
To watch for css changes:
npm run assets:watch
To refresh the site locally, which includes rebuilding the _site folder and all css assets, run the following:
npm run assets:refresh
To build for production:
npm run build
Because these sites build in a directory, not the root level of a domain, we have to do a few extra thing to make sure the links and assets work.
In templates and layouts, make sure to use the liquid | url filter, which will automatically prefix the baseurl environment variable during production builds:
<a href="{{ item.link | url }}">
<img src="{{ '/assets/theme/images/gsa-logo.svg' | url }}"/>
</a>In markdown, make sure to not link to a root-relative page, but rather use relative links:
View our [projects](../projects)For now, the places where we iterate over links provided in YAML lists are automatically prepended with the baseurl by the templates that use them. So this is ok:
- button_text: "click here"
button_link: "/projects"
reportUrl: "/assets/report.pdf"
Note that you do not use the ../ when defining permalinks for pages in YAML either.
In CSS/Sass, use relative asset paths in path variables and url() for images and fonts:
$theme-font-path: "theme/fonts"
.bg {
background-image: url("theme/images/10x-logo.png");
}Below is the cloud.gov base url for branches:
https://federalist-37831b52-7633-429a-9a79-14298034dd54.sites.pages.cloud.gov/preview/gsa-tts/10x-website/
To view the build for any 10x Website branch that has been committed to Github, copy the link above and append it with your branch name. Example:
https://federalist-37831b52-7633-429a-9a79-14298034dd54.sites.pages.cloud.gov/preview/gsa-tts/10x-website/post-launch-bug-fixes/