This is the repo that hosts the information used in the GAEC website, which is from the Academic Template for Hugo (see the documentation here for specific info). The goal for this website is that anyone in the lab can update when needed via markdown files, so this is meant to be a collaborative effort.
The URL for the website is currently the basic, free one (gaec-lab.netlify.app). If we want to have a custom domain, that is easy to do but there is a small cost per year).
Note
We can edit this Github repository online or offline; once we update the files, Netlify will sync the website after a very short time delay. But, sometimes the website could fail to render due to issues in some files, especially when many things are added to the repository. There is a way to debug and preview the website locally using our computers. To configure offline debug settings, please see the end of this document.
In order to add yourself to the lab website first clone this repository to your local machine. For simple instructions on how to do this please look here.
Once you have the repository on your local machine, open the content file in a text editor such as VS Code.
Add a new folder titled yourfirstnameyourlastname within the author folder.
Next, copy the _index.md file from another author folder (ex. the _index.md file within the brookecox folder) and replace the information with your own. If you wish to add your pronouns to your author bio, include them in the role field before your position in the lab with a line break in between.
For example, 'role: She/Her/Hers
Undergraduate Researcher".
To add a profile picture, upload an image labeled avatar.jpg (can be png, but then update the reference accordingly) that preferably is <= 1 MB.
- Each lab member belongs to a different category. These can be seen (and/or edited) in
content/people/people.md. Note that the attribution must be spelled and capitalized exactly the same. - If you do not have one of the social options (e.g. you don't have a Twitter), then remember to comment out those lines with
#.
In order to add a poster, navigate to static/media and upload the poster file labelled as 'YYYY-MM_lastName_conferenceAbbrv.jpg'. Please make sure your file is around 1 MB in order to make sure loading times are not too long. Information on resizing images is provided below in Adding Pictures. After adding your picture, navigate to content/poster/poster_gallery.md and add the details for your poster following the examples of the other ones. Here you can add a caption labeling the event at which you presented your poster.
Photos can be added to different website items, like lab member profiles, publications, and lab updates. PLEASE make sure you re-size your images to ~ 1MB before including, otherwise we will quickly get to a point where the website is slow to load due to a number of large file size pics. Re-sizing can be done at sites like this one or this one. These were found with a quick google search, there are also others.
Content can either be edited directly in GitHub or by cloning the repository to your local machine, editing files, and pushing back to GitHub. Website deployments (rendering the website) are done automatically with each commit via Netlify, so it's advised that you clone the repo when possible (e.g. push several commits at once, instead of one for each small change).
- NOTE: currently the Netlify account is linked to Mirela's GitHub, but anyone can have access if they want. Please send an email to her asking to be added.
Each lab member has their own "page" on the website, under the Team section. To update your page, navigate to your folder and update the information in _index.md as appropriate. To add a profile picture, upload an image labeled avatar.jpg (can be png, but then update the reference accordingly) that preferably is <= 1 MB.
- Each lab member belongs to a different category. These can be seen (and/or edited) in
content/people/people.md. Note that the attribution must be spelled and capitalized exactly the same. - If you do not have one of the social options (e.g. you don't have a Twitter), then remember to comment out those lines with
#.
To add lab update (i.e. short post like a blog or news announcement), navigate to content/post and create a folder starting with the date and a short qualifying of the name, for example "2021-08-15_testPost". Inside the folder create a file named index.md that files the standard toml format; see the sample post for an example. You can also add an associated image (image.png) if you want.
If you have a poster you'd like to add to our image gallery, navigate to assets/media/albums/poster_img and upload a png (or jpg) of your poster there. After adding your picture, navigate to content/poster/poster_gallery.md and add the details for your poster following the examples of the other ones. Here you can add a caption labeling the event at which you presented your poster.
- Please make sure your file is < 5 MB maximum; we don't want to bog down the website with large files when they don't have to be.
- To re-size your images, please see the section above labeled Adding Pictures.
- Please also label your file as
YYYY-MM_lastName_conferenceAbbrv.pngto be consistent.
To add a publication, navigate to content/publications and create a folder labeled as Date-journalAbbr-descriptor, so for example "2021-01-04_AWM-Perin-Tulbure" or "2020-12-07_AGU-southeastern-Gaines" (these examples come from Mirela's site).
If having issues with the YAML then see Troubleshooting below
Inside each folder you can have the following 4 items
- citation file (
cite.bib): this is a BibTex file with the citation for the paper. If this is added, then it allows people to download the citation from the lab website. - pdf of the paper
- NB If your paper is open access, please just add the URL in the
index.mdfile in the "pdf" place in order to save memory. - Otherwise, upload a pdf of the paper and rename the file to be the exact same name as the publication folder
- NB If your paper is open access, please just add the URL in the
- an associated image (
featured.jpg): some image if you want, otherwise the publication will show up only with text on the website. index.md: this is the primary metadata for hoow the website renders the publication info. Similar to other index files, this has a specific toml format, so make sure everything is filled out as needed. Remember, if other lab members are on the publication, refer to them using their username on the website, which is all lowercase (e.g. joshgray). This way their user page is linked to the publication.- If you're adding a paper that has a publish date after the current date (e.g. it is 8 Dec and your paper will be published 14 Jan), then you need to add yesterday's date to the
publishDate:field and the future date to thedate:field in order for it to be shown on the website.
To change around how the website looks, including color, background pictures, etc, see the following, plus the Wowchemy documentation (linked at top) for more details.
content/homecontrols the home pageconfig/_default/controls the underlying metadata and parameters
Cautiion
Normally, this part is not necessary if we just want to add some content to the website. Unless there are some errors rendering the website.
The website is created by the Wowchemy Academic Template using Hugo, so we can configure Hugo on our local computer and debug the website. The method of configuring Hugo varies by the operation system we use. There is a comprehensive documentation describing the required steps, but special attention should be paid to some stuff.
If we use Mac OS and Linux, it's easy, we can just follow the documentation to install Hugo. But, be sure to choose version 0.87.0 as our website template depends on that version. Newer version could introduce compatibility issues.
Here, we describe the configuration steps for Windows machines without using Chocolatey or Scoop. We use the pre-compiled Hugo binary.
- Download Hugo extended for Windows binary version 0.87.0. Be sure to download "hugo extended", not "hugo", it has extended functionalities used by our website template.
- Unzip the downloaded file to a system folder, for example,
C:/Program Files. The folder should have three files:hugo.exe,LICENSE, andREADME.md. - Download and install Go if don't have one installed on the machine. The installation of Go is straightforward and thus skipped here.
- Add the Hugo folder to system Path. Right click on the Start button -> Click on System -> Advanced System Settings -> Environment Variables. Then, in the User variables section, select the row labeled “Path” and click the Edit... button. In the popped up dialog, click the Browse… button and select the directory to which hugo.exe was extracted, for example,
C:/Program Files/hugo_extended_0.87.0_Windows-64bit/. Click OK at every window to exit. - Open a terminal and execute
hugo helpto check whether the installation has succeed.
- Clone the website repository to the local machine using
git clone, open up a terminal andcdto that folder. - In the terminal, execute
hugo server -D, the website should be compiled and can be found in a web browser using the addresshttp://localhost:1313/. The argument-Dstands fordebug, so any warning and error information would be shown in the terminal. - To close the server, press
CTRL + Cin the terminal.
Hugo supports live update, which means when the local server is running, changing the content of the website would trigger a rendering event and update the local previewing website. However, the live update does not handle structure changes, which means for example when adding a new blog post folder in the post directory, we'd have to quit and restart the hugo server to see it.
How do I fix YAML errors?
- Especially if you're copying content from elsewhere online (e.g. an abstract into a publication
index.mdfile), it's best to check the YAML is valid before you try pushing (it will just fail anyways if something is wrong). Here's a helpful site for you to double-check: http://www.yamllint.com/
What happens if the website hasn't updated despite you making changes?
- Most likely there the rendering process didn't find something where it thought it should. If you don't have access to the Netlify account, either ask Ian to check or ask for access. Usually this is because everything must be in its specific place with a specific name (and references to different files also need to be matched). This can take some trial and error, but one thing that can help is comparing with a fully-done website, like Mirela's site and the associated GitHub repo.
Wowchemy's Research Group Template for Hugo
The Research Group Template empowers your research group to easily create a beautiful website with a stunning homepage, news, academic publications, events, team profiles, and a contact form.
Check out the latest demo of what you'll get in less than 5 minutes, or view the showcase.
Wowchemy makes it easy to create a beautiful website for free. Edit your site in Markdown, Jupyter, or RStudio (via Blogdown), generate it with Hugo, and deploy with GitHub or Netlify. Customize anything on your site with widgets, themes, and language packs.
- 👉 Get Started
- 📚 View the documentation
- 💬 Chat with the Wowchemy community or Hugo community
- 🐦 Twitter: @wowchemy @GeorgeCushen #MadeWithWowchemy
- 💡 Request a feature or report a bug for Wowchemy
- ⬆️ Updating Wowchemy? View the Update Guide and Release Notes
To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.
- Hugo Academic CLI: Automatically import publications from BibTeX
Please replace the demo images with your own.