Hello World

Welcome to my website! This is my first post, and it’s going to be about how I set up this website: how I got the dependencies and how I was able to publish to github pages.

Getting this website up and running required one night’s worth of work. So, if you want to dot the same for your github page, here’s how you can do it:

Getting dependencies and development container

  1. hexo-icarus-theme is the main dependency of this site. To avoid accidentally breaking your website should the theme be updated AND for future customization-ility, we are going to fork the theme repo on Github and pull it locally.

    1
    2
    # dont forget to fork on GH first
    gh repo clone <your-gh-username>/hexo-icarus-theme
  2. Let’s create a new repo to hold the website source tree. This will be the repo that you will push to Github Pages.

    1
    2
    3
    mkdir $USER.github.io
    cd $USER.github.io
    git init

    You might want to change $USER to your Github user or organization name.

  3. Next is a Dockerfile that will build your site locally in a “controlled environment”: no polluting your machine with node stuff, development isolation, etc

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # Dockerfile

    ## Base and dependencies
    FROM node:22.5.1-alpine3.19 AS base
    WORKDIR /workspace
    RUN npm install -g hexo-cli

    ## Copy sources for build
    FROM base AS build
    COPY . /workspace
    RUN hexo generate

    ## Deploy
    FROM nginx:1.21.3-alpine
    COPY --from=build /workspace/dist /usr/share/nginx/html
    EXPOSE 80
    CMD ["nginx", "-g", "daemon off;"]
  4. Add a .devcontainer for development purposes (things might break and you might want to debug why)

1
2
3
4
5
6
7
8
9
# .devcontainer/compose.yml
services:
web:
build:
context: .
dockerfile: Dockerfile
image: my-website-server
ports:
- "80:80"
  1. You can now init the site, add icarus theme as a submodule, and start the server
1
2
3
4
5
6
docker compose -f ./devcontainer/compose.yml up -d --build
docker compose -f ./devcontainer/compose.yml exec hexo init .
git submodule add https://github.com/<your-gh-username>/hexo-icarus-theme themes/icarus
# you might need to run `npm install <some-packages>` to get things working
# dont forget to set icarus as the theme in _config.yml
docker compose -f ./devcontainer/compose.yml exec hexo server
  1. Get the experimental dark theme and apply it
1
2
3
4
5
cd themes/icarus
git checkout night4
git remote add imaegoo https://github.com/imaegoo/hexo-theme-icarus.git
git fetch imaegoo
git merge imaegoo/night4
  1. add .gitignore for things like node_modules etc

  2. fix the _config.yml and _config.icarus.yml to your liking.

Make sure to follow icarus docs. For more information.

Deploying to Github Pages

The easiest way to deploy to Github pages is to follow the example from deploy-pages action.
Checkout my workflow for this website.

Author

Wassim Kassem

Posted on

2024-10-16

Updated on

2024-11-27

Licensed under

You need to set install_url to use ShareThis. Please set it in _config.yml.
You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.
You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.