Static Generator Template

To start, you can use the GitHub template functionality to create a new repository with a clean git tree.

Name your new project repository accurately. That will be important on the step where we share a development Github Pages URL with our stakeholders.

Use git clone --recursive to clone the main repository and also fetch the base-components submodule

git clone --recursive git@github.com:youthradio/static-nuxt-template.git

Build Setup

We're using yarn as package management. You could use npm, but you will need to changes some scripts on package.json not yet covered here.

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# export static files
$ yarn export

Publish Setup

Publishing on Github Pages is automatic. After you push to main branch to GitHub, there is an action worflow that will build and publish it under

youthradio.github.io/YOUR_REPO_NAME

Backend

We use Google Docs as a backend. The doc will be embed with a special markup laguage, ArchieML, making it easy to structure text as data.

Copy our Google Doc Template and share it with your Google service account, or check the box to share with the same people.

• How to make a Google Service Account

post.config.js

post.config.js has a bunch of configurations, including the data, i.e. <title> tags but also information about the google docs linked to the project, Poll Server, DBs, etc

You can customize the GH Pages URL. The default is the repository name.

Dev URL <>

const projectName = process.env.GIT_REPO_NAME || ''

Docs Ids <>

Grab the Google Doc id from the copied document, you could have as many docs as you need.

...
  docs: [
    {
      name: 'YOUR GOOGLE DOC",
      id: '1imJ0esjaeeq_rxh5XFTs9VCpsREOuTshZU1GRCswxN0',
    },
  ],
  ...

Fetching new data

After the last step of issuing a new Google service account and sharing the copied template with it, you can export a credentials.json file. Copy it to /static/.

You can now run the script to fetch and parse the data from your google docs

yarn fetch-data

The script will save it to /data/ or dataPath: '../data/data.json' acording to you setup