Depending on the version of CollectionBuilder you’re using, there are two ways to generate the site:
GH users will need to turn on the GitHub Pages option via the settings page of their repository on GitHub.com.
CDM and SA users will need to use a Jekyll command.
Both of these approaches are described below.
GH users need only consult the GH: Enabling GitHub Pages section below.
CDM and SA users should begin with CDM & SA: Build the Site and continue on to the next step.
- GH: Enabling GitHub Pages
- CDM & SA: Build the Site
- CDM & SA: Move the _site Files to Your Web Server
Enabling GitHub Pages
- In your GitHub account, click on the “Settings” button at the top right of your repository page
- When you’re on the settings page, scroll down to the “GitHub Pages” section.
- Change the “source” dropdown button from “none” to “main” (or “master” if that is your default branch) which will cause the page to refresh.
- Scroll back down to the GitHub Pages section. You’ll see a blue alert that indicates your website is being built.
- Wait a couple minutes, then refresh the page (or just refresh constantly). The alert will change to green when the site is ready. When it does, click on the URL that appears in the GitHub Pages box to check out your site!!!
- To make your site’s URL easy to access in the future, copy the site URL and go back to your repository’s main page.
- At the right-hand side of the top of the page, click on the “Edit” button.
- Add your copied URL to the website section and click “Save” – This will let you easily access the generated site whenever you come to edit the page.
Congratulations! Your site is now live. GH users can now move on to the Advanced Topics section.
CDM & SA Users:
1. Building the Site
So … Where are the files???!!!
Jekyll creates the web like it’s 1999, outputting a folder of HTML, CSS, and other static assets as a complete site–but on first using the generator, it’s hard to know where those files actually are and how you might move them to another server. Let’s lift the veil:
Jekyll outputs the complete website in a directory called “_site” while generating the files for development or for production.
When you’re generating a test site using
jekyll s on the commandline, Jekyll automatically builds all the pages with links based on the development server, by default using urls that start with
To build the site for production, you’ll need to
jekyll build instead.
In contrast to the development server,
jekyll build generates the complete site using the real world URLs configured in your _config.yml.
However, CollectionBuilder only adds some features when the site is built using the Jekyll “production” environment (which is the default when generated on GitHub Pages).
The environment can be added to the commandline, as
JEKYLL_ENV=production jekyll build, but to make it easier to use CollectionBuilder provides the
rake deploy command as an alternative.
Build using “rake deploy”
When you are ready to build your site, go to your terminal and click
CTRL C to stop the development server.
rake deploy into the terminal and push ‘Enter’ on your keyboard.
This does three important things:
- It builds the site with the appropriate (full) links.
- (so https://www.lib.uidaho.edu/digital/boxing/browse.html rather than http://127.0.0.1:4000/digital/boxing/browse.html)
- It add rich meta markup for items pages including Open Graph, Dublin Core, and Schema (as configured in config-metadata.csv).
- It adds Google Analytics code if you have added a
google-analytics-idin the _config.yml file.
- Waiting until final deployment to add the analytics prevents false hits on your analytics account.
A Note on Google Analytics
We don’t necessarily recommend adding Google Analytics to your website. We assume, however, that a large number of our eventual users might use the tool to collect web statistics (we do in many of our sites).
If you’re interested in an analytics platform that doesn’t sell your users’ data, we’ve enjoyed Matomo recently, and we intend to add more analytics options to CollectionBuilder in the future.
CDM & SA Users:
2. Moving the _site Files to Your Web Server
Once you’ve completed the build process, the web files you need will all be in your
- Open the
_sitedirectory using your file explorer or finder.
- Copy everything you’d like to move into a production site.
- Paste the copied files and folders into the directory on your web server you’d like to serve this site from.
Note: If you’d like to serve this up from a GitHub Pages enabled repository, that is also possible. Talk to us.
That’s it. You’ve Done It. And hopefully now you can do it again (and again and again), and after awhile, teach others this development model and/or tool as well. Please let us know if we can help! (Evan has time, I’m sure.)
« Finish Back to Top Advanced Topics »