andreabac3 / dsc-website-template

A website generator for the Google Developer Student Club community

Google Developer Student Club Website Template

The commitment of this repository is to allow all the Developer Student Clubs to generate a site for their club in less than 3 minutes, performing a few simple steps.

The management of this site does not require any kind of web development and backend competence.

Demo

You can see the demo here

How can I change the content of the site without knowing web languages?

To change the content of the site, go to the content folder located in the root of the project. In this folder there are several .yaml files in which you can modify the contents.

🚀 Quick Start

To install you first need node.js on your machine. You need to perform the following steps only the first time.

# Clone the repo
git clone https://github.com/andreabac3/dsc-website-template.git
cd dsc-website-template/

# Install the gatbsy CLI
npm i -g gatsby-cli

# Install local dependencies
npm install

# Run on localhost:8000 (by default)
# and edit the /content folder
npm run develop

that's it!

Deploy

Deploy on Firebase Hosting 🔥

We suggest to read the Firebase Hosting guide reference from Gatsby website

Make sure you have:

• a Firebase Account
• created a Firebase Project

Click here to read more about Firebase Deploy

You can skip the first two points of the guide if you have already installed and configured the following dependencies.

1. Install the Firebase CLI with npm by running the following command and sign into firebase account:

npm install -g firebase-tools

2. Sign into Firebase using your Google account by running the following command:

firebase login

3. Navigate into the root of the project and running the following command:

firebase init

then select Firebase Hosting and the firebase project you wish to use or creat a new one if you haven't done it previously.

These first three steps are needed only once during the first configuration. After that, only step 4 is needed to deploy on Firebase.

4. Finally we can deploy our website

npm run deployFirebase

All done! Once the deployment concludes, you can access your website using firebaseProjectId.firebaseapp.com or firebaseProjectId.web.app.

N.B: of course replace the keyword with the name of your project.

Deploy on Github Pages

npm run deploy

Extra steps: How to add extra icons, links

Add a social link to teams.yaml

Click here to read How to add extra icons

(for twitter, youtube, github, linkedin, you only need step 1)

Let's say I want to add the telegram.org as telegram link in the John Doe card.

Step 0: Check here if the icon is present

Step 1: Add a telegram: telegram.org entry in the John Doe social yaml field

Step 2: Add the following export in ./src/icons.js:

faTelegram as telegram

Step 3: In ./src/components/index/Teams.js, add telegram:

social {
	twitter
	github
	linkedin
	telegram
}

Add a social link to website footer

(for twitter, youtube, github, linkedin, you only need step 1)

Let's say I want to add the telegram.org as telegram link in the website footer.

Step 0: Check here if the icon is present

Step 1: Add a telegram: telegram.org entry in the siteMetadata.social field in ./gatsby-config.js

Step 2: Add the following export in ./src/icons.js:

faTelegram as telegram

Step 3: In ./src/components/Footer.js, add telegram:

social {
	youtube
	github
	twitter
	telegram
}

Authors

• Andrea Bacciu (DSC LEAD - Software Engineer) Github profile
• Alessandro Scandone (Core Team - Frontend developer) - Github profile

Special thanks to the EKSU DSC teams:

This is a refactor of the EKSU DSC website as a gatsby template.

dsc-website-template's Issues

try to deploy

PLease iam try to deploy de website to me firebase hosting, but it give me some error.

Images are blurred.

Hey there! First of all, thanks a lot for the template!

I have deployed my own customized DSC website using your template with Firebase Hosting. However, the images in the tech and team sections are blurred.

Here's the link to the website: https://dsc-psba.web.app/

Here's the link to the repo: https://github.com/dsc-psba/website

Here's a video of the problem: https://streamable.com/3hbclg

I've tried:

1. Adding a quality parameter in each childImageSharp query -> quality: 100
2. Added a loading="eager" parameter in the statement
3. Removed cache

and yet nothing helped.

Any help is appreciated.

Gatsby Error 10123?

Buttons not working (Failed to load resource: the server responded with a status of 404 ())

Hi, thank you for the awesome template! Made getting my club's website up very easy, however I am running into a problem now that we have deployed it.

Using the Quick Start directions you left in the ReadMe, everything seems to work properly when hosting it locally, however after deploying it to Google Cloud Platform, I am unable to use the button in the top corner that is present on the mobile version/if you make the screen small to display the nav bar options. I added extra features to my club's website, one of which is a button, which also does not work after deployment. Looking at the Google Developer tools console, there are a bunch of "Failed to load resource: the server responded with a status of 404 ()" errors.

I redid the quick start directions and just deployed your code (literally today so the latest version) to be sure my code wasn't what was causing the errors. I also added console log messages to the buttons, which do not print in the console. In addition, I tried hosting on firebase to see if it was an issue with GCP, but the same issues are happening there.

I'm not sure if it's an issue with different versions of gatsby or something, but if you guys have an ideas of how to fix it that would be greatly appreciated!

Not sure it matters, but for reference, I'm on a mac, using vscode, and to deploy to GCP, I ran "npm run build" and uploaded the "public" file along with an app.yaml file.

Also just a side note, I saw someone else had issues with the images being blurry, I had the same issue. It was only after deployment and it was there when deploying the program right after following the Quick Start directions. I ended up removing any local images and used links to google drive images. Not sure why that was happening but thought I'd let you know :)