DEV Community: Siddharth Abbineni

GUIDE - Setting up a Github user page from scratch with Jekyll

Siddharth Abbineni — Fri, 10 Jul 2020 09:51:32 +0000

Features & Benefits

Free Hosting on Github.io
Hosted on username.github.io subdomain
Jekyll gives you the speed and simplicity of hosting your home or your application page.
Configurable with themes

Requirements

Github account
Ruby 2.6.*, Ruby Devkit
Git
VSCode or any other preferred editor
GCC, G++ and Make
Chocolately for simpler installation of required components

Github Setup

Creating a github account

Goto to the Github sign up page and create an account with your preferred username. The username you choose here will be the subdomain on which your site will be hosted.
Now that you have created an account and setup your profile (not required) you are ready to create repositories on that account.
Create a repository in your newly created account with the name username.github.io. Do not initiate the repository with a readme yet.

You are done on Github for now. We will get back after setting up our local environment.

(Note: You cannot publish your github pages if you set the repository to "Private". To use GitHub pages on a private repository, you need the PRO plan. If you have bought a jekyll theme, you might be required to make the repository private, check with your vendor.)

Ruby Setup

Installing Ruby

Download and install using the Ruby Installer available Here, As of writing this guide Ruby 2.6.x is the preferred version as 2.7.x has compatibility issues with some gems that are needed to be installed via bundle. Make sure you download the installer named Ruby+Devkit 2.6.x

  - You can also do this via [Chocolatey](https://chocolatey.org/) using these commands
  - `choco install ruby --version=2.6.5.1`
  - `choco install ruby.devkit`

Or Follow the Jekyll Docs to complete the installation of basic environment (Ruby, RubyGems and Bundler).
Install GCC, G++ and Make, just use the default settings.
- Even better get Chocolately to install them with
- choco install make
- choco install mingw

4) To verify everything has been installed and setup properly use the following commands\
ruby -v | gem -v | gcc --version | g++ --version | make --version

5) If everything went according to plan, your terminal should look like this

Git Setup

Installation

Download Git installer and start the git installer.
Use the default settings unless you specifically want something to be different.
Adjusting your PATH environment, keep the default, "Use Git from the command line and also from 3rd-party software". This option will allow you to use Git from either Git Bash or the Windows Command Prompt / Powershell.
Once you have finished installation, open a CMD(Command Promt)/PS(Powershell) window. Type in git --version to verify
If you prefer the bash terminal, your start menu should have a Git Bash entry in it.

Configuration

Now to configure the installed instance of git with your Github Account.
In PS/CMD/Bash shell type in
- git config --global user.username "<your name>"
- git config --global user.email "<your e-mail>"
- (username = the account you created & email = email associated with that account)
We are done for now.

Jekyll Setup

Installation

For a comprehensive guide on how to start a jekyll site from scratch follow the directions on the Jekyll Website - Installation

For this guide we are gonna do a bit of cheating to get setup as quickly as possible.
Open up a shell, and type in gem install jekyll bundler
Check installation by typing in jekyll -v

Configuration and Setup

We will start with a theme of your choice which you can download at:
Select a Theme which you like to use. For example for this site I have chosen the Chirpy Theme. Make sure you have the layout and page structure the way you want it.
Once you have selected your theme, either download the zip file or save the github repository URL.
Open up a shell again and naviage to the path where you want to create a folder for your new website
If using windows explorer, create a folder and extract all the files from your theme file into that folder, make sure the GEMFILE file in the path foldername
If using a shell, Create a folder with mkdir foldername
Change Directory to the newly created folder cd foldername
If you havent extracted the files, you can check out the file from the github repo, this is preferred.
Remember the theme's github repository url? Now is the time to use it.
Clone the repository to your foldername using git clone repository-URL-you-just-copied.git -b master
Now your foldername should look something similar to this

Setting up remote git repo

Go back to the shell you were using, make sure its currently in foldername/
Initialilze git in that folder with\ git init\ This will initialize your foldername/ as a git repository
In your browser go to your git hub repository and copy the URL of YOUR REPOSITORY. When you created the repository in your account. It should look like this\ https://github.com/username/username.github.io.git
Add this URL as a remote\ git remote add origin https://github.com/username/username.github.io.git
Your Git repository is set for now and the remote is configured so when you commit the files and push, they will be added to your repository.

Jekyll Final Steps

Back to the shell you were using, time to install everything needed for your jekyll website.
Type in bundle install when you are in foldername/
This will automatically install all the Jekyll plugins and dependencies that are listed in the Gemfile.
If you are using Ruby 2.6.x you shouldn't get any errors. If there are dependeny errors, check the version numbers and install the needed ones.
Now open the _config.yml file and modify the settings according to your needs, the important ones are:
1. url: 'https://username.github.io' (if you are hosting it to the username.github.io repository)
2. baseurl: '' (not required for this instance)
Type in bundle exec jekyll serve This will launch a webserver and host your website locally at http://127.0.0.1:4000/

Commiting and pushing everything to Github

After you have made all the changes in the configuration and other pages, it is now time to push all the files to Github
Check git status, this will show you which files are unstaged: git status
Add all files to staging: git add .
Commit the files to the branch: git commit -m Initial Commit
Push the commit to the remote repository (github repo) git push origin master
Now visit your github repository page at https://github.com/username/username.github.io and verify the files are uploaded
Wait a minute or two and visit https://username.github.io and the pages will appear!

Maintenance

When you make changes to your website from now these are the steps to follow,

check everything is working fine with: bundle exec jekyll serve and visiting http://127.0.0.1:4000/
Add all changed files to staging with: git add .
Commit changes to the branch: git commit -m "my commit message"
Push the commit to the remote (github) repository with: git push origin master

GUIDE - Customizing your Windows Terminal with themes and different Shells

Siddharth Abbineni — Fri, 10 Jul 2020 09:47:22 +0000

Settings

Opening the Settings File

By Default the Windows terminal comes with Powershell and Commandline enabled, however if you want your own shell to be added to the list, you have to add it to the list in the settings.json of Windows Terminal.

You can find the file in C:\Users\<username>\AppData\Local\Packages\Microsoft.WindowsTerminal_8wekyb3d8bbwe\LocalState\settings.json

Or you simply can click on Settings in the Terminal Menu which will open up the JSON file

Understanding the settings

The JSON file is well documented on its own and you can tinker some settings before you get the hang of it.

If you have the terminal open while changing the settings, the terminal will update on the fly as you change the settings, of if you have an error in the settings it will show you the error the moment you save the file, So keep it open while you are experimenting.

Generate a GUID for your shells here

"defaultProfile": points to the profile with the same "guid":. Whenever you open the terminal this is the profile that starts up
copyOnSelect": true, makes it work like in linux, ie, you have have to press Ctrl+C to copy the text.
"profiles": { This is where you configure all your different shells
"schemes": [ This is where you add your color schemas for use with your profiles.

Adding a different shell

To add a different shell or a different starting profile for PS/CMD, you need to add entries to the "profiles": { section

Lets add the git bash shell. Make sure git is working by checking git --versionin command and this to your settings.json

{
    "tabTitle": "Git Bash",
    "closeOnExit": true,
    "colorScheme": "Blazer",
    "commandline": "C:/Program Files/Git/bin/bash.exe --cd=/",
    "cursorColor": "#FFFFFF",
    "cursorShape": "bar",
    "fontFace": "Consolas",
    "fontSize": 12,
    "guid": "{14ad203f-52cc-4110-90d6-d96e0f41b64d}",
    "icon": "ms-appdata:///roaming/git-for-windows.ico",
    "name": "Git Bash",
    "padding": "0, 0, 0, 0",
    "snapOnInput": true
}

Of course you have to make sure you have the "commandline": parameter pointing to your bash.exe.

for the "icon": the best way is to find the git-for-windows.ico in your git bash installation folder and copy it to %LOCALAPPDATA%\packages\Microsoft.WindowsTerminal_8wekyb3d8bbwe\RoamingState

Adding color schemes

There are already very well designed color schemes available here iTerm2-ColorSchemes just copy the ones you like and paste them in the schemes section under "schemes": [

For example :


"schemes": [
    {
        "name": "Argonaut",
        "black": "#232323",
        "red": "#ff000f",
        "green": "#8ce10b",
        "yellow": "#ffb900",
        "blue": "#008df8",
        "purple": "#6d43a6",
        "cyan": "#00d8eb",
        "white": "#ffffff",
        "brightBlack": "#444444",
        "brightRed": "#ff2740",
        "brightGreen": "#abe15b",
        "brightYellow": "#ffd242",
        "brightBlue": "#0092ff",
        "brightPurple": "#9a5feb",
        "brightCyan": "#67fff0",
        "brightWhite": "#ffffff",
        "background": "#0e1019",
        "foreground": "#fffaf4"
    },
]

Now that you have added all the color schemes you like into the settings, you can apply them to your shell profiles, you can apply different styles to different shells.

"colorScheme": "Argonaut", in the profile will use color scheme we just added.

All done!

Anwyay here is my complete setup, just color changes some minor tweaks

{
    "$schema": "https://aka.ms/terminal-profiles-schema",

    "defaultProfile": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",

    // You can add more global application settings here.
    // To learn more about global settings, visit https://aka.ms/terminal-global-settings

    // If enabled, selections are automatically copied to your clipboard.
    "copyOnSelect": true,

    // If enabled, formatted data is also copied to your clipboard
    "copyFormatting": false,

    // A profile specifies a command to execute paired with information about how it should look and feel.
    // Each one of them will appear in the 'New Tab' dropdown,
    //   and can be invoked from the commandline with `wt.exe -p xxx`
    // To learn more about profiles, visit https://aka.ms/terminal-profile-settings
    "profiles": {
        "defaults": {
            // Put settings here that you want to apply to all profiles.
        },
        "list": [
            {
                // Make changes here to the powershell.exe profile.
                "guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
                "name": "Windows PowerShell",
                "commandline": "powershell.exe",
                "hidden": false,
                "acrylicOpacity": 0.75,
                "closeOnExit": true,
                "colorScheme": "Rebecca",
                "cursorShape": "bar",
                "fontFace": "Consolas",
                "fontSize": 12,
                "padding": "0, 0, 0, 0",
                "snapOnInput": true,
                "useAcrylic": true
            },
            {
                // Make changes here to the cmd.exe profile.
                "guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
                "name": "Command Prompt",
                "commandline": "cmd.exe",
                "acrylicOpacity": 0.75,
                "closeOnExit": true,
                "colorScheme": "Argonaut",
                "hidden": false,
                "cursorShape": "bar",
                "fontFace": "Consolas",
                "fontSize": 12,
                "padding": "0, 0, 0, 0",
                "snapOnInput": true,
                "useAcrylic": true
            },
            {
                "guid": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}",
                "hidden": true,
                "name": "Azure Cloud Shell",
                "source": "Windows.Terminal.Azure"
            },
            {
                "tabTitle": "Git Bash",
                "closeOnExit": true,
                "colorScheme": "Blazer",
                "commandline": "C:/Program Files/Git/bin/bash.exe --cd=/",
                "cursorColor": "#FFFFFF",
                "cursorShape": "filledBox",
                "fontFace": "Cascadia Code",
                "fontSize": 12,
                "guid": "{14ad203f-52cc-4110-90d6-d96e0f41b64d}",
                "historySize": 9001,
                "icon": "ms-appdata:///roaming/git-for-windows.ico",
                "name": "Git Bash",
                "padding": "0, 0, 0, 0",
                "snapOnInput": true,
                "acrylicOpacity": 0.75,
                "useAcrylic": true
            }
        ]
    },

    // Add custom color schemes to this array.
    // To learn more about color schemes, visit https://aka.ms/terminal-color-schemes
    "schemes": [
        {
            "name": "Argonaut",
            "black": "#232323",
            "red": "#ff000f",
            "green": "#8ce10b",
            "yellow": "#ffb900",
            "blue": "#008df8",
            "purple": "#6d43a6",
            "cyan": "#00d8eb",
            "white": "#ffffff",
            "brightBlack": "#444444",
            "brightRed": "#ff2740",
            "brightGreen": "#abe15b",
            "brightYellow": "#ffd242",
            "brightBlue": "#0092ff",
            "brightPurple": "#9a5feb",
            "brightCyan": "#67fff0",
            "brightWhite": "#ffffff",
            "background": "#0e1019",
            "foreground": "#fffaf4"
        },
        {
            "name": "Blazer",
            "black": "#000000",
            "red": "#b87a7a",
            "green": "#7ab87a",
            "yellow": "#b8b87a",
            "blue": "#7a7ab8",
            "purple": "#b87ab8",
            "cyan": "#7ab8b8",
            "white": "#d9d9d9",
            "brightBlack": "#262626",
            "brightRed": "#dbbdbd",
            "brightGreen": "#bddbbd",
            "brightYellow": "#dbdbbd",
            "brightBlue": "#bdbddb",
            "brightPurple": "#dbbddb",
            "brightCyan": "#bddbdb",
            "brightWhite": "#ffffff",
            "background": "#0d1926",
            "foreground": "#d9e6f2"
        },
        {
            "name": "Rebecca",
            "black": "#12131e",
            "red": "#dd7755",
            "green": "#04dbb5",
            "yellow": "#f2e7b7",
            "blue": "#7aa5ff",
            "purple": "#bf9cf9",
            "cyan": "#56d3c2",
            "white": "#e4e3e9",
            "brightBlack": "#666699",
            "brightRed": "#ff92cd",
            "brightGreen": "#01eac0",
            "brightYellow": "#fffca8",
            "brightBlue": "#69c0fa",
            "brightPurple": "#c17ff8",
            "brightCyan": "#8bfde1",
            "brightWhite": "#f4f2f9",
            "background": "#292a44",
            "foreground": "#e8e6ed"
        }
    ],

    // Add custom keybindings to this array.
    // To unbind a key combination from your defaults.json, set the command to "unbound".
    // To learn more about keybindings, visit https://aka.ms/terminal-keybindings
    "keybindings": [
        // Copy and paste are bound to Ctrl+Shift+C and Ctrl+Shift+V in your defaults.json.
        // These two lines additionally bind them to Ctrl+C and Ctrl+V.
        // To learn more about selection, visit https://aka.ms/terminal-selection
        {
            "command": {
                "action": "copy",
                "singleLine": false
            },
            "keys": "ctrl+c"
        },
        { "command": "paste", "keys": "ctrl+v" },

        // Press Ctrl+Shift+F to open the search box
        { "command": "find", "keys": "ctrl+shift+f" },

        // Press Alt+Shift+D to open a new pane.
        // - "split": "auto" makes this pane open in the direction that provides the most surface area.
        // - "splitMode": "duplicate" makes the new pane use the focused pane's profile.
        // To learn more about panes, visit https://aka.ms/terminal-panes
        {
            "command": {
                "action": "splitPane",
                "split": "auto",
                "splitMode": "duplicate"
            },
            "keys": "alt+shift+d"
        }
    ]
}