|
| 1 | +# Editing OHW web site content and layout |
| 2 | + |
| 3 | +The OceanHackweek web site is a Jekyll site that uses the [Jekyll Spectral theme.](http://jekyllthemes.org/themes/spectral/) |
| 4 | + |
| 5 | +### Location of main content documents |
| 6 | + |
| 7 | +Relevant, editable content is organized in the following directories and files: |
| 8 | + |
| 9 | +- [_config.yml](https://github.com/oceanhackweek/oceanhackweek.github.io/blob/master/_config.yml): core Jekyll site configuration, including some banner/header/footer text and urls |
| 10 | +- [jekyll-spectral-theme/_includes](https://github.com/oceanhackweek/oceanhackweek.github.io/tree/master/jekyll-spectral-theme/_includes) directory: front page content, broken up into sections, one markdown file per section. |
| 11 | + - The layout templates for sections and section order are controlled by [jekyll-spectral-theme/_layouts/default.html](https://github.com/oceanhackweek/oceanhackweek.github.io/blob/master/jekyll-spectral-theme/_layouts/default.html) |
| 12 | + - Each section specifies a template for its layout, where the templates available are found in [jekyll-spectral-theme/_layouts](https://github.com/oceanhackweek/oceanhackweek.github.io/tree/master/jekyll-spectral-theme/_layouts) |
| 13 | + - Section two ("Information for Applicants") is a special beast. While [jekyll-spectral-theme/_includes/section-two.html](https://github.com/oceanhackweek/oceanhackweek.github.io/blob/master/jekyll-spectral-theme/_includes/section-two.html) orchestrates it, the directives there point to content to be grabbed from tags `title` and `description` in [_pages/01-applicants.md](https://github.com/oceanhackweek/oceanhackweek.github.io/blob/master/_pages/01-applicants.md) |
| 14 | +- [_pages](https://github.com/oceanhackweek/oceanhackweek.github.io/tree/master/_pages): content for extra pages, including all the pages accessible via the drop-down menu on the upper right of the page. |
| 15 | + - The destination page file name (what a user sees) is *not* the source markdown file name on the repository; instead, the destination file name is found in the `permalink` tag within the markdown file. For example, for [_pages/01-applicants.md](https://github.com/oceanhackweek/oceanhackweek.github.io/blob/master/_pages/01-applicants.md), the destination file name is [applicant-info.html](https://oceanhackweek.github.io/applicant-info.html) |
| 16 | + |
| 17 | +There might be more; these are the ones I'm certain about. |
| 18 | + |
| 19 | + |
| 20 | +### Editing and testing locally (in your computer) with Jekyll |
| 21 | + |
| 22 | +Clone the GitHub repo locally, then edit the content of files following the documentation in the previous section. To view your changes, rebuild the site using Jekyll. |
| 23 | + |
| 24 | +Install Jekyll locally through conda with: |
| 25 | + |
| 26 | +```shell |
| 27 | +conda create --name JEKYLL rb-bundler compilers |
| 28 | +conda activate JEKYLL |
| 29 | +bundle install |
| 30 | +``` |
| 31 | + |
| 32 | +To build and serve the site, run this statement: |
| 33 | + |
| 34 | +```shell |
| 35 | +bundle exec jekyll serve |
| 36 | +``` |
| 37 | + |
| 38 | +The site will be available at `http://127.0.0.1:4000/`. |
0 commit comments