Skip to content

workshop_lesson.md

Latest commit

 

History

History
174 lines (112 loc) · 10 KB

workshop_lesson.md

File metadata and controls

174 lines (112 loc) · 10 KB
Raw

Create and Host your own Website

Creating and hosting your own website can often be intimidating and inaccessible due to paywalls or inexperience with coding.

Sites like SquareSpace will charge you $144/year and sites like GoDaddy will charge you $72/year with pricey add-ons that should really just come with owning the website. Additionally, many of the features they do provide are functionally useless for those aiming to host something simple like a static portfolio website. For many, the only allure they offer is the professional look they can provide those with no knowledge of HTML.

For those willing to invest an extra hour of their time, there IS an easier and cheaper way that will give them full control over their website and its contents.

This workshop will cover using Hugo to generate professional-looking HTML content from easy-to-write yaml files and using GitHub + Google Domains to host your website content for only $0-12 per year!

Students should come with their own laptop pre-installed with git. No prior knowledge required, but a basic understanding of Git will help.

Examples of deliverables possible through the methods taught here:

DISCLAIMER: there are many, many, many ways to go about creating and hosting your own website outside of the ones mentioned here. What will be taught here is just what I've personally found to work well.

Background

Broadly, hosting your own website requires 3 key elements:

  1. HTML and CSS files that comprise the actual page content
  2. Server to host those files on
  3. Domain Name that will direct users to your site

The price you pay 3rd party sites is for them to bundle these elements up for you. We, however, will be keeping those parts separate to give us greater control and affordability. The parts will be handled as such:

  1. HTML and CSS files will be either manually written or generated by Hugo, a free third-party software for generating website files from easy-to-edit yaml files.
  2. Server hosting will be done by GitHub for free
  3. Domain Name will be purchased through GoogleDomains

Setting up the GitHub Repo

GitHub is a fantastic means for hosting code with good version control. Additionally, GitHub even supports hosting your own website files. For free, each account is given [[username]].github.io as a url they can host on.

Here, we'll create a repository with a simple index.html file to start with.

  1. Create a new repository and name it specifically your username.github.io
  2. Create new file and call it specifically index.html
  3. Copy and Paste in the following code to your index file
<!DOCTYPE html>
  <html>
    <head>
      <title>Home Page</title>
    </head>

    <body>
      <h1> Hello World! </h1>
      <h2> This is my very own website! </h2>
    </body>
</html>
  1. Go to your username.github.io as if it were a website. You should see the content that we just created! (Note: it may take a bit for changes to propagate. If you visited the site recently, old website files may still be cached, so try opening the page in an incognito tab)

This is all very cool, and if you're satisfied with this, then you're already done! You now have a way to customize and host your own website at $0/year!

However, what if you want to host multiple personal websites for cheap? Or what if you specifically want a cool domain name like bobross.com? Or what if you want a more professional looking website without getting into the nitty-gritty of writing your own thousand-line CSS files?

To do this, we'll want just our http files to be hosted on GitHub and our Domain name to be determined elsewhere. Before we get into doing this, let's take a quick detour into getting you your own domain name!

Setting up your Domain Name

There are a lot of third-parties that sell domain names. My preferred provider is Google Domains because it's easy to use and provides additional resources like subdomain redirects and custom emails for free! The only downside is the cost. The cost being a very affordable $12/yr (usually. popular domain names and domain names held by scalpers can cost a lot more).

  1. Go to domains.google.com
  2. Navigate to "Get a new domain"
  3. Find and purchase your very own domain!
  4. Navigate to your home page that lists out your owned domain names.
  5. Click on "Manage". Navigate to the sidebar and go to DNS > Custom Resource Records

Image of Google Domains DNS Records location

  1. Input your resource records. What these do is basically tell anyone who tries to access your domain name where to check for your website files. A tutorial for this can be found here. Specifically, we're interested in the A records at the bottom.
  2. Like in the above image, you should also add a CNAME record with your [[github username]].github.io.
  3. Check that these records have been set up correctly using the following terminal command:
$ dig www.trentyang.com +nostats +nocomments +nocmd
  1. Take some time to explore the functionality of Google domains. Try setting up a custom email address and subdomain redirect to your GitHub!

Linking a GitHub Repo to a Custom Google Domain

Let's head back into GitHub and create a new repository that will hold the files for your new website.

  1. Create a new repository. Name it whatever you want.
  2. Add a CNAME file and put in the following text formatted to your domain name you just bought. The name you first list will be what is displayed in the browser url bar when anyone navigates to your site. For example, try going to www.chrischoy.net. It will automatically drop the www and resolve to just "chrischoy.net"
chrischoy.net  
www.chrischoy.net
  1. Go to the respository Settings > Options > GitHub Pages

Image of GitHub Pages section in Repo Settings

  1. Change the custom domain to your website domain name (eg. chrischoy.net).
  2. Clone the repository to your computer

Note: at this point, you have the ability to write your own website content and host it on your own custom domain. Just stop at this part of the tutorial and add an index.html file for your site to read from.

Using Hugo

There are a lot of ways to generate professional looking website pages. You could code your own from scratch, use a third-party interface (like Wordpress), or use a static-site generator (like Jekyll). For our purposes, we'll be using the free and easy-to-use static-site generator, Hugo. I say easy-to-use because of the way it plays nicely with GitHub and the way it requires little-to-no HTML knowledge.

So, let's get into it. We'll be loosely following Hugo's quickstart tutorial.

  1. Install Hugo for your OS by following the instructions here
  2. Navigate into your cloned repository and create a new hugo site within the repository folder with:
$ hugo new site . --force
  1. Find a theme you like on themes.gohugo.io (you can also make your own theme following Hugo's instructions)
  2. Navigate into your themes folder and install the desired theme following their Git Submodule instructions. The example below uses the ananke theme. You can also clone it in, but having it as a submodule makes it much easier to update in the future.
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
  1. Navigate to the exampleSite folder and copy the config.toml file to the root of your repository. There should already be a config.toml file there, just replace it or copy in the desired content. The config.toml file is the main file through which you will make changes to your website.
  2. Edit the config.toml file. Correct the themesDir and baseURL fields especially!
  3. Run the site locally on your machine with
$ hugo serve -D

  1. Add a "publish.sh" file to the root of your repository and paste in the following script from this repo.

  2. Commit and push our GitHub changes thus far

$ git add --all
$ git commit -am "init hugo files"
$ git push

  1. Run the publish script. This will do some Git Branch magic to build our site into a separate repo branch called gh-pages.

  2. Go back to the respository Settings > Options > GitHub Pages

  3. Change the source to "gh-pages branch"

  4. Re-update the custom domain to your website domain name (eg. chrischoy.net). NOTE this step must be done everytime you re-publish your website. It's a bit of a pain, but gives us some luxuries like having both our Hugo files and HTML files in the same repo.

  5. Open an incognito tab and navigate to your website. You should see all of your content there within a few minutes at most!

Congratulations!

You've successfully:

  • Hosted a free site on GitHub
  • Purchased your own domain name
  • Linked it to your GitHub website files using DNS records
  • Generated customizable, professional-looking content using a static-site generator like Hugo

Going forward, you can further customize your config.yaml or get into the nitty-gritty HTML/CSS files within the theme for fuller customization. You can also read up on more Hugo documentation for how everything works together within the generator.

Everytime you want to publish your changes to your website, don't forget to run the publish script and update the GitHub custom domain name!