Remove extra steps
This commit is contained in:
tessawiedmann
GitHub
Родитель
e4c569d8c3
Коммит
58b059aef5
|
|
@ -11,111 +11,33 @@ To get started, complete the following items if you haven’t already
|
|||
|
||||
- Create an [Azure for Students account](https://azure.microsoft.com/free/students) or use your existing Azure Subscription if you have one (Alpha Student Ambassadors and above can redeem credits here: https://aka.ms/vsben)
|
||||
|
||||
By completing this Technical Onboarding Process, you will grow your skills with Azure, you will become trained on the use of GitHub (including GitHub Codespaces and GitHub Copilot), you will complete one of the requirements for program advancement, and you will also get a certificate that will recognize your new technical abilities!
|
||||
By completing this Technical Onboarding Process, you will grow your skills with Azure, you will
|
||||
* Become trained on the use of GitHub including GitHub Codespaces and GitHub Copilot
|
||||
* Complete one of the requirements for Student Ambassador program advancement
|
||||
* Create your very own personalized Portfolio website
|
||||
* and you will also get a certificate that will recognize your new technical abilities!
|
||||
|
||||
As you are navigating Technical Onboarding, please reference [Technical Onboarding GitHub Discussions](https://github.com/microsoft/SATechnicalOnboarding/discussions) to ask questions and/or share issues you encounter. Make sure to review other Ambassadors’ questions to help or get help!
|
||||
|
||||
## Section 1: Create a repository
|
||||
## Section 1: Create your own JavaScript Portfolio Site with GitHub Codespaces and Copilot
|
||||
|
||||
**Why do this section?**
|
||||
|
||||
Microsoft Cloud Advocates have created a template GitHub repository (or repo) specially for Microsoft Learn Student Ambassadors to use for this Technical Onboarding experience. When you append /generate to the end of the repo URL, you are telling GitHub that you want to generate a new repository, and use the provided repo as a template for the repo you generate. This template repository has the content and styling definitions that allow you to create a web application that can serve as your online resume.
|
||||
Microsoft Cloud Advocates have created a template GitHub repository (or repo) for Microsoft Learn Student Ambassadors to use for this Technical Onboarding experience. This template not only includes your own version of some starter code, but also an entire starter development envirornment in GitHub Codespaces. You don't have to do any setup yourself with the power of Codespaces, it's all done for you!
|
||||
|
||||
This article uses a GitHub template repository to make it easy for you to get started. The template features a starter app used to deploy using Azure Static Web Apps.
|
||||
In this exercise you will:
|
||||
1. Set up your GitHub Codespace
|
||||
1. Create your Portfolio site
|
||||
1. Customize your site with GitHub Copilot
|
||||
1. Explore how to deploy your site to the cloud with Azure Static Web Apps
|
||||
> A static web app (SWA) is a site built with JavaScript, HTML, CSS and potentially other tools, and SWAs are becoming increasingly common. Using Azure Static Web Apps will allow you to quickly post your Portfolio site to the world. Learn more about Static Web Apps in [this Microsoft Learn module](https://learn.microsoft.com/en-us/training/paths/azure-static-web-apps/)
|
||||
|
||||
1. Navigate to the following location to create a new repository: https://github.com/microsoft/SATechnicalOnboarding/generate
|
||||
You can find the template repository and instructions to create your own Portfolio site here: https://github.com/education/codespaces-project-template-js
|
||||
* Follow the instructions in this template repository
|
||||
* For Student Ambassador Technical Onboarding, you **must** choose the [Azure Static Web Apps option](https://github.com/education/codespaces-project-template-js#azure-static-web-apps) to deploy your Portfolio site
|
||||
* You will have to submit the url to your customized Profile site to complete [the Technical Onboarding completion form](https://forms.office.com/r/UnJgmjap4U)
|
||||
|
||||
2. Name your repository SATechnicalOnboarding. Note: Azure Static Web Apps requires at least one HTML file to create a web app. The repository you create in this step includes a single index.html file.
|
||||
|
||||
3. Select Create repository from template.
|
||||
|
||||
## Section 2: Clone the repository
|
||||
|
||||
**Why do this section?**
|
||||
|
||||
Previously you created a GitHub repository that housed the materials needed to create your web app. Now you’ll create a local copy (or clone) so you can modify the code on your system. Cloning repos is an important part of a developer’s work. Imagine you’re a software engineer in a large company, and all the engineers at your company are working on the same codebase. You wouldn’t want everyone to make changes to the source code at the same time – so everyone clones the source code to their own local repository, makes and tests the necessary changes, and pushes those changes to the source code when they are ready. This makes for greater organizational collaboration.
|
||||
|
||||
1. Open the GitHub Desktop App
|
||||
|
||||
2. Navigate to File > Clone Repository
|
||||
|
||||
3. Open the URL tab
|
||||
|
||||
4. Input https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/SATechnicalOnboarding.git into the URL input, and select Clone
|
||||
|
||||
Note: Make note of the location where the repository is saved.
|
||||
|
||||
## Section 3: Create a static web app
|
||||
|
||||
**Why do this section?**
|
||||
|
||||
With the copy created locally, you’re all set to start working on your code and site. Now you’ll explore how to deploy your site to the cloud. You’ll use Azure Static Web Apps to host your site. A static web app (SWA) is a site built with JavaScript, HTML, CSS and potentially other tools, and SWAs are becoming increasingly common. Using Azure Static Web Apps will allow you to quickly post your site (and resume) to the world. You can explore more Azure Tips and Tricks: Static Web Apps to learn more.
|
||||
|
||||
1. Open Visual Studio Code and go to File > Open Folder to open the cloned repository in the editor.
|
||||
|
||||
2. Inside Visual Studio Code, select the Azure logo in the Activity Bar to open the Azure extensions window.
|
||||
|
||||
- Note: You are required to sign in to Azure and GitHub in Visual Studio Code to continue. If you are not already authenticated, the extension will prompt you to sign in to both services during the creation process.
|
||||
|
||||
3. Under the Static Web Apps label, select the plus sign.
|
||||
|
||||
4. The command palette opens at the top of the editor and prompts you to select a subscription name. Select your subscription and press <Enter>.
|
||||
|
||||
5. Next, name your application. Type SATechnicalOnboarding and press <Enter>.
|
||||
|
||||
5. Select a region close to you.
|
||||
- Note: Azure Static Web Apps globally distributes your static assets. The region you select determines where your optional staging environments and API function app will be located.
|
||||
|
||||
6. Select Custom Enter /src as the location for the application files and press <Enter>. This app does not produce a build output. Ensure the build output location is empty and press <Enter>.
|
||||
|
||||
7. Select “Open Actions in GitHub.” This will launch the GitHub Actions tab in your browser. You will see the workflow run as it is creating the app. When your webapp is built and deployed, you will see a check for the workflow run.
|
||||
|
||||
- Once the app is created, navigate back to Visual Studio Code - a confirmation notification is shown there. The Visual Studio Code extension also reports the build status to you as the deployment is in progress – and will update you when your app is built and deployed.
|
||||
|
||||
- Once the deployment is complete, you can navigate directly to your website.
|
||||
|
||||
8. To view the website in the browser, right-click on the project in the Static Web Apps extension, and select Browse Site.
|
||||
|
||||
If your build has failed you may see this in your Actions tab on GitHub:
|
||||
|
||||
|
||||
To fix this you can click the pencil icon beside the workflow run and click View workflow file
|
||||
|
||||
|
||||
Then change line 30 to be /src instead of /
|
||||
|
||||
|
||||
|
||||
|
||||
## Section 4: Customize Your Static Web App
|
||||
|
||||
**Why do this section?**
|
||||
|
||||
With your app deployed, let’s turn our attention to updating it with your information. You want to add in your name, contact information, background, social media links, etc. You can do all of this in the HTML by modifying the provided template and replacing the various placeholders. For this exercise you will only update your name, but you should feel free to make whatever changes you might like!
|
||||
|
||||
We will now do a small customization step customize your webapp you can edit it in VS Code and push changes using GitHub Desktop
|
||||
|
||||
1. Navigate to the Explorer Tab in Visual Studio Code
|
||||
|
||||
2. Navigate to the “src” folder, and within it, the “index.html” file
|
||||
|
||||
3. Find the “Your Name” Heading. Replace “Your Name” with your real name.
|
||||
|
||||
4. Save your changes in VS Code
|
||||
|
||||
5. Navigate to GitHub Desktop and ensure that your Current Repository is your Ambassador-SWA-Pilot repo (GitHub Desktop should reflect your recent changes like below)
|
||||
|
||||
6. In the bottom left of GitHub Desktop, give your changes a title (like “Added My Name” and add a description
|
||||
|
||||
7. Select “Commit to Main”
|
||||
|
||||
8. Now, push your changes to GitHub by selecting “Push Origin”
|
||||
|
||||
9. Navigate to Actions in GitHub and view your web app’s build progress
|
||||
|
||||
10. When the build is complete, refresh your app and the changes should be reflected
|
||||
|
||||
## Section 5: Complete Your Next Step in GitHub Training with Reviewing Pull Requests
|
||||
## Section 2: Complete Your Next Step in GitHub Training with Reviewing Pull Requests
|
||||
|
||||
**Why do this section?**
|
||||
|
||||
|
|
@ -132,9 +54,9 @@ By completing this Microsoft Learn Module, you will learn the foundation of coll
|
|||
|
||||
## Section 6: Submit your onboarding details, feedback, and get your certificate of completion
|
||||
|
||||
You’ve made it to the end! The last step is to fill out the [Onboarding Completion Form](https://forms.office.com/r/UnJgmjap4U) (using your @studentambassadors account) to provide a few details about you, your webapp, the link to your final pull requests from the GitHub Learn module, and your experience with this process.
|
||||
You’ve made it to the end! The last step is to fill out the [Onboarding Completion Form](https://forms.office.com/r/UnJgmjap4U) (using your @studentambassadors account) to provide a few details about you, your Profile site, the link to your final pull requests from the GitHub Learn module, and your experience with this process.
|
||||
|
||||
You will be advanced to the Beta milestone (once you have also hosted an event or actively participated in a social impact league project) after a Program Team member verifies that 1) Your Student Ambassador Profile is updated with your GitHub Account, 2) Your GitHub web app / Online Resume is complete, and 3) Your Github Learn module is complete.
|
||||
You will be advanced to the Beta milestone (once you have also hosted an event or actively participated in a social impact league project) after a Program Team member verifies that 1) Your Student Ambassador Profile is updated with your GitHub Account, 2) Your Portfolio site is complete and deployed with Azure Static Web Apps, and 3) Your Github Learn module is complete.
|
||||
|
||||
Thank you for completing this exercise!
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче