gitとgithubを繋ぐ事に成功したんですが、それをどうvscodeに反映させるのかが分かりません

ed25519を自分採用したと思う

参考にされているWebページのssh key貼り付けの欄で貼り付けた鍵がED25519のものであればそうです．

index.htmlをgithubのサイトに作成できたとは思う

参考にされているWebページでも説明がされている通り，

プッシュができていればGitHub上にindex.htmlが作成されているはず

です．

このgithubのindex.htmlを編集するには

参考にされているWebページでも，touch index.htmlの後に下の手続きと同様edit-add-commit-pushの手順がなされているはずです．編集してキリがいいところでアップロードを行う．というのが基本的な使い方です．したがって，

• ローカルのindex.htmlを編集
• git add index.htmlで変更を追加
• git commit -m "<your commit message>"で変更内容をコミット
• git push origin <your branch name>でリモートリポジトリ(今回はGitHub)へアップロード
• リモートリポジトリのindex.htmlに変更が反映される

の一般的な手続きを踏むか，または直接GitHubのリポジトリでindex.htmlが表示されているページで直接編集するかのどちらかです．

希望としてはvscodeでgithubのindex.htmlを編集したい

VSCodeでリモートリポジトリのindex.htmlを直接いじるのは無理です，上の手続きにおいて，ローカルのindex.htmlを編集する際のエディタとしてVSCodeを採用する．という話なら矛盾しません．index.htmlをVSCodeで好きなだけ編集すれば良いと思います．編集後，コマンドで上の手続きを踏んでください．そうして初めてリモートリポジトリのindex.htmlがに編集の内容が反映されます．

Git GraphやGitLensは入れてあります

前者はブランチの可視化(とdiff)，後者は上で示したようなGitの手続きのサポートや機能の強化などを行うものです．

どこをどういじっていいか分かりません。

Gitの理解をしていれば，これらUIで表示されているものの意味がわかると思います．なんならインストールする際に拡張機能自体の説明がなされていたはずです，

• GitLens: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
• Git Graph: https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

よく読んで利用なさってください．特にスクショを撮られたサイドバーについての説明もここで十分にされていると思います．