How Can I Make My Own Collection?
Click on the collapsable titles to find out!
Click on the collapsable titles to find out!
Before we start, you will need a GitHub account.
Once you have that account ready, we can start with making a collection. The collection will be made in the form of a webpage and the back end work of it will be done on GitHub.
Start by going to https://github.com/collectionbuilder
On the CollectionBuilder page, under the pinned repositories, click on the repository titles, “collectionbuilder-gh”
On the right hand side of the page, a green button will appear which states, “Use this template”. This will prompt you to make a new repository for yourself under your username. Type in the repository name as you wish. Type in an appropriate description and make sure the repository is public. Scroll down and click the green button to make the repository.
You can now see many files. These files are basically static web files, comprising of css, java, html files, which will make your webpage for your collection. But in order to make it a website, you need to go to “settings” by clicking the little gear button in the right-hand side of the page of your repository. On the left hand side, there is going to be a tab with many options. Go down and click the “Pages” bar.
Under the “GitHub Pages” header, click on the dropdown menu that says, “None” and set it to be “main”. Don’t forget to click “Save” right next to it!
Your page will refresh automatically and you will be prompted a message that your repository is now a site, ready to be published.
From the message, copy the link of your webpage and on the horizontal tab, click on “<> Code” >>> Click on the About Section in the right hand side corner >>> Paste the link under the “Website tab”. Don’t forget to save your changes!
However, when you click on the link, you’ll notice that the webpage doesn’t really work. It may not show some of the elements, or will show the elements from the template we copied. There are some elements that are broken when we copy the template and change some of the settings. For that, we need to adjust the files, to fix them or change the details to make the collection truly yours.
Back to the page where you could see a list of files, we will edit the “config.yml” file from the list. .yml files are the base instructions for building any site. Click on this file to open it and then click on the pencil icon in the right hand side corner to start editing. Here we will edit out the URL variables.
You will see many lines of code commented out with a simple hashtag (“#”). They are comments about the variables used in the CollectionBuilder template.
Find the section of code saying “URL VARIABLES”.
Uncomment the line which says, “#url:...” by removing the hashtag.
The line of code states the following URL: https://collectionbuilder.github.io. We will want to change the portion of the url which says “collectionbuilder” to our own github username so it can start pointing to our repository instead of CollectionBuilder's. So for example, my new url will look like this: https://mahnoorzah.github.io
Find the comment, “#baseurl:..." and uncomment it.
The baseurl may look like: “baseurl: /collectionbuilder-gh”. You may wanna change the name to your own repository’s name so that it can look something like: “baseurl: /testing”
Then you will want to change the “source code” as well which you may find underneath the baseurl. The source code will be something like: https://github.com/CollectionBuilder/collectionbuilder-gh. You may want to change the part of “CollectionBuilder to your GitHub username, and the part of “collectionbuilder-gh” to what you have named your repository. Hence my source code will look something like: “https://github.com/mahnoorzah/testing”
You now may want to save the changes you’ve made. Scroll down to the bottom of the page. You will find a “Commit Changes” option. It is common practice to write down what changes you make to your repository as you go along, for future references and/or collaborative purposes. Over here, I would personally write something like, “edited url variables”. Click the green button “commit changes” to save your editing.
You can see the changes you have made by going back to the main page by clicking the “<Code>” option on the horizontal tab. You can now see that the GitHub site states that you edited the URL variables and that 2 commits were made.
You might be able to now click the link which you put in the "About" section of your main page, "<Code>"
In this step, we will be making our "metadata" which is basically your raw data which you want to be converted as your online collection.
On your computer have a folder of pictures or videos you may want to use for your collection. For example, for a collection of DePauw's buildings, you may want to download pictures of each building which you want to showcase in your collection. Name the pictures appropriately. This will be of major help!
You may want to use this link to use a template of how you may want your metadata to look. https://drive.google.com/open?id=1x48Te3duPAxh53foEihQVKTfCKUjaCCbH7TrMMd_yU4 . Edit your fields and the data as you seem fit. Make a copy of it for yourself and download the spreadsheet for your ease.
Note that the spreadsheet is in a .csv format. Keep it in this format! This is the only format Jekyll will recognize.
If you download/clone the spreadsheet and edit it in Google Sheets, download the file as .csv and do not open it. The Excel Spreadsheets will run the file, changing the .csv into an Excel Workbook. Just download the edited Google Sheets as a .csv file and upload directly to GitHub.
If you download/clone the spreadsheet locally on your laptop, edit it as an Excel Workbook and then save it as .csv file. Upload it as it is on the GitHub
Note: when you add images or videos to the .csv file, add the description of the type of the file, e.g. images/jpg or video/mp4. These data types can also be seen in the demo .csv file you download, so be careful with what you need to specify and read the demo file carefully.
Upload your files to the repository on the GitHub website, by clicking on the "objects" folder on your main <Code> page. After opening your objects folder, you will see an "Add File" button on the right hand side of your page. Then click "upload files". Then just drag your files to the page. Don't forget to add comments for your commit. (NOTE: YOUR .CSV FILE WILL NOT BE UPLOADED HERE. IN THE OBJECTS FIELD, ONLY YOUR MP3 , MP4 AND/OR JPEG FILES WILL BE UPLOADED)
After you have made your .csv file, you may want to add it your repository as well. On the same GitHub <Code> page, add it to the folder named "data". Add this file to the folder just how you added your media files to the objects folder. Don't forget your commit comments! Note: your .csv file does not go in the same place as your visual and audio files. While they go in your objects folder, your .csv file will go in your _data folder.
In the config.yml file, scroll down to the variable meta data and add your file's name there as well.
Open up the config.yml file which we used in the first step to edit the URL variables.
Scroll down to SITE SETTINGS
Edit the title of the page to what you want the online webpage to show. Consequently, edit the tagline as well that describes your collection.
Add a description as well! Give some information as to what your collection is all about!
edit the author variable as well. Set it as your GitHub username.
Scroll down to COLLECTION SETTINGS
For the metadata variable, add the name of your .csv file. Make sure the name is correct and as it was spelled. Usually this is where little typos are made and links break. You may also want to just copy the name to ensure accuracy.
Add your commit comments!
You can now click on the same link in your "About" section on the <Code> main page and see the changes reflect on your online collection's webpage!
Open up the data file
open up the theme.yml file. This file is separated into sections which you can see on the webpage of your collection, like "HOME", "ABOUT" e.tc.
You may want to add a featured image which serves as a banner for your web home page. In the files you uploaded, you assigned a particular object id to each picture in the .csv file you uploaded. To use an image, type it's object id to the "featured image" variable under section of HOME PAGE in the theme.yml file. An alternative way of doing this is to click on the Browse page on your collection's webpage, scroll through your media and see what you like, click on that image, and from the image's URL, copy it's object id which will be at the very end of the URL.
You can also edit out the padding and the position of the banner as you see fit through the corresponding variables underneath the "featured image" variable
You may want to edit the SUBJECTS PAGE as well. This is the page which will be demonstrated to highlight certain keywords in your collection, which will then pop up as words on a separate page. You can edit here what sort of keywords you want to highlight which represent your collection best.
The "subjects-min" variable controls how many times does a word need to appear in your collection for it to be featured as a keyword. Right now it is one. You can change it to the number you may want to see. Play around with it for a while and choose your desired number.
With this information under your belt, you can now edit Browse and Map pages similarly. See what fits your collection and edit out the fields accordingly.
Go to the main page of your <Code> page.
Click on the _data file
Open the config-metadata.csv file
Now this is a .csv file which represents the metadata on the Items page
If you have any other fields/data titles which you may want to change accordingly here, you can do so. This feature is important as every metadata will have unique fields.
Add in your unique data accordingly!
Now you may want to edit out the navigation bar on your website.
Open config-nav.csv file.
You can delete pages here which seem unnecessary. For example, for the collection of Types of Computers, the Map Page seemed unnecessary. So, I deleted it!
Similarly, you can edit the search bar as well
Open the config-search.csv file.
You can edit out which fields you don't want to appear, while adding in fields which are unique to your metadata
You may want to customize the colors of the website.
Go to the config-theme-colors.csv file in the _data folder.
all the terms you see are variables of a specific color.
declare a new "variable" by just typing out a name for your color in the same list. It can be anything simple such as "newcolor" to "shimmeryglitterygold".
to assign it to a color, after the "variable", type in a comma ( , ) and then paste in the hexadecimal of the color. Do not forget the "#"!!
You can even change the colors which the original variables are assigned to by just specifying a new hexadecimal after typing in a comma after the variable.
You can now use your variable in the theme.yml file in the _data folder when you go to the <Code> main page and add in colors to your website accordingly
An alternative way of doing this would be to just directly add in the hexadecimals of the colors you want to use in the theme.yml file.
Here we will edit our About Page
You can now change your About Page's content. You can do this by going to the "page" section in the <Code> main page.
Click on the "about.md" file.
You can now edit the contents of the page accordingly and what gets displayed on the page.
The feature image of this page can also be changed. It can be seen where a hyperlink is used to include a feature image. You can either use an image which you uploaded in your Objects file or you can use a hyperlink of an image off the internet as well.
To edit the "about the about page" section, I went to the page <Code>, and in the right hand side of the page found the button "Go to file". Here I searched the result, "about_the_about" and found a page that is found in the _include file. I clicked on it and found that you can edit it to your desire. This is a feature you might want to use if you are looking to completely revamp your website.
And this is it! While this list is not exhaustive, you're also free to explore the files and folders of your repository and dive deeper into how you can truly make your website **yours**. This is just a step by step to how you can set up and lightly customize your site.