{"id":20533445,"url":"https://github.com/solirius/training_github_pages","last_synced_at":"2025-09-25T14:31:24.197Z","repository":{"id":219929863,"uuid":"750292151","full_name":"Solirius/training_github_pages","owner":"Solirius","description":"Graduate training - git, VS Code, terminal and basic web page building with Github Pages","archived":false,"fork":false,"pushed_at":"2024-07-15T09:44:46.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":11,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-16T00:24:21.411Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Solirius.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-30T11:10:57.000Z","updated_at":"2024-06-12T11:25:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"96695012-3836-4afc-9d67-d69103dac9a0","html_url":"https://github.com/Solirius/training_github_pages","commit_stats":null,"previous_names":["solirius/training_github_pages"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Solirius%2Ftraining_github_pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Solirius%2Ftraining_github_pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Solirius%2Ftraining_github_pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Solirius%2Ftraining_github_pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Solirius","download_url":"https://codeload.github.com/Solirius/training_github_pages/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234204989,"owners_count":18796013,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T00:21:26.533Z","updated_at":"2025-09-25T14:31:24.192Z","avatar_url":"https://github.com/Solirius.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# training_github_pages\n\nGraduate training - git, VS Code, terminal and basic web page building with Github Pages\n\n## Learning Objectives\n\n- Learn how to use git and Github\n- Learn how to use VS Code\n- Learn how to use the terminal\n- Learn how to build a basic web page with Github Pages\n\n## Prerequisites\n\nYou need to use the `Terminal` application on Mac (for any command line instructions) and following any links below.\nSteps that require `Terminal` use are marked with :computer: emoji.\n\n- Create a [Github account](https://github.com/)\n- :computer: Xcode command line tools - `xcode-select --install`\n- :computer: Install [homebrew](https://brew.sh/) using `/bin/bash -c \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\"`\n- :computer: Install Github command line tools: `brew install gh`\n- Link Github Account on local machine [slides](https://docs.google.com/presentation/d/1mwmNqURjph1rqTWTNhRUxmFZ25ipC10IUaLHa2vlLVE/edit?usp=sharing) - read carefully, this is a really important step - if you're confused, ask for help.\n- :computer: Install node using `brew install node`\n- :computer: Install [VS Code](https://code.visualstudio.com/) via homebrew using `brew install --cask visual-studio-code`\n- Allow `VS Code` to be opened with `code` command in terminal [link](https://code.visualstudio.com/docs/setup/mac#:~:text=Keep%20in%20Dock.-,Launching%20from%20the%20command%20line,code'%20command%20in%20PATH%20command.)\n\nIf you are given a work Windows laptop, ask a tutor how to get setup or follow this guide: [here](https://github.com/lewagon/setup/blob/master/windows.md)\n\n# Tutorial\n\n## Forking the repository\n\n- Fork this repository to your own Github account\n  \u003e Important! Rename the repository to `\u003cyour_github_username\u003e.github.io` - this is required for Github Pages to work. Read more about Github Pages [here](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site).\n- Clone your forked repository to your local machine using `git clone`\n  - Think about where you want to clone the repository to on your local machine and consider using the `.` operator\n- Open the repository in VS Code using `code .`\n- Open the terminal in VS Code using (on Windows) `Ctrl + Shift + ` or (on Mac) `Cmd + Shift + `\n\n## Creating a new branch\n\nYou now have a copy of this repository on your local machine. You can now create a new branch to work on.\n\n- Create a new branch using `git branch \u003cbranch_name\u003e`\n- Checkout the new branch using `git checkout \u003cbranch_name\u003e`\n- Push the new branch to your forked repository using `git push --set-upstream origin \u003cbranch_name\u003e`\n- In your VS Code terminal, you should now see that you are on your new branch\n  - Also check the bottom left of the VS Code window to see that you are on your new branch `\u003cbranch_name\u003e`\n\n## Making changes\n\nYou will make changes on the new branch you have created. You will then commit and push these changes to your forked repository.\n\nMaking changes on a new branch is good practice as it means you can work on multiple features at the same time without affecting the `main` branch.\n\n- Open the `README.md` file in VS Code\n  - Alternatively, open the `README.md` file in preview mode in VS Code for a more readable view\n- Update the areas in the `index.html` file that are marked with `TODO` comments\n- Make edits to `style.css` to change the styling of the page marked with `TODO` comments\n- Make changes to other styles in `style.css` to change the styling of the page (optional)\n- Once you've made changes, stage the changes using `git add .`\n- Commit the changes using `git commit -m \"\u003ccommit_message\u003e\"`\n  - Edit the \u003ccommit_message\u003e to be a short description of the changes you have made\n  - Best practice is to use the present tense in your commit message\n- Push the changes to your forked repository using `git push origin \u003cbranch_name\u003e`\n\nYour changes should be on the github repository you forked on your account on the new branch you created.\n\n## Running a local webserver using `http-server`\n\nWhen modifying these simple webpages, you want to be able to view the website in your browser. You can do this by serving (e.g. making files available) on a local web address. The most common is `http://localhost` or `http://127.0.0.1`. When you lauch a server on your local machine, it is usually available only to you on your machine.\n\nTo do so, we will use a library called [http-server](https://www.npmjs.com/package/http-server). \n\nCopy this command in your terminal - make sure you are in the correct folder. You may see a prompt that says \"Need to install the following packages:\" - when prompted, enter \"y\" and press \"enter\"\n```bash\nnpx http-server --port 3000\n```\n\nYou will see an output like this in your terminal:\n\n![image](https://github.com/Solirius/training_github_pages/assets/42571140/7245c332-41aa-4d4a-b256-1c304fefda9b)\n\nYour webpage will now be hosted on `http://127.0.0.1/3000`. \n\nMake as many changes to your html and css file as you would like, then move on to the next step.\n\n## Creating a pull request\n\nYou will now create a pull request to merge your changes from your new branch into the `main` branch. This is standard practice when working on a project with multiple people.\n\n- Go to your forked repository on Github\n- Click on the `Pull requests` tab\n- Click on the green `New pull request` button\n- Select the `main` branch as the base branch\n- Select your new branch as the compare branch\n\nHere you will see the changes you have made on your new branch compared to the `main` branch. You can review the changes you have made and add comments if you wish.\n\n- Add a title and description for your pull request\n- Click on the green `Create pull request` button\n- Wait for the pull request action to complete\n  - If any of the checks fail, you will need to fix the issues on your local machine/branch and push the changes to your branch again, then let the pull request action run again\n\n## Merging the pull request\n\nAt this point, you should have a pull request open on your forked repository. You will now merge this pull request into the `main` branch.\n\n- Click on the green `Merge pull request` button\n- Click on the green `Confirm merge` button\n- Click the button to delete the branch after merging\n- Go back to the `Code` tab\n  - You should see that your changes have been merged into the `main` branch and only the `main` branch is available\n\n## Pulling the changes to your local machine\n\nYour remote and local repositories are now out of sync. You will now pull the changes from the remote repository to your local repository.\n\n- Checkout the `main` branch using `git checkout main` in your VS Code terminal\n- Pull the changes from the remote repository to your local repository using `git pull origin main`\n\n## Setting up Github Pages\n\nYou will now set up Github Pages to host your web page.\n\n- Go to the `Settings` tab on your forked repository\n- Under `Code and automation`, click on `Pages`\n- Under `Build and Deploy`, select `main` as the branch and `/ (root)` as the folder\n- Click on the `Save` button\n- Wait for the Github Pages action to complete\n- Click on the link to your Github Pages site\n  - should be in the format:\n    - `https://\u003cyour_github_username\u003e.github.io/` (if you've named your repository `\u003cyour_github_username\u003e.github.io`)\n    - `https://\u003cyour_github_username\u003e.github.io/\u003cyour_repository_name\u003e/` (if you've chosen a repository name other than `\u003cyour_github_username\u003e.github.io`, you will need to add this to the url)\n  - You should see your web page - this is live on the internet!\n\n# Extension tasks\n\nIf you want to do more with your web page, here are a few ideas to get you started.\n\n\u003e Recommended: delete the .github/workflows file (or edit it to your needs), as you may have trouble merging changes to your main branch if you have the training Github Action running on your repository.\n\n## Add a favicon (Easy)\n\nIn the images folder, you can find a favicon image. This is the icon that appears in the browser tab. You can add this to your web page by adding the following code to the `\u003chead\u003e` section of your `index.html` file\n\n```html\n\u003clink rel=\"icon\" href=\"images/favicon.png\" type=\"image/png\" /\u003e\n```\n\n## Add Blog pages (Medium)\n\nYou can have more than one page on your Github Pages site. You can add more pages by creating new html files in the root of your repository. You can then link to these pages from your `index.html` file.\n\n\u003e Note - this is a very simple, framework-agnostic approach to creating websites which isn't recommended for larger projects. For larger projects, you would use a framework such as Ruby on Rails, NextJS, .NET, etc. Managing multiple loose html files can become difficult to maintain in large teams and projects.\n\n- Create a new html file in the root of your repository called `first_blog_post.html` (or similar)\n- Add some basic html for your blog post to the file\n- Add a link to your new blog post in the `index.html` file\n  - Consider adding a Latest Blog Posts section to the index page\n  - The link should be in the format `\u003ca href=\"first_blog_post.html\"\u003eFirst Blog Post\u003c/a\u003e` and will be accessible at `https://\u003cyour_github_username\u003e.github.io/first_blog_post.html`\n- Add a link back to the index page from your new blog post or a back button\n  - The link should be in the format `\u003ca href=\"index.html\"\u003eBack to Home\u003c/a\u003e` and will be accessible at `https://\u003cyour_github_username\u003e.github.io/index.html`\n\n## Setup Jekyll (Hard)\n\nJekyll is a static site generator that is built into Github Pages. It allows you to create a site with multiple pages and blog posts using markdown files. You can read more about Jekyll [here](https://jekyllrb.com/).\n\nFull guide to setting up Jekyll on Github Pages [here](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll).\n\nIf you want to try this, you can either:\n- Create a new branch with Jekyll setup and merge this into your `main` branch\n- Create a new repository with Jekyll setup and copy your changes from this repository into the new repository (recommended)\n\nThe first option *could* work, but you may have trouble merging changes to your `main` branch if you have the training Github Action running on your repository.\n\nCreating a new repository is recommended as you can then copy your changes from this repository into the new repository. You can then delete this repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolirius%2Ftraining_github_pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolirius%2Ftraining_github_pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolirius%2Ftraining_github_pages/lists"}