Website Instructions
Setup
Our website uses Jekyll, a simple, static, and blog aware site generator. First, you must install Jekyll and Ruby (the language Jekyll is written in).
Although Windows is not an officially supported platform of Jekyll, it is still possible to install it and use it to run a website. Go to this site and scroll down to ‘Installation via Bash on Windows 10.’ It will first lead you to this site, follow the instructions by opening Powershell as an administrator, enter the line of code, and then restart your computer when prompted. After that, install one of the Linux distributions listed on the site. We’ve been successful with using Ubuntu, but you’re welcome to try a different one. You must initialize your distro at least once, do so in Ubuntu by opening it up and creating an account.
Next, open a command prompt and type ‘bash,’ which will switch you to a bash instance. Then, you must update your repo list and packages; type in the code in the second terminal to do so. After that, install Ruby by entering the code in the third terminal. (Note: enter the lines of code separately) From there, update your Ruby gems with the line in the fourth terminal, and then install Jekyll with the line in the fifth terminal.
While the Jekyll site says we don’t have much left to do, we actually have to do a few more steps for it to work. First, go to the Github repository for our current website. Click ‘Clone or Download’ and copy the URL. Next, create a new Github repository for your own website. One the ‘Code’ tab of your repository, scroll down and click ‘Import Code.’ Paste the copied URL and wait for it to import. Once that is complete, click ‘Clone or Download’ once again on your repository and copy the URL. From there, open your documents folder (or whatever place you want the site to be located) and open a command prompt. Enter ‘git clone’ and then paste the URL. Once that is done, switch to a bash instance and enter:
sudo apt-get install zlib1g-dev
bundle update
bundle exec jekyll serve
Your site should now be running. Copy the site address and paste it into a browser to see it and any changes you’ve made.
Other Helpful Programs:
- TortoiseGit: TortoiseGit is a Windows Shell Interface to Git and is based on TortoiseSVN. It is an easy to use program that can do things such as commit changes, show logs, create branches and more. (Note: TortoiseGit is only available for Windows users)
Though Jekyll does work on Windows, the preferred operating system is macOS. Follow this link for a step-by-step instruction guide on macOS setup.
While the Jekyll site says we don’t have much left to do, we actually have to do a few more steps for it to work. First, go to the Github repository for our current website. Click ‘Clone or Download’ and copy the URL. Next, create a new Github repository for your own website. One the ‘Code’ tab of your repository, scroll down and click ‘Import Code.’ Paste the copied URL and wait for it to import. Once that is complete, click ‘Clone or Download’ once again on your repository and copy the URL. From there, open your documents folder (or whatever place you want the site to be located) and open a command prompt. Enter ‘git clone’ and then paste the URL. (Note: the fewer folders you need to go through to reach your code, the better. This will make it simpler to run your code for local testing).
Before you start, we suggest installing the program “Sourcetree.” This is the program we use on Mac to connect our code to GitHub. Click here to install Sourcetree. Once it is installed, open the folder your website is held in on your computer. Now you can use Sourcetree to commit, push, and pull your code to and from GitHub. This will automatically update your code in Atom every time you pull. To create pull requests, which add your code to your website, use the GitHub website.
Now you have the website running, but no way to actually change it. First, you need to get a code editor. We use Atom. (Note: The following instructions will be geared towards using Atom, and it may be different for the code editor you’re using.) Once it is installed, open it and then choose ‘Open Folder’ and select your site. Now you’re ready to start coding! (Note: You may want to create another branch to work on. If you work on master, any changes you make will immediately show up on your website if it is public.)
How to view local changes on Windows:
- Open a command line prompt and type “bundle exec jekyll serve” then hit enter.
- Your site should now be running. Copy the site address and paste it into a browser to see any changes you’ve made.
How to view local changes on macOS:
- Open terminal and change directories to your code’s folder.
Example: cd documents → cd frc2052.github.io - Now type “jekyll serve” in terminal to run your code
- Open your web browser and type the address of Jekyll’s built-in server “127.0.0.1:4000” into the URL bar.
As long as your terminal is running, when you refresh this web page it will update to your local code in Atom
Changing the Site
To change the color of a specific word or string of text, use the “span” tag:
You can also change the color with a CSS style following these steps:
-
To change the color using a CSS style, add it to a class in your style sheet like this:
- Circled in white: “--maroon-color” gives a name to the color value “#732626”
- Circled in pink: “#eeeeee” is the color’s value. There are many ways to find a color’s value, but one of the easiest ways is to find a hex color tool online. Here is a simple HTML color picker.
-
Then, you can reference these color values & add them to your other classes:
- Circled in teal: “.maroon” creates a new style class
- Circled in lime: “color” states that the following attribute will change the color
- Circled in white: “--maroon-color” references the name of the value from the “:root” style class (first picture)
- Circled in yellow: “black” states that the maroon color will be in place of black, the default dark color
-
Incorporate these colors into your HTML code for text by adding it to a class attribute:
- Circled in teal: “maroon” sets the class to the “.maroon” CSS class from the second picture
- Circled in lavender: “class” states that the following attributes are classes
- The same can be done for a header or background. Just create a CSS class and add the attribute as a class in the start tag of what you want to change
To add or change an image, download your chosen image and move it to the ‘Assets’ folder of the website and then to the ‘Images’ folder within it. Now, add your image with an image tag.
This example is for an image named “dog.jpg” that is found in the “images” folder inside the “assets” folder within the folder that holds your website:
You can also change the image’s height and width, add an href, or set it to a specific CSS class:
This code would display the image “dog.jpg” (found in the images folder within the assets folder) with attributes of the CSS class “memberPhotos” and a height of 150 pixels. When clicked, it will open the website "https://www.team2052.com" in a new tab (target=”_blank”).
Resources
We presented a breif overview of our website at the Medtronic Jumpstart. Find our presentation here.