Updating the Webpage
To add/edit blog posts or information pages, you don’t need to set up Ruby/Jekyll. You only need to add and/or edit some files, which you can even do on the GitHub code repository itself (no actual git knowledge needed!)
Overview of this page:
- Adding a blog post
- Adding a (non-blog) page
- Previewing changes locally
- Committing changes to the website
- GitHub security alerts
- Changing the blog layout/theme
- Links to Jekyll and Kramdown tutorials
Adding Blog Posts
Quick and Dirty method
- Go to the posts folder in the repo and click on add file and either upload your post as a Markdown file or create a new file.
- Accept GitHub’s suggestion to create a new pull request by clicking ‘propose changes’
- Wait for someone to take a look at your pull request and accept or comment on it.
As for the file, add the following header:
---
layout: post
title: "POST TITLE HERE!"
date: YYYY-MM-DD
---
Save the file as YYYY-MM-DD-helpful-title.md
.
Less Quick, but still speedy
- Create a new file in the
_posts
directory using the python script:cd _posts python3 make_post.py "Name Of Post"
- Create a new branch and pull request following the guide for updating changes globally.
Manual method
Adding posts that appear on the blog section on the main page:
- Create a new branch for your update (see updating changes globally)
- Create a new file in the
_posts
directory. The file needs to follow the naming conventionYYYY-MM-DD-some-description-here.markdown
. - The file should start with a special header. You can copy and adapt this header, or just copy, rename and update one of the already existing blog posts. (Jekyll will complain about the
post
layout, but for now giving it a dummy value instead of an actual layout gives the best result.)--- layout: post title: "POST TITLE HERE!" date: YYYY-MM-DD ---
- It’s also possible to add another line to the header,
categories
, e.g.categories: events
orcategories: announcements
. Once/if we have a lot of posts, this might be interesting for filtering the posts, but for now, it’s not really important. - The rest of the post is the actual content, written in a flavour of Markdown called Kramdown.
- You can add images or other files if you put them in a subfolder of
files
. - Create a new pull request and wait for feedback.
Adding Pages
- Create a new branch for your new page (see updating changes globally).
- Create a new markdown file in the
pages
folder. - Add a header following this format to your file:
--- title: PAGE TITLE HERE permalink: /URL-SUFFIX-HERE/ ---
- The rest of the page is the actual content, written in a flavour of Markdown called Kramdown.
- To create a link to the page to the sidebar, you need to add it to
_data/navigation.yml
. For intra-website links, only the permalink is necessary, not the full URL. - You can add images or other files if you put them in a subfolder of
files
. - Create a new pull request and wait for feedback.
Installing Ruby/Jekyll and Previewing the Page Locally
- Install Ruby and Jekyll (scroll past the requirements and open the guide that matches your operating system; the guides tell you how to install everything you need).
- Clone this repository:
git clone https://github.com/fs-linguistics/fs-linguistics.github.io.git
and navigate to the corresponding directory. - Run
bundle install
to get all of the packages our website relies on. - To build the site locally, run
bundle exec jekyll serve
. It’s now available in your browser at http://localhost:4000. You can stop the build withCTRL
+C
. (Don’t worry about messages likeBuild Warning: Layout 'post' requested in _posts/some-date-and-title-here.markdown does not exist.
)
Updating Changes Globally
This can be done without installing Ruby and Jekyll, although it’s a good idea to try out changes locally first.
We have implemented some controls to avoid breaking changes. Instead of pushing your changes to the shared repo, you now have to create a pull request containing your changes. Depending on how comfortable you feel with the GitHub website and/or CLI, there’s two approaches: creating the pull request on the website or on the command line using the GitHub CLI.
Pull Requests (GitHub)
- Check out a new branch, make and commit your changes.
git checkout -b fix-typos git add . git commit -m "Fix typos on all pages of the website"
- Push your new branch.
git push
- Create a new pull request on Github, give it an informative title (e.g. “Fix typos on the website”).
- Associate your pull request with the branch you created.
- Wait for someone (i.e. John or Nicolai) to take a look at your pull request and merge or comment on it.
Pull Requests (Github CLI)
- Check out a new branch, make and commit your changes.
git checkout -b fix-typos git add . git commit -m "Fix typos on all pages of the website"
- Create a pull request using gh.
gh pr create -t "Fix typos on the website"
- Answer the questions.
- Check the pull request looks correct on the website.
- Wait for someone (i.e. John or Nicolai) to take a look at your pull request and merge or comment on it.
Security Alerts
Every now and then, GitHub has a security concern for some package that is used to construct the website.
If GitHub provides a pull request for this via @dependabot with a name like “Bump activesupport from 6.0.2.1 to 6.0.3.1”, simply accept the pull request and you’re done.
Otherwise, there might just be an alert in the Security tab of the website’s GitHub project.
You can click on the button that invites you to perform a Dependabot security update, which will create a pull request for you that you just need to accept.
Alternatively, the security alert will also tell you how to solve the problem yourself: Just add the code it suggests (gem "gem-name-here", ">= version.number.here"
) to the end of the Gemfile, and then run:
gem install gem-name-here
gem update gem-name-here
bundle update gem-name-here
bundle install
This will update Gemfile.lock. Commit and push the changes.
Jekyll Theme Modifications
We’re currently using a modified version of the Minimal Mistakes theme for Jekyll. The most important changes are:
assets/css/main.scss
: Custom CSS_data/navigation.yml
: Sidebar contents
To override a file from the theme, simply create a new file in our repo that has the same path as the one in the Minimal Mistakes repo.