This is the repository for the UP ACM Algolympics informational website.
This uses Gatsby and was started via Gatsby's hello-world boilerplate.
-
Start developing.
Navigate into your new siteβs directory and start it up.
cd algolympics-site/ gatsby develop
-
Open the source code and start editing!
Your site is now running at
http://localhost:8000
!Note: You'll also see a second link:
http://localhost:8000/___graphql
. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.Open and edit a file in
src/
. Save your changes and the browser will update in real time!
Here are the the top-level files and directories. You see most of these in a typical Gatsby project.
.
βββ node_modules
βββ src
βββ static
βββ .gitignore
βββ .prettierrc
βββ devserver.sh
βββ Dockerfile
βββ gatsby-config.js
βββ gatsby-node.js
βββ LICENSE
βββ package-lock.json
βββ package.json
βββ README.md
-
node_modules/
: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. -
src/
: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. -
static/
: This directory will contain static files. -
.gitignore
: This file tells git which files it should not track / not maintain a version history for. -
.prettierrc
: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent. -
devserver.sh
: A script that runsgatsby clean
(clears cache) and thengatsby develop
. You can run this yourself, but this is mainly used by the Docker container to run the development server. -
Dockerfile
: Used to build a Docker image for this app. See the "Running via Docker" below for more details. -
gatsby-config.js
: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins youβd like to include, etc. (Check out the config docs for more detail). -
gatsby-node.js
: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. -
LICENSE
: The license details of this code base. -
package-lock.json
(Seepackage.json
below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You wonβt change this file directly). -
package.json
: A manifest file for Node.js projects, which includes things like metadata (the projectβs name, author, etc). This manifest is how npm knows which packages to install for your project. -
README.md
: A text file containing useful reference information about your project.
Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:
-
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
-
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.
This is intended to house the websites for all Algolympics iterations starting from 2021. As such, the files are mostly organized by year. Things outside of the year folders are intended to be reusable across several years.
Currently, there's not much reusable stuff, and that's a shame. That should probably be fixed soon.
Suppose you want to update the website to include the latest iteration of Algolympics: Algolympics 20XX. Here are the steps you should probably follow:
-
Duplicate everything from year
20XX-1
. -
Update the relevant files, styles, data, etc.
Note that src/data/details.json
and gatsby-node.js
should probably be updated as well.
Docker is a software that runs so-called "containers". Containers simulate the OS; think of it like running a virtual machine on your computer, except that only the OS is simulated, which makes it lighter than virtual machines. Docker is widely used everywhere these days, and is used to make it easy to maintain exactly the same environments across multiple computers. It is even used in production to ensure that the "machine" that you run locally is the same as the production "machine".
Running gatsby develop
via Docker is optional, but desirable. If you want to do so,
-
You first have to build the Docker image by running
docker build -t algosite .
. Here,algosite
will be the name of the image. Run this command again if you updateDockerfile
, or if you want to rebuild the image for any other reason. -
Then you can run the image with
docker run --name algosite --rm -p 8000:8000 -v $(pwd):/usr/src/app algosite
. Here,-
--name algosite
specifies that the name of the Docker instance of our image isalgosite
. -
--rm
specifies that the instance should be deleted after stopping it. -
-p 8000:8000
links port8000
outside the Docker container to port8000
inside the container, so that, for example, you can access port8000
in your browser. -
-v $(pwd):/usr/src/app
mounts the current folder outside the Docker container to the folder/usr/src/app
inside the container. This makes it so that edits you make are seen inside the container and are thus seen bygatsby develop
. -
algosite
at the end is just the name of the image to make an instance of.
-
-
To restart it, you must run
docker stop algosite
(in a different terminal) to stop the containeralgosite
, and then run thedocker run
command above again. -
Remember that our
docker run
command above automatically deletes the container, so by stopping it, the container is also removed. If removal fails for any reason (e.g., a forceful shutdown), you may delete it manually viadocker rm algosite
. -
To go inside the Docker container and access a terminal, run
docker exec -it algosite bash
. This will give you access to a terminal inside the container. You can run any available command there. It should be clear that the commands in your computer are not necessarily available inside the container. -
You can also run other commands directly via
docker exec
, e.g.,docker exec -it algosite npm run format
. This runsnpm run format
inside the container.