![Apple Officially Announces Return of 'Ted Lasso' for Fourth Season [Video]](https://www.iclarified.com/images/news/96710/96710/96710-640.jpg)
![Apple Plans Live Translation Feature for AirPods in iOS 19 [Report]](https://www.iclarified.com/images/news/96712/96712/96712-640.jpg)
![Apple Shares Official Trailer for 'F1' Starring Brad Pitt [Video]](https://www.iclarified.com/images/news/96714/96714/96714-640.jpg)
_Tanapong_Sungkaew_Alamy.jpg?#)
_JIRAROJ_PRADITCHAROENKUL_Alamy.jpg?#)
![[The AI Show Episode 139]: The Government Knows AGI Is Coming, Superintelligence Strategy, OpenAI’s $20,000 Per Month Agents & Top 100 Gen AI Apps](https://www.marketingaiinstitute.com/hubfs/ep%20139%20cover-2.png)
![[The AI Show Episode 138]: Introducing GPT-4.5, Claude 3.7 Sonnet, Alexa+, Deep Research Now in ChatGPT Plus & How AI Is Disrupting Writing](https://www.marketingaiinstitute.com/hubfs/ep%20138%20cover.png)
Jekyll Github Pages Website
This is my personal guide related to all about making github pages with and without jekyll. 1. Github pages website (without jekyll + only markdown files) Reference Repo: this Reference Website: this It contains no themes, no extra github pages features, etc. Just the simplest form of github pages website. Process: Initialise a repo Add a readme and any other markdown files that you want to put. Go to settings tab of repo, pages sections, these choose main branch and root directory. In sometime the website url will apear in the current page (just reload after a while) Features: Allows normal features of markdown files: links, markdown syntax etc No themes, automatic navbar, etc 2. Github pages website (with jekyll theme + only markdown files) Reference Repo: this Reference Website: this Process: Steps 1 to 3 same as above Add a _config.yml file which contains a theme supported by github and other configuration respective to that theme provide its repo. Features: Allows normal features of markdown files: links, markdown syntax etc Github supported themes and any features respective to that theme alone (no custom configurations outside of what that theme can provide) 3. Autogenerated Github pages website ( with jekyll theme + markdown + html files) Reference Repo: this Reference Website: this Pre-requisites: Ruby installed (For windows - https://rubyinstaller.org/downloads/), the one with devkit Jekyll and bundler installed - gem install jekyll bundler Process: Creating webpage: run jekyll new my-site Running webpage locally: run bundle exec jekyll serve Running webpage with github: push to repo and setup github pages via settings (as point 3 in here) Features: Neccessary markdown and html files, Gemfile with predefined gems, _config.yml with preset configurations and theme. Just have to add more markdown files into _posts folder to add more posts to the website. Everything else is autogenerated 4. Github pages website from scratch (with jekyll + markdown + html files + github pages workflows) Reference Repo: this Reference Website: this Pre-requisites: Ruby installed (For windows - https://rubyinstaller.org/downloads/), the one with devkit jekyll and bundler installed - gem install jekyll bundler Process: Create a _config.yml For properties, visit https://json.schemastore.org/jekyll.json. In that go to the key called properties and under it every key is a possible property that can be added to the config file. For default properties specific to any particular theme or website template, visit that template and read its documentation or code base to identiy what variables are used in its code. Finding variables : We will be using architect theme from https://github.com/pages-themes/architect. I'll just go ahead and copy info from its _config.yml Create a file called Gemfile Its like package.json but for ruby. It contains gems (packages for installation) In it add necessary gems for jekyll, and those related to the respective theme/template. (example) Bundle the gemfile by running bundle install or just bundle Create a file called .gitignore specific to jekyll, automatically by running npx gitignore jekyll Adding files: Add a readme file that acts a starting point Add additonal frontmatter to any post or page that you make. (example) Add custom markdown pages [optional]. (example) Add custom html pages [optional]. (example) Running: Running webpage locally: run bundle exec jekyll serve Running webpage with github: push to repo and setup github pages via settings 5. Github pages website from scratch (with jekyll + markdown + html files + custom github workflows) Reference Repo: this Reference Website: This current blog website Process: Every thing same as 4, but we will build our own workflow. This is required when we make any changes in jekyll core code, because github-pages gem do not consider any changes that is made in jekyll core code like this. So we make our own github workflow. Github Workflow: Add a folder named .github, within which you add another folder workflows, within which you add a file named jekyll.yml In that file you add the following code Running: Same as 4 Running webpage locally: run bundle exec jekyll serve Running webpage with github: push to repo and setup github pages via settings ◈ Additional Notes: List of starter file of some simple and pretty github pages websites: https://github.com/cotes2020/chirpy-starter https://github.com/jekyll/minima/tree/v2.5.2 https://github.com/jsanz/gh-pages-minima-starter https://github.com/alshedivat/al-folio Some other references for github pages website setup: https://github.com/jekyll/jekyll/blob/master/lib/site_template/_config.yml https://opensource.com/article/21/11/jekyll-config-files https://nainagurung.medi
This is my personal guide related to all about making github pages with and without jekyll.
1. Github pages website (without jekyll + only markdown files)
- Reference Repo: this
- Reference Website: this
- It contains no themes, no extra github pages features, etc. Just the simplest form of github pages website.
-
Process:
- Initialise a repo
- Add a readme and any other markdown files that you want to put.
- Go to settings tab of repo, pages sections, these choose main branch and root directory. In sometime the website url will apear in the current page (just reload after a while)
-
Features:
- Allows normal features of markdown files: links, markdown syntax etc
- No themes, automatic navbar, etc
2. Github pages website (with jekyll theme + only markdown files)
- Reference Repo: this
- Reference Website: this
-
Process:
- Steps 1 to 3 same as above
- Add a _config.yml file which contains a theme supported by github and other configuration respective to that theme provide its repo.
-
Features:
- Allows normal features of markdown files: links, markdown syntax etc
- Github supported themes and any features respective to that theme alone (no custom configurations outside of what that theme can provide)
3. Autogenerated Github pages website ( with jekyll theme + markdown + html files)
- Reference Repo: this
- Reference Website: this
-
Pre-requisites:
- Ruby installed (For windows - https://rubyinstaller.org/downloads/), the one with devkit
- Jekyll and bundler installed -
gem install jekyll bundler
-
Process:
- Creating webpage: run
jekyll new my-site - Running webpage locally: run
bundle exec jekyll serve - Running webpage with github: push to repo and setup github pages via settings (as point 3 in here)
- Creating webpage: run
-
Features:
- Neccessary markdown and html files, Gemfile with predefined gems, _config.yml with preset configurations and theme.
- Just have to add more markdown files into _posts folder to add more posts to the website. Everything else is autogenerated
4. Github pages website from scratch (with jekyll + markdown + html files + github pages workflows)
- Reference Repo: this
- Reference Website: this
-
Pre-requisites:
- Ruby installed (For windows - https://rubyinstaller.org/downloads/), the one with devkit
- jekyll and bundler installed -
gem install jekyll bundler
-
Process:
- Create a
_config.yml - For properties, visit https://json.schemastore.org/jekyll.json. In that go to the key called properties and under it every key is a possible property that can be added to the config file.
- For default properties specific to any particular theme or website template, visit that template and read its documentation or code base to identiy what variables are used in its code.
- Finding variables :
- We will be using architect theme from https://github.com/pages-themes/architect. I'll just go ahead and copy info from its
_config.yml - Create a file called
Gemfile - Its like package.json but for ruby. It contains gems (packages for installation)
- In it add necessary gems for jekyll, and those related to the respective theme/template. (example)
- Bundle the gemfile by running
bundle installor justbundle -
Create a file called
.gitignorespecific to jekyll, automatically by runningnpx gitignore jekyll - Adding files:
- Add a readme file that acts a starting point
- Add additonal frontmatter to any post or page that you make. (example)
- Add custom markdown pages [optional]. (example)
- Add custom html pages [optional]. (example)
- Create a
-
Running:
- Running webpage locally: run
bundle exec jekyll serve - Running webpage with github: push to repo and setup github pages via settings
- Running webpage locally: run
5. Github pages website from scratch (with jekyll + markdown + html files + custom github workflows)
- Reference Repo: this
- Reference Website: This current blog website
-
Process:
- Every thing same as 4, but we will build our own workflow.
- This is required when we make any changes in jekyll core code, because github-pages gem do not consider any changes that is made in jekyll core code like this. So we make our own github workflow.
- Github Workflow:
- Add a folder named
.github, within which you add another folderworkflows, within which you add a file namedjekyll.yml - In that file you add the following code
- Add a folder named
-
Running:
- Same as 4
- Running webpage locally: run
bundle exec jekyll serve - Running webpage with github: push to repo and setup github pages via settings
◈ Additional Notes:
-
List of starter file of some simple and pretty github pages websites:
-
Some other references for github pages website setup:
