Coder Social home page Coder Social logo

Hosting Your Resume on GitHub Pages: A Beginner's Guide

Purpose

These instructions will show you how to host your personal resume or CV on GitHub Pages with a static file website generator. This guide will also relate each practical step to the general principles of Andrew Etter's book Modern Technical Writing.

Prerequisites

Instructions

Step 1: Create the Repository

First, we will create a repository for our project on GitHub, which relates to the concept of "using distributed version control" in Etter's book.

  1. Log in to GitHub.
  2. Create a new repository in your GitHub account named username.github.io, where "username" is your actual GitHub username.
  3. Click the "Code" button on your new repository's page and copy the URL from your browser.
  4. Create a folder on your computer where you want to store the repository, and give it the same name as the repository.
  5. Right-click on the folder and click "Open with Code" to open the folder with VS Code.
  6. Click on the "Terminal" button in the top bar on VS Code and select "New Terminal".
  7. Type git clone <repository URL> (where <repository URL> is the URL you copied earlier from your GitHub repository) into the terminal and press Enter.

Step 2: Create the README and Resume Files

Next, using Andrew Etter's concept of "using Lightweight Markup", we are going to create our README file and resume using GitHub Flavoured Markdown.

  1. Create a file called README.md in the top level (root) of your directory.
  2. Add a title and a short paragraph describing the purpose of your project (i.e., hosting your resume).
  3. Save your README file for now, you can add anything else you want later on.
  4. Create a new file for your resume, but name it index.md. This is so that GitHub knows this is the file you want to host as your website's main page.
  5. Add all your resume information to the index.md file in GitHub Flavoured Markdown and save it. Don't worry about making it perfect now, you'll be able to edit it as much as you want later.
  6. Commit all your files using git or using VS Code's interface as you learned in the VS Code Git tutorial from the Prerequisites section above.
  7. Push your changes using the interface, or simply entering git push into the terminal.

Step 3: Enable GitHub Pages

Etter's book emphasizes single-source publishing and static websites, so we are going to host our resume with GitHub Pages.

  1. Click on the "Settings" tab on your GitHub repository.
  2. Scroll down to the "GitHub Pages" section.
  3. Under "Source", select the branch where your README and index files are located (usually "main" or "master").
  4. Click the "Save" button.
  5. Access your resume page, which should be on your personal user page at https://username.github.io/, where username is your GitHub username. It might take a few minutes to be accessible.

Here is a video demo of what it looks like to commit your changes in VS Code, push them to GitHub, and opening the hosted resume from your repository. screencapture

Step 4: Formatting Your Website With Jekyll

Modern Technical Writing also suggests using a static website formatter to make your website more aesthetically appealing. In this guide, we will be using Jekyll since GitHub Pages is setup to work with it by default.

  1. Create a file named _config.yml in your repository where you will specify the Jekyll theme you want to use.
  2. Specify your favourite theme in this file. In this guide, I will show you these two examples:
    • For one of the basic default Jekyll themes, simply add this line in your file: theme: jekyll-theme-minimal
    • For a third-party theme, you can use Dean Attali's theme: remote_theme: daattali/beautiful-jekyll

Lastly, you'll need to create a GitHub Actions workflow to deploy your website formatted with Jekyll. To do this, you can add the default workflow from GitHub, which I will provide in this guide for convenience.

  1. Create a folder named .github in your repository if it's not there already.
  2. Create a workflows folder inside the .github folder.
  3. Create a file named jekyll-gh-pages.yml inside the workflows folder and paste the following contents into that file:
# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy Jekyll with GitHub Pages dependencies preinstalled

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Build with Jekyll
        uses: actions/jekyll-build-pages@v1
        with:
          source: ./
          destination: ./_site
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Finally, make sure to commit and push all your changes and wait for GitHub to deploy your website. Then you should be able to see it formatted with the theme you specified.

More Resources

Authors & Acknowledgments

FAQs

Why use Markdown and not HTML for making a website?

Markdown is a lot simpler and more human-readable than HTML, and it's much easier to learn for beginners. Therefore, it's a better tool for people that don't have experience building websites and just want to host their resume without difficulty.

Why is my resume not showing up?

It takes some time for GitHub to detect the changes and publish your website, so you may need to wait up to 10 minutes to see your resume. If it's still not appearing, check in your repository's settings under GitHub Pages, it should have a message there saying that your website is live and the link to follow.

Izan's Projects

botmark icon botmark

Discord bot that bookmarks a message (sends it to your DMs) by selecting the message from the context menu.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.