Deploying to GitHub Pages

Your app works locally. Now let’s put it on the internet. GitHub Pages can host static websites directly from your repository.

Disabling Jekyll

By default, GitHub Pages uses Jekyll, a static site generator. We do not need it since we have already built our site. We need to tell GitHub to skip Jekyll and serve our files directly.

Create an empty file called .nojekyll in your project folder:

touch .nojekyll

The file should have no content. Its presence alone tells GitHub Pages to skip Jekyll processing.

Make sure all your changes are pushed:

git add .
git commit -m "wakeup-07: Add .nojekyll for deployment"
git push

Enabling GitHub Pages

  1. Go to your repository on GitHub
  2. Click Settings (the tab near the top)
  3. In the left sidebar, click Pages
  4. Under “Source”, select your default branch (usually main)
  5. Click Save

GitHub will start building your site. You can watch the progress in the Actions tab — look for a workflow called “pages build and deployment”.

Viewing Your Deployed App

Once the build completes (you will see a green checkmark in the Actions tab), go back to Settings → Pages. You will see your site’s URL:

https://your-username.github.io/wakeuptimes-app/

Click the link. Your app is now live on the internet.

Making Updates

Whenever you push changes to the main branch, GitHub automatically rebuilds your site. It takes a minute or two for changes to appear.

Congratulations. You have built and deployed a complete web application using HTML, CSS, and JavaScript.

Checkpoint: Your final commit was already made above. Verify your app is live at the GitHub Pages URL.