How to use a basic Google Sheets javascript script in GitHub Pages?
Trying to implement a piece of code to display data from a Google Spreadsheet in my GitHub Pages page. I found Sheetrock.js and the JS Fiddle worked, but I'm missing how to setup a basic javascript file structure. I know I can name files ___.js and call them from the html file, but the Sheetrock.js info doesn't use this format. I remember trying this a while ago and after hitting the same roadblocks gave up, so I'm posting to hopefully save others, coming from a similar search for using GSheets in a static site through javascript, hours of searching on such a simple problem.
javascript github-pages google-sheets-api sheetrock
add a comment |
Trying to implement a piece of code to display data from a Google Spreadsheet in my GitHub Pages page. I found Sheetrock.js and the JS Fiddle worked, but I'm missing how to setup a basic javascript file structure. I know I can name files ___.js and call them from the html file, but the Sheetrock.js info doesn't use this format. I remember trying this a while ago and after hitting the same roadblocks gave up, so I'm posting to hopefully save others, coming from a similar search for using GSheets in a static site through javascript, hours of searching on such a simple problem.
javascript github-pages google-sheets-api sheetrock
add a comment |
Trying to implement a piece of code to display data from a Google Spreadsheet in my GitHub Pages page. I found Sheetrock.js and the JS Fiddle worked, but I'm missing how to setup a basic javascript file structure. I know I can name files ___.js and call them from the html file, but the Sheetrock.js info doesn't use this format. I remember trying this a while ago and after hitting the same roadblocks gave up, so I'm posting to hopefully save others, coming from a similar search for using GSheets in a static site through javascript, hours of searching on such a simple problem.
javascript github-pages google-sheets-api sheetrock
Trying to implement a piece of code to display data from a Google Spreadsheet in my GitHub Pages page. I found Sheetrock.js and the JS Fiddle worked, but I'm missing how to setup a basic javascript file structure. I know I can name files ___.js and call them from the html file, but the Sheetrock.js info doesn't use this format. I remember trying this a while ago and after hitting the same roadblocks gave up, so I'm posting to hopefully save others, coming from a similar search for using GSheets in a static site through javascript, hours of searching on such a simple problem.
javascript github-pages google-sheets-api sheetrock
javascript github-pages google-sheets-api sheetrock
edited Jan 2 at 18:36
alchemy
asked Jan 2 at 18:27
alchemyalchemy
13216
13216
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I searched for hours (through Jekyll tutorials and other JS package installations). I know this seems simple now, but there was only one basic javascript setup I finally found that answered it after searching on 'javascript', 'github pages', and even jquery with GH.
So the basic answer seems to be to simply create an index.js file next to index.html, and this is of course where all the generic javascript goes. The tags and external http CDN js file imports go in the HTML file.
You can use other javascript means such as JSON based access to connect to GSheet data, but Sheetrock.js seems to be doing okay.
There are also ways to adjust the iframe to select columns and use the SQL language base using the Google Google Visualization API Query Language described in this page. The SQL type commands carry over to the Sheetrock.js usage.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011347%2fhow-to-use-a-basic-google-sheets-javascript-script-in-github-pages%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I searched for hours (through Jekyll tutorials and other JS package installations). I know this seems simple now, but there was only one basic javascript setup I finally found that answered it after searching on 'javascript', 'github pages', and even jquery with GH.
So the basic answer seems to be to simply create an index.js file next to index.html, and this is of course where all the generic javascript goes. The tags and external http CDN js file imports go in the HTML file.
You can use other javascript means such as JSON based access to connect to GSheet data, but Sheetrock.js seems to be doing okay.
There are also ways to adjust the iframe to select columns and use the SQL language base using the Google Google Visualization API Query Language described in this page. The SQL type commands carry over to the Sheetrock.js usage.
add a comment |
I searched for hours (through Jekyll tutorials and other JS package installations). I know this seems simple now, but there was only one basic javascript setup I finally found that answered it after searching on 'javascript', 'github pages', and even jquery with GH.
So the basic answer seems to be to simply create an index.js file next to index.html, and this is of course where all the generic javascript goes. The tags and external http CDN js file imports go in the HTML file.
You can use other javascript means such as JSON based access to connect to GSheet data, but Sheetrock.js seems to be doing okay.
There are also ways to adjust the iframe to select columns and use the SQL language base using the Google Google Visualization API Query Language described in this page. The SQL type commands carry over to the Sheetrock.js usage.
add a comment |
I searched for hours (through Jekyll tutorials and other JS package installations). I know this seems simple now, but there was only one basic javascript setup I finally found that answered it after searching on 'javascript', 'github pages', and even jquery with GH.
So the basic answer seems to be to simply create an index.js file next to index.html, and this is of course where all the generic javascript goes. The tags and external http CDN js file imports go in the HTML file.
You can use other javascript means such as JSON based access to connect to GSheet data, but Sheetrock.js seems to be doing okay.
There are also ways to adjust the iframe to select columns and use the SQL language base using the Google Google Visualization API Query Language described in this page. The SQL type commands carry over to the Sheetrock.js usage.
I searched for hours (through Jekyll tutorials and other JS package installations). I know this seems simple now, but there was only one basic javascript setup I finally found that answered it after searching on 'javascript', 'github pages', and even jquery with GH.
So the basic answer seems to be to simply create an index.js file next to index.html, and this is of course where all the generic javascript goes. The tags and external http CDN js file imports go in the HTML file.
You can use other javascript means such as JSON based access to connect to GSheet data, but Sheetrock.js seems to be doing okay.
There are also ways to adjust the iframe to select columns and use the SQL language base using the Google Google Visualization API Query Language described in this page. The SQL type commands carry over to the Sheetrock.js usage.
answered Jan 2 at 18:27
alchemyalchemy
13216
13216
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011347%2fhow-to-use-a-basic-google-sheets-javascript-script-in-github-pages%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown