Tyler Clarke
0ce859a50e
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 25s
62 lines
3.5 KiB
HTML
62 lines
3.5 KiB
HTML
[!]
|
|
[=title "Week 3: Github Pages Intro"]
|
|
[=content-]
|
|
<p>
|
|
To host a personal website, there are a few good options. The one we're using in this course is
|
|
Github Pages. Pages is a service offered by <a href="https://github.com/">Github</a> (a free code hosting service)
|
|
that hosts <i>static sites</i>: the simple HTML files we've been working with in class.
|
|
</p>
|
|
<p>
|
|
Github is cool for a lot of reasons. To fully understand them, I recommend reading <a href="https://git-scm.com/book/en/v2">Pro Git</a> (free online)
|
|
- it's the definitive resource for the software (Git) that makes Github possible. I will not require
|
|
reading Pro Git in <i>this</i> course, but I highly recommend it; understanding how to properly use version control
|
|
is a big step towards becoming a software wizard.
|
|
</p>
|
|
<p>
|
|
The main reasons that <i>we're</i> using Github are that it's free (all you need to sign up is an email address),
|
|
highly configurable for your workflows, and fairly well-reputed (college professors and software projects often use Github pages!)
|
|
</p>
|
|
<p>
|
|
If possible, you should create an account on Github before class. Go to <a href="https://github.com/">the Github homepage</a> and (possibly with the help of a parent)
|
|
enter your email and navigate through the signup process. It's pretty quick and easy.
|
|
</p>
|
|
<p>
|
|
<b>Make sure to pick an appropriate username!</b> Your username will be public information and will go on your Pages site. Don't be me
|
|
and get stuck with a really dumb username.
|
|
</p>
|
|
<p>
|
|
Once you have access to Github, you'll have an option to create a <i>repository</i>. Read through Pro Git for a detailed
|
|
understanding of repositories - in short, a repository is a bundle of files stored in Github. For your website,
|
|
you'll want to create a <i>public repository</i>: this is exactly what it sounds like. Anyone will be able to view the contents,
|
|
which is what you want! Don't add a README or a LICENSE or anything else - the default options are fine.
|
|
</p>
|
|
<p>
|
|
Make sure to name your repository something like <code>your_username.github.io</code>. For instance, if your username is
|
|
"WebDeveloper01765", your repository is <code>WebDeveloper01765.github.io</code>. It's important to be exact about this.
|
|
</p>
|
|
<p>
|
|
If you created your repository correctly, you should be able to visit the "Settings" tab. Look under Settings
|
|
for "Pages": this contains the configuration for your public site! It'll be pretty simple. Make sure
|
|
"Source" is set to "Deply from a branch" - you definitely don't want to do this the hard way with Actions.
|
|
Finally change "Branch" from <code>None</code> to <code>main</code>. Leave the directory at
|
|
<code> / (root) </code>, and click "Save".
|
|
</p>
|
|
<p>
|
|
Github will start preparing your page to deploy. But there's nothing to show! Go back to the "Code" tab
|
|
and click "creating a new file" - this will bring you to a file editor. Set the name to "index.html" (this is important!)
|
|
and add some HTML content - an h1 tag containing "Hello World" is traditional.
|
|
</p>
|
|
<p>
|
|
Click "Commit Changes". Github's AI tool will generate a description for you, but it will most likely be a terrible one -
|
|
get in the habit of writing detailed descriptions! Submit by clicking the new "Commit Changes" button.
|
|
</p>
|
|
<p>
|
|
You're online! If you did everything correctly, you'll actually have a public website at <code>https://your_username.github.io/</code>,
|
|
which will contain whatever you put in your <code>index.html</code>. We'll talk a bit about why and how this works in class.
|
|
</p>
|
|
<p>
|
|
Seriously, read Pro Git. It's a lifechangingly good book.
|
|
</p>
|
|
[/]
|
|
[#template.html]
|