Newbe question about web-skills HOT 1 CLOSED

Hey Reynaldo! It is so cool that you are creating an agile version of Web Skills, I'm looking forward to see how it turns out 🎉 From Twitter I know you resolved your question but I'll add a brief guide here anyways if people in the future should have the same question 👍 I'm considering adding a guide to the README.

After forking Web Skills you can follow this guide.

1. Navigate to your forks repository.
2. Click on "Settings".
3. Under "GitHub Pages", use the Source drop-down menu and select gh-pages branch.

After you have done this you should be able to find your website at {{ username }}.github.io/{{ repository_name }}. Each time you want to publish a new version you can push your code to the gh-pages branch.

If you change the name of your repository or host the website somewhere else and still want the website to be installable, you'll need to open the manifest.json file and change the start_url to the name of the path you are using. Read more about the manifest file here.

Since the website uses a service worker to cache files, you might run into problems where the old files are cached and you can't see the changes you make. During develop I'll encourage you to use the "Bypass for network" functionality of your browser. This way you'll make sure that the service worker is always up-to-date when developing. When you want to update the app you'll need to go to the sw.js and src/config.js files and bump the version before pushing to the gh-pages branch. If you prefer not to use a service worker you can stop the setupServiceWorker function from being invoked in the src/app.js file.

You can find all of the data in the data folder. Here, you'll find that skills are part of areas and areas are part of collections. I'll encourage you to get familiar with the structure of the data before getting your hands dirty.

In the assets folder you can find all of the images for the skills. The path of the images follows a naming convention based on the collection and area the skill is a part of which is assets/{{ collection_name }}/{{ area_name }}/{{ skill_name }}.svg. As an example, the image for the skill "Relational Databases" which is a part of the area "Databases" which is a part of the collection "Databases & Servers" is located at assets/databases-and-servers/databases/relational-databases.svg. The design with all assets is located in the design/design.sketch file.

To serve the website locally you'll need to run npm run s. This will spin up a local dev server and open the browser.

I'll close this issue for now. Feel free to DM me on Twitter or open another issue if you have more questions. Have a great day 🌞

from web-skills.