Overview
Custom Data Commons allows customization of the web pages on top of datacommons.org. The customization includes overall color scheme, home page content, landing pages of timeline/scatter/map tools and etc.
Environment Setup
Fork datacommonsorg/website Github repo following these instructions into a new repo, which will be used as the custom Data Commons codebase. Custom Data Commons development and deployment will be based on this forked repo.
To test codes in a local environment, follow this
guide.
Note to use -e custom
flag when starting local Flask server:
./run_server.sh -e custom
Update UI Code
Update Header, Footer and Page Content
Page header and footer can be customized in
base.html
by updating the html element within <header></header>
and <footer></footer>
.
Homepage can be customized in
homepage.html.
Update CSS and Javascript
The custom Data Commons provides an overrides.css to override CSS styles. More style changes can be added to that file.
To add more site customization, can put CSS and Javascript files under folder
/static/custom_dc/custom.
Then include these files in the <head>
section of the corresponding html files
as
<link href="/custom_dc/custom/<custom_additional>.css" rel="stylesheet" />
or
<script src="/custom_dc/custom/<custom_additional>.js"></script>
Deploy to GCP
One Time Setup
-
Install the following tools:
-
Install gke-gcloud-auth-plugin
gcloud components install gke-gcloud-auth-plugin
Deploy Local Change
After testing locally, follow the instructions below to deploy to GCP.
project_id
refers to the GCP project where custom Data Commons is installed.
-
Git commit all local changes (no need to push to Github repo). Later steps will build docker image based on the hash of this commit.
-
Run the following code to build and push docker images to the Container Registry.
./scripts/push_image.sh <project_id>
Follow the link from the log to check the status until the push is complete.
-
Deploy the website to GKE:
./scripts/deploy_gke.sh -p <project_id>
Check the deployment from GKE console. Once it’s done, check the UI changes from the website.