{"id":19446458,"url":"https://github.com/dcs-training/website-with-github-pages","last_synced_at":"2026-03-12T08:03:51.839Z","repository":{"id":209666199,"uuid":"723779537","full_name":"DCS-training/website-with-github-pages","owner":"DCS-training","description":"Course materials for the CDCS course \"Build Your Personal or Project Website with GitHub Pages\". Go to the readme file","archived":false,"fork":false,"pushed_at":"2024-11-04T16:24:23.000Z","size":11354,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-07T22:54:54.519Z","etag":null,"topics":["gitpages","html","web-tools"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DCS-training.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.md","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":"2023-11-26T18:29:54.000Z","updated_at":"2024-11-04T16:24:33.000Z","dependencies_parsed_at":"2024-07-26T17:09:50.478Z","dependency_job_id":null,"html_url":"https://github.com/DCS-training/website-with-github-pages","commit_stats":null,"previous_names":["dcs-training/website-with-github-pages"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCS-training%2Fwebsite-with-github-pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCS-training%2Fwebsite-with-github-pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCS-training%2Fwebsite-with-github-pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCS-training%2Fwebsite-with-github-pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DCS-training","download_url":"https://codeload.github.com/DCS-training/website-with-github-pages/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240632562,"owners_count":19832513,"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":["gitpages","html","web-tools"],"created_at":"2024-11-10T16:13:58.275Z","updated_at":"2025-10-13T14:35:00.133Z","avatar_url":"https://github.com/DCS-training.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Build your personal or project website with GitHub Pages\n\n**Last updated**: October 2024\n\n**Authors**: Aislinn Keogh and Sarah Schöttler\n\n## Preparing for this course\n\n- Prior to the course, please install Visual Studio Code on your computer (https://code.visualstudio.com)\n- You may find it helpful to already think about what you want to include on your website: photos, a brief bio, an overview of your publications, etc. You will be able to benefit from this course more if you prepare some of this content, so that you don’t spend time during class drafting your bio.\n- You might also want to block some time between week 1 and week 2 to work on your website, as we will be able to help you troubleshoot any issues that arise in week 2.\n\n## Week 1: Getting started with an HTML template\n\nFor this course, we'll be using templates from [HTML5 UP](https://html5up.net/).\nThere are plenty of other options out there (or you can even make one yourself!) but HTML5 UP is a nice place to start as their templates are free, easy to use, and offer a wide variety of functionality.\n\n### Step 1: Pick a template\n\nHave a look through the options on [HTML5 UP](https://html5up.net/).\nYou can click on 'Live Demo' to see any template in action with placeholder content.\nBear in mind that some of the demo sites look quite busy (because they're showing off everything that's available in the template); don't let this put you off as you can always strip it back to basics!\n\n### Step 2: Download your template\n\nClick on 'Free Download' next to the template you like.\nThen, navigate to wherever the ZIP folder has downloaded on your computer (probably your Downloads folder) and unzip it into a more useful location (e.g. your Documents folder).\n\nWhen you open the unzipped template folder, you'll see a variety of files and folders.\nDifferent templates will vary a bit, but they'll all have some aspects in common:\n\n- `/assets`: For the purposes of this course, **you can ignore this**. This folder contains the [CSS](https://codeinstitute.net/blog/what-is-css-and-why-should-i-learn-it/), [SASS](https://www.w3schools.com/sass/sass_intro.php), [JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript) and font files for your website. You'll only need to touch these if you're doing some pretty serious customisation!\n- `/images`: This folder will contain any placeholder images that are used on the demo site. It's also where we'll add our own image files later.\n- `LICENSE.txt`: The Creative Commons Attribution for the template.\n- `README.txt`: A quick description of the template from its creator.\n- `index.html`: **The most important file** -- this is your website's homepage!\n\nIf you've chosen a multi-page template, you may have some other `.html` files; the filenames will correspond to page names in the menu.\n\n### Step 3: Download a text editor\n\nIn order to edit the content on your website, you'll need a text editor.\nWe recommend [Visual Studio Code](https://code.visualstudio.com/) but if you already have one you prefer, you can use that instead.\nThe nice thing about VS Code is that it has GitHub integration, which will be useful for us next week!\n\nN.B. If you're on Windows and you can't find VS Code in your start menu after installing it, follow [these instructions](https://softdev.ppls.ed.ac.uk/online_experiments/editor_hunt.html).\n\n### Step 4: Start adding content!\n\nJust to keep things clean, I suggest you make a copy of the `index` file and rename the original to `template`.\nYou can then delete things you don't want from your working copy of the homepage, safe in the knowledge that they're in the original template file if you ever want to use them in future.\n\nTo see the current status of your website at any time (e.g. after you make any changes), double click on the `index` file to open it up in your browser.\nIt's important to understand that this is just a local copy of your website; if you look at the address bar, you'll see a path to a folder on your computer rather than a real URL.\nThis means that no one else can see your website and you can't share this link.\nNext week, we'll show you how to get it up on GitHub and get a real URL!\n\nOpen up your `index` file in your text editor.\nThis is an HTML file, so you'll need to use HTML tags to make your text and images appear how you want them.\n[Here's a cheatsheet](https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet) for HTML syntax.\n\n#### Change the title\n\nTo change the title that appears on the browser tab when you open your website, find a line that's enclosed in `\u003ctitle\u003e \u003c/title\u003e` tags.\nChange the text in between these tags to your name (or the name of your project).\n\nTo change the main header text on the webpage itself, look for a section that starts with `\u003c!-- Header --\u003e`.\nDepending on which template you've chosen, this may correspond to a header in the middle of the page or one in a sidebar; if you look at the code alongside the page in your browser, you should be able to match the text up.\nTry changing the main header text (probably enclosed in `\u003ch1\u003e \u003c/h1\u003e` tags) to your name (or the name of your project).\n\nSave the file and reload it in your browser; can you see your name?\n\n#### Add your own image\n\nFirst, copy an image file you want to put on your website into the `/images` folder.\nNext, in your browser, find a section with an image that you want to replace with your own.\nYou can work out which image file it is by right-clicking, opening it in a new tab and looking at the file name in the address bar.\n\nIn your text editor, find a line of code which looks like this: `\u003cimg src=\"images/IMAGE_NAME.jpg\" alt = \"\" /\u003e`.\nReplace `IMAGE_NAME.jpg` with the name and file extension of the image you've just copied over.\nIf you want any alt text, add that in between the quote marks after `alt = `.\n\nSave the file and reload it in your browser; can you see your image?\n\n#### Add your bio\n\nIn your browser, find a section of text you want to replace with your bio.\nThen, find that text in the file in your text editor.\nNote that the code is in order i.e. if it's the first paragraph on the page, it will be somewhere near the top of the code!\nReplace the placeholder text with your own text.\n\nHave a look at the [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet) to see how to format your text e.g. with bold, italics, underlining, heading styles.\nEach paragraph should be enclosed in `\u003cp\u003e \u003c/p\u003e` tags.\nDifferent paragraphs will have a chunk of whitespace in between them; if you just want a line break without all that space, you can put a `\u003cbr\u003e` tag at the end of a sentence.\n\nSave the file and reload it in your browser; can you see your text?\n\n#### Add some links\n\nThere are various things you might want to link to on your website, such as:\n\n- Your lab, research group or school website\n- Your social media pages\n- Your publications\n\nAnything can be a link in HTML: text, images, buttons, icons etc.\nText is the simplest, so we'll start with that.\nA text link looks like this: `\u003ca href=\"www.some-website.com\"\u003eyour text here\u003c/a\u003e`.\nTo make the link open in a new tab (usually advisable!), add `target=\"_blank\"` after the URL i.e. `\u003ca href=\"www.some-website.com\" target=\"_blank\"\u003eyour text here\u003c/a\u003e`.\n\nTry adding a link to your bio.\nFor example, `I work at the \u003ca href=\"https://www.ed.ac.uk/\" target=\"_blank\"\u003eUniversity of Edinburgh\u003c/a\u003e`.\n\nSave the file and reload it in your browser; can you see and click on your link?\n\n#### Change the menu\n\nSomewhere in your `index` file (it depends on the template!), you should be able to find a list of the page names that are in the menu you see in your browser.\nThey'll each be enclosed in `\u003cli\u003e \u003c/li\u003e` tags and the whole list will be enclosed in `\u003cul\u003e \u003c/ul\u003e` tags; these tags are for an unordered (i.e. bullet-pointed rather than numbered) list.\n\nYou'll see that each line contains a link to another HTML file; this is the file containing the content for that page.\nIf you want to add a new page to the menu, make sure there's a corresponding HTML file!\nYou can also delete any line from the list to remove that page from the menu, or move the lines around to change the order of the menu.\n\nTry adding/removing some pages from the menu.\nSave the file after each change and reload it in your browser; can you see your menu changing?\n\n## Week 2: Publishing your website with GitHub Pages\n\n### Step 1: Set up a GitHub repository for your website\n\n1. If you don’t have a GitHub account yet, go to https://github.com and sign up for an account. Your website URL will be \\[username\\].github.io, so choose a username you would like in your URL. If you already have an account, log in.\n2. Create a new repository by using the + button in the top right, then selecting “New repository”.\n   - For the repository name, fill in \\[username\\].github.io, where \\[username\\] is replaced with your actual username.\n   - Leave all other settings as they are.\n\n### Step 2: Clone your repository to your computer\n\n_There are many different ways of doing this. The following instructions are for using VS Code, which we recommended for this course. Alternatively, you can use GitHub Desktop, git on the command line, or any other git/GitHub tool._\n\n1. In VS Code, select the “Source Control” tab (the button has a symbol with three connected small circles in it) in the sidebar on the left.\n2. Click “Clone Repository”.\n3. Click “Clone from GitHub”\n4. If you have not previously used this, you will be prompted to log in to GitHub. Follow the instructions to log in.\n5. In the list that appears, choose the repository you just created, \\[username\\].github.io.\n6. Select a location on your computer to store the cloned repository.\n7. VS Code will prompt you if you want to open the repository; click open. It will then prompt you if you want to “trust” the folder, accept this too.\n\n### Step 3: Add your website files to the repository\n\n_Next, we need to add our website files to the cloned repo, make a commit, and push (upload) this to GitHub. Here are detailed instructions for doing this using VS Code._\n\n1. Using Finder (on Mac) or Explorer (on Windows), copy your website files from last week—meaning the entire contents of the template you downloaded, with all the changes you made, including the assets and images folders and all html files—to your cloned repository folder, which will be named \\[username\\].github.io and stored in the location you just selected.\n2. In VS Code, go back to the “Source Control” tab. You will see all the added files listed under “Changes”. _Commit_ these changes by adding a commit message (e.g., “add website files”), then clicking “Commit”.\n3. Click \"Sync Changes\" to upload your changes to GitHub.\n\n### Step 4: Activate GitHub Pages\n\n_Finally, we need to activate GitHub Pages on GitHub._\n\n1. Go to the GitHub page for the repository you created earlier. You should be able to see the files you just uploaded from VS Code here.\n2. Go to the \"Settings\" tab.\n3. On the left, click the \"Pages\" tab.\n4. Under \"Source\", \"Deploy from a branch\" should already be selected.\n5. Under \"Branch\", select your \"main\" branch (this should be the only branch available).\n6. Click save.\n\nYour website should now be live on \\[username\\].github.io! It may take a few minutes to show up.\n\n### Optional: Using a custom domain\n\nIf you own a custom domain, for example `yourname.com`, you can use this domain instead of `yourname.github.io`. To do this, follow the instructions provided by GitHub [here](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site). There is some jargon in this article – try to follow it as best you can. Your _DNS Provider_ is usually the website you purchased your domain from, for example GoDaddy or NameCheap.\n\nPlease note that if you have any other websites published from any of your GitHub repositories, those links will start forwarding to your custom domain as well. For example, if you had a site at `yourname.github.io/example-repo`, this will now forward to `yourname.com/example-repo`. If you're not sure what this means or if this is relevant for you, it probably isn't, so just go ahead with your custom domain.\n\n## Making changes to your website\n\n_To update your website after it is published, follow these steps:_\n\n1. Make your edits using VS Code (or your chosen text editor) and save them. Check everything looks good using your browser, as described above.\n2. Once you are happy with your changes, switch to the Source Control tab in VS Code. You will see a list of your changes.\n3. Enter a commit message in the field at the bottom, commit, then sync with GitHub (you should see buttons for all these actions).\n4. It may take a few minutes to update, then you should be able to see your changes online.\n\n## Further resources\n\n- [Short (1-2 hour) tutorial on building a website using an HTML template](https://www.natecation.com/making-a-website-for-free/) (covers much of the same content we went through in Week 1)\n- [CSS cheatsheet for extended customisation](https://www.geeksforgeeks.org/css-cheat-sheet-a-basic-guide-to-css/)\n\n## Feedback\n\nIf you attended this course, please fill out our [feedback form](https://forms.office.com/r/YYNrqvuNr8).\n\n[![License: CC BY-NC 4.0](https://licensebuttons.net/l/by-nc/4.0/80x15.png)](https://creativecommons.org/licenses/by-nc/4.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcs-training%2Fwebsite-with-github-pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdcs-training%2Fwebsite-with-github-pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcs-training%2Fwebsite-with-github-pages/lists"}