taegon / academic-website

A personal academic website built on top of a Google Sheet document that is super easy to maintain.

Personal Academic Website

This is a personal academic website built on top of a Google Sheet document that is super easy to maintain.

This website at https://jmbyun.github.io is serving contents in this Google Sheets document and you don't even have to do anything to reflect the change to the website after editing the contents of this document.

Fork this project and have your own website!

How does this work?

This vue.js based web application served as Github Pages dynamically fetches the contents of the Google Sheets document on the client's side, using Google Sheets API. No actual contents are stored in this repository.

How to fork and get your own website

1. Fork this repository to your account and rename it as "{your-github-username}.github.io".

2. Create your own Google Sheets document, copy and paste the contents of this sheets document. Make sure to get all sheets in the document prepared.

3. Set your document's sharing settings as: Public on the web - Anyone on the Internet can find and view.

4. Get your document id from the URL of the document. Set it as the value of googleSheetDocId in ./config.js.

5. Create a new Google account that you are only going to use for this website, get an API key that belongs to your new Google account. Check out on this answer on Stack Overflow if you don't know how to get an API key for a Google account. Set it as the value of googleApiKey in ./config.js.

6. Edit contents of your own Google Sheets document to change the contents of your website at https://{your-github-username}.github.io.

Now your website is up and ready!

Development

Just in case if you are interested in modifying this web application.

Dependencies

Make sure to install Node.js and Yarn on your environment before you start working on this project.

Install Node.js dependencies with the following command.

$ yarn install

Commands

Following commands are available for development.

# build for production
$ yarn build

# development mode
$ yarn dev

# run unit tests
$ yarn test

# serve the bundled dist folder in production mode
$ yarn serve

Polyfills

By default we only polyfill window.Promise and Object.assign. You can add more polyfills in ./src/polyfills.js.

Analyze bundle size

Run yarn report to get a report of bundle size.

---

This project is generated by create-vue-app.