![見出し画像](https://assets.st-note.com/production/uploads/images/103093398/rectangle_large_type_2_9860de77632cb3c1b4ee7997a602b4e1.png?width=800)
Jekyll × GitHub PagesでMarkdownを用いたポートフォリオサイトを作る
作った
勢いで作りました。
構成 https://github.com/ymgcmnk/ymgcmnk.github.io
![](https://assets.st-note.com/img/1681564090368-z7ZlZYf5Xa.png?width=800)
OGP (Open Graph Protocol)とか、ちゃんとこう、テーマを変えたり、凝ったことしたりもしてみたいですが、まずは作成できたのでヨシ。
うーん、相変わらず、GitHubよくわかってないなあ。
今回やりたいと思っていたこと
ポートフォリオサイト作りたい
GitHub Pagesでやってみたい
Jekyllってのがあるらしい
マークダウンがいいかな〜
参考
作り方
ChatGPT先生に教えてもらいました。
![](https://assets.st-note.com/img/1681546909967-qlKrPRWdiT.png)
![](https://assets.st-note.com/img/1681546929083-hq6nOwcudm.png?width=800)
![](https://assets.st-note.com/img/1681546944761-iOfq1g9ON0.png)
![](https://assets.st-note.com/img/1681546955502-hPDdft9cwF.png)
なるほど、要するに、index.mdを用意して、_config.yml がCSSみたいな感じなのね。_config.yml を用意するところがよくわからなくて、最初、つまづいていました。アンスコ付けることによって、プライベート関数みたいな扱いなんかしら。
ローカルに落としてきて、gitでなんやかんやは面倒なので、もう、全部GitHubのサイト上(っていう言い方でいいの?)でやりました。
大昔にすでにgithub.ioを作っていたことをすっかり忘れており、過去を葬るなどしました。
テーマは、なんか色々あるっぽいですね。
試行錯誤していた時のメモ
自分用のメモです。別にこれは読まなくていいです。
https://t.co/d1JqBjljtJ
— a03🌗痩せろ (@a03) April 15, 2023
ターミナル叩いて、やってみてる
GitHubアカウントが既にあるものとして、以下の感じでやっていった。
自分の備忘のために、作業しながら書いてる。
1 GitHub Pagesなんもわからん のでググっていくつか記事を読んでみる
↓まずは公式に当たる
↓サイドライン的に、プログラミングスクールとかが解説しているのをいくつか流し読み。これはHTMLとCSSでの解説。HTMLとCSSでもいいけど、めんどいからやっぱマークダウンがいいかな〜。
2 サイト用にリポジトリを作成する
Repository name がそのままURLになる。
ioのつけ忘れに注意。
![](https://assets.st-note.com/img/1681536446702-9fP1RdXB03.png?width=800)
横道。ioってどっかの国じゃなかったっけ。
.ioは国別コードトップレベルドメイン(ccTLD)の一つであり、イギリス領インド洋地域(Indian Ocean Territory)に割り当てられている[1]。
「.io」ドメインは、イギリス領インド洋地域に割り当てられているccTLDですが、データの入出力を意味するI/O(Input/Output)を想起させることから、テック系のスタートアップ企業をはじめ、コンピュータサイエンス分野に関するWebサイトやブログにおすすめのドメインです。
なんだっけ、これと似たような話があったような。
と思ったら、ツバルが.tvだった。2000年の話か〜。
はい、そういうわけでCreate repository
README も付けておきます。
![](https://assets.st-note.com/img/1681536906832-exwc3C63jF.png?width=800)
![](https://assets.st-note.com/img/1681536940118-GasJJnmMx6.png?width=800)
3 サイトを作成する
今回はマークダウンで作りたいので、ひとまず、README.mdを適当に編集してみます。中身は後で作り込むとして、ざーっと適当になんか書きます。
![](https://assets.st-note.com/img/1681537163670-wDaAv3dWBw.png?width=800)
![](https://assets.st-note.com/img/1681537184472-AOeaEsQ2o0.png?width=800)
4 Jekyll を使用して GitHub Pages サイトにテーマを追加する
Jekyllのことはよく知らないんですが、まあ多分CSSみたいなもんかなと想像。
GitHub Actionsよくわかんないので、いったん、ブランチからの公開にしてみる。
![](https://assets.st-note.com/img/1681537560359-4dp8Kkm0oH.png?width=800)
うーん、このへんがよくわかんない
![](https://assets.st-note.com/img/1681537697331-XmtGlWZlBz.png?width=800)
サイトの公開ソースにアクセス は GitHub Pages サイトの公開元を設定する」を参照、ここまでは、いい。
参照して、ブランチからの公開、する。
_config.yml に移動します。 がよくわからん。
![](https://assets.st-note.com/img/1681537850528-YwzxuKbNtk.png?width=800)
![](https://assets.st-note.com/img/1681537876008-fd2zdrIUMK.png)
![](https://assets.st-note.com/img/1681537934231-FBuxXHdDUy.png?width=800)
並行してやっていたJekyll の環境を作るやつ
1.Ruby開発環境
![](https://assets.st-note.com/img/1681534379801-t8gbtRQAEy.png?width=800)
![](https://assets.st-note.com/img/1681534494028-7m3lXO4qac.png?width=800)
これだろうか
でた、パス。いまだによく理解できてないんだよな、これ。
置き場所が違うとか、そういうことだとは思うんだけど。
$ which gem
/usr/bin/gem
うん、こうなった。
brew update 時間かかった
![](https://assets.st-note.com/img/1681538119955-WHq0BNbT6P.png?width=800)
![](https://assets.st-note.com/img/1681538420843-IQyQDrHk1b.png?width=800)
うわあ、全然わからんけどパスが通ったっぽい。
gem install jekyll bundler に戻る。
おーできた、できた。
gem install jekyll
うーん、一旦、GPT先生に聞いて、もう一度やるか〜
(冒頭に戻る)
クローンして、VSCodeでなんやかんやして、プッシュは諦めました。
また今度。
は〜久々にChatGPTやGitHub遊べて楽しかった〜!
#情シス
#ChatGPT
#Jekyll
#GitHubPages
#Markdown
#ポートフォリオ
いただいたサポートで、書籍代や勉強費用にしたり、美味しいもの食べたりします!