Skip to content
Content repository for web.dev
Branch: master
Clone or download
Pull request Compare This branch is 21 commits behind GoogleChrome:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
.vscode
glitches
lib
src
.editorconfig
.eleventy.js
.eleventyignore
.eslintrc
.gcloudignore
.gitignore
.gitmodules
.huskyrc
.sasslintrc
.travis.yml
CODEOWNERS
CONTRIBUTING.md
LICENSE
README.md
app.yaml
gulpfile.js
package-lock.json
package.json
server.js

README.md

web.dev

Build Status

web.dev is the ultimate resource for developers of all backgrounds to learn, create, and solve on the web. It's meant to not only educate developers, but help them apply what they've learned to any site they work on, be it personal or business.

Note: this repo contains the written content for web.dev. The client-side JS and server are not yet open source.

Authoring content

Our wiki provides docs on authoring guides and codelabs.

Get started

Clone the repo.

git clone https://github.com/GoogleChrome/web.dev.git

Install dependencies.

npm ci

⚠️ Important: We're currently in the process of open sourcing our CSS. Unfortunately the above command will only work for folks who are part of our team and have access to the styles submodule. We plan to resolve this in the second half of May. Thank you for your patience! 🙇‍♂

Start a local server to preview the site.

Changes to assets will rebuild the site. Refresh to see changes.

npm run dev

Next, open http://localhost:8080/ to see the site locally. The preview server allows you to see how the content will look on the production site, but it's not a true staging server. For example, features like search and JS components may not work or be entirely broken on the local preview.

Fetch latest styles (optional)

You won't need to do this if this is your first time installing the repo because styles will be fetched in the postinstall phase. But if you'd ever like to grab the latest styles you can run this command:

npm run styles

Staging

Stage the site to App Engine. This requires you have the gcloud command installed on your system.

npm run stage

☝️ You'll need to be a member of the App Engine project to run this command.

Preview the site at https://web-dev-staging.appspot.com

Tip: 👩‍🚀

If you'd like to stage the site but don't want to replace what's already on the current staging site, you can manually run:

npm run build
gcloud app deploy --no-promote

This will generate a unique URL for your staged content.

Debugging

The easiest way to debug the site is to add a debugger statement to .eleventy.js, then run npm run debug, and go to chrome://inspect to attach to the running process.

Found a bug?

You can file an issue in our issue tracker and a team member should reply shortly.

Want to help?

Take a look in the issue tracker for any bugs with a content label.

You can’t perform that action at this time.