To develop:
sh <(curl https://pkgx.sh) +classic.yarnpkg.com sh
yarn
# requires v 1 or 2 of yarn, which I could only get with asdf via shell configyarn dev
To deploy:
yarn run build
- test: run an HTTP server in the 'public' directory
- deploy:
rsync -azvu public/ ...@...:www/livesofgifts/
... where all files typically get changed, even for simple edits.
- The front page starts at
src/components/home/home.js
(linked fromsrc/pages/index.js
).- Most content is found in
src/markdown/
. - The "Experiences" blurbs are found in
src/markdown/research/
. - To add a page at /PATH, add a PATH.js file in src/pages (eg. progress.js)
- Most content is found in
- Add Links on the main page by adding to the gatsby-config.js
primaryLinks
. - Add Publications page & link by adding to the gatsby-config.js
publications
. - Add People page & link by adding .md files in the src/markdown/people directory.
All pictures contain people & events we know personally.
- hand-up.png is from a group trust actvity on August 3, 2010.
- face-painting.png is from a local kids' fair on June 5, 2009.
- group-chat-square.png is from a speaking and networking event on April 21, 2021.
- lifting-walls-square.png is from an international volunteer home building on January 2, 2020
- love-thy-neighbor-poster.png is from a protest against race division on April 25, 2021.
- make-smiles-contagious.png is from a cleanup and mask trashing on March 21, 2021.
- trophy-presentation.png is from a trophy presentation on April 20, 2013.
... and now for the original README:
This is a website template built with Gatsby for a typical scientist or laboratory profile/portfolio site.
- Node.js
- git
- GitHub account
- code editor, e.g VS Code
-
Fork this project on GitHub by navigating to the project page
https://github.com/knightjdr/gatsby-starter-scientist
and clicking theFork
button in the upper right corner. -
(Optional) Rename the repository from the
Settings
menu. For example toyourname-lab
. -
Clone repository from command line. If you changed the repository name in step 2, be sure to update the url. This will create a folder on your machine in the current directory with the project's code.
git clone https://github.com/[your-user-name]/gatsby-starter-scientist.git
- Move into project directory and install dependencies.
cd gatsby-starter-scientist
npm install
npm run develop
will start a local development server that you can access from http://localhost:8000
. Any changes you make to project files will be automatically reflected in your browser.
Any changes you make will only affect files on your local machine. It is a good idea to sync those changes with GitHub. This can be done from the command line by committing your changes
git add .
git commit -m "Description of the changes"
And pushing them to GitHub
git push
You can also do this using GitHub's Desktop client.
After making changes to your site, you need to build an optimized version and deploy it to the hosting server. The site is hosted by default on GitHub, which is free.
- Build the site for production
npm run build
- Deploy the site. You will be asked for your GitHub credentials.
npm run deploy
The site can now be accessed at https://[your-user-name].github.io/gatsby-starter-scientist
. If you changed the repository name, the URL will be adjusted accordingly.
Basic configuration for the site is found in the siteMetadata
object in this file. The author
and description
fields are used to construct the text on the landing image. Update the siteUrl
to the site's final address. The title
field is displayed in browser tabs and search results as the title of the site. The other siteMetadata
fields have comments to explain their purpose.
If your site will have a path prefix, for example https://mysite.org/path-prefix
, be sure to add the prefix to the pathPrefix
field in this file. If it will not have a prefix, for example https://mysite.org
, delete this field.
Do not change any of the other fields in this file.
The background image on the homepage can be changed by replacing the image src/images/hero.png
. Make sure the image is big to ensure it will look good on large 4K monitors. The image in this starter is 5184 × 3456 pixels. The image has to be a png
, so convert from other formats if needed.
It should be dark so that text will have sufficient contrast (a filter will be automatically applied to darken it further, so simply avoiding light images should be fine). You can find royalty free images at unsplash.com and pexels.com.
The text for many of the sections described below is located in src/markdown
. You can enter plain text as you'd like it to appear on the site or add links and other html elements using markdown styling. For example, you can specify a linkg with [link text](https://link-to-whatever.com)
. See Markdown cheatsheet for details.
The title, text and image in the About
section can be customized in the markdown file src/markdown/about.md
. The image for this section should be placed in the src/images
folder and its path specified as ../images/[your-picture.png]
. The image should be square and at least 1050 x 1050 pixels and either PNG or JPG. The image will be automatically converted to a circle.
This section is optional, as is the section title and image. Delete or rename the about.md
file if you do not want this section or delete the title and/or image fields if you do not want them.
The research subsections are declared in the src/markdown/research
folder. You should create one file for each subsection with an optional title and image. You must specify the order of each subsection in its corresponding file.
The images for each subsection should be placed in the src/images/reaserch
folder and its path specified as ../../images/research/[your-picture.png]
. The image should be square and at least 900 x 900 pi and either PNG or JPG.
This section is optional, as are the subsection titles and images. Delete all files in this folder if you do not want this section or delete the title and/or image fields if you do not want them.
The text in this section can be customized in the markdown file src/markdown/opportunities.md
.
This section is optional. Delete or rename the opportunities.md
file if you do not want it.
The text in this section can be customized in the markdown file src/markdown/contact.md
.
This section is optional. Delete or rename the contact.md
file if you do not want it.
Links in the footer are declared in the gatsby-config.js
file. You can include any links you like.
The people page is built from markdown files in src/markdown/people
and images in src/images/people
. Each person in the lab should have his/her own file in the markdown folder. The person's name and order of appearance are required, while the e-mail, image and title fields are optional.
Images should be square and at least 900 x 900 pixels and either PNG or JPG.
This page is optional. Delete all files in this folder if you do not want this page. This will also remove the People
link from the navigation bar.
Publications for this page are automatically retrieved from PubMed via PMIDs specified in the gatsby-config.js
file. They will be ordered by publication date. The IDs should be placed in the publications
field in the siteMetadata
object.
This page is optional. Delete all links from the array or delete the field to remove the page. This will also remove the Publications
link from the navigation bar.
The favourite icon (favicon) is used in a few places. Most notably it is the small icon present in the browser tab and located next to the website title on bookmarks.
It can be changed by replacing the image src/images/favicon.png
. It should be a square image 512 x 512 pixels in png
format. To be consistent with the style of the current icon, create a background circle with the hex colour #ffffff
and give the foreground image the colour #3d8183
.
The site logo is located in the top left of the navigation bar and can be changed by replacing the image src/images/logo.inline.svg
. It should be an svg to allow the site to colour the image based on the theme (light/dark) and mouse state (hover or focus).
The colour theme can be changed by editing src/components/layout/layout.css
. You should only edit the color-primary
variables and ensure the resulting selections have sufficient contrast with the background colour in both the light and dark modes. You can use a site like contrast finder to test the contrast of your theme.
body.light-mode {
--color-background: #fff;
--color-primary: #3d8183;
}
body.dark-mode {
--color-background: #252429;
--color-primary: #ff7A8A;
}
A custom URL that you purchased can be configured for the site by following the instructions at GitHub - managing-a-custom-domain
If you run into issues with images not displaying correctly in the development server, try running the command npm run clean
and restarting the development server.
- Vector cartoons are by Lukasz Adam
- Icons are from the free repository at FontAwesome