30:T982,html`

${md` # Static Site Generator (Netlify) Deploy an high performance static site from a notebook. Using Observable as the administrative front end to Netlify hosting has a few nice properties. - Static file hosting for incredible performance. - Option to create your build tooling and content programatically. - All hosted in the browser so no tools to install. - Out of the box support for Markdown, Latex, SVG and raw HTML. Add your own! - Partial deployments, only files that change are sent to Netlify. Its fast to deploy. - Intelligent cacheing, CDN cache is purged on deploy, so no more uncertainty waiting around for the live version to update. - URL based content definition, deploy files from external sources too. To use, call _deployStaticFile_ in a content notebook. ~~~js import {deployStaticFile, queryDependants} from '@tomlarkworthy/netlify-deploy' ~~~ Instantiate against the *api_id* of your Netlify project (mislabelled app_id here), the URL of the content you wish to deploy, and the path on the website that you want. ~~~js deployStaticFile({ app_id: 'b6a918d2-9cda-4fde-b2ec-add91b22ea02', // Find in Netlify site settings source: preview.href, // Address to find the content target: "/blogs/jamstack.html", // Path suffix on domain tags: ["blog"], // Used for organization dependsOnTags: ["global"] // Content inter-depedencies }) ~~~ The function will return a HTML form that triggers a deploy: ![](${await FileAttachment("image@5.png").url()}) For a minimal example have a look at [@tdlgkjfhdljovtttqrzu/netlify-test](https://observablehq.com/@tdlgkjfhdljovtttqrzu/netlify-test) I write my personal blog using this tool. Some examples - An article template I fork for blog posts https://observablehq.com/@tomlarkworthy/blog-simple-article-template - Setting up a common page theme: https://observablehq.com/@tomlarkworthy/blog-theme - Creating a top level index.html of the last 20 articles: https://observablehq.com/@tomlarkworthy/blog-index-html - Adding an RSS feed: https://observablehq.com/@tomlarkworthy/rss-feed The blog is hosted on [tomlarkworthy.endpointservices.net](https://tomlarkworthy.endpointservices.net/). On my blog, the footer of each page links the [Observablehq.com](https://observablehq.com) source code. `}`;31:T710,authorizer = { // Ensure user is logged in if (!(viewof user).value.uid) return html`${viewof user}`; if (session.access_token) { async function unauthorize() { await firebase.firestore() .doc(`/services/netlify-proxy/sessions/${(viewof user).value.uid}`) .delete(); } return html`

${viewof user} Unauthorize with Netlify` } else if (params.access_token) { if (session.nonce === params.state.nonce) { await firebase.firestore() .doc(`/services/netlify-proxy/sessions/${(viewof user).value.uid}`) .set({ access_token: params.access_token, token_type: params.token_type }, {merge: true}); return html`Authorized`; } else { return html`Mismatched nonce reload`; } } else { if (nextNonce !== session.nonce) { await firebase.firestore() .doc(`/services/netlify-proxy/sessions/${(viewof user).value.uid}`) .set({ nonce: nextNonce }, {merge: true}); } async function authorize(evt) { const url = 'https://app.netlify.com/authorize?' + 'client_id=' + client_id + '&response_type=token' + '&redirect_uri=https://observablehq.com/@endpointservices/netlify' + '&state=' + encodeURIComponent(JSON.stringify(session)); evt.target.href = url; } return html`

${viewof user} authorize with Netlify

` } } 32:T17eb,async function deployStaticFiles({ app_id, // Netlify api_id (typod to app_id) immediate = false, // auto-deploy (no button click) files = [ //target, // Path on domain to deploy this file to //source, // URL where to fecth file contents. //tags = [], // Search tags for content queries //dependsOnTags = [], // Describe depedencies between content //...metadata // Additional user fields to be saved in CMS ] } = {}) { const id = files[0].target; if (spinners[id]) return html`${spinners[id]}`; // Ensure user is logged in if (!(viewof user).value.uid) return html`${viewof user}`; // If there is no session data if (!session.access_token) { "deployStaticFiles: no access token" if (nextNonce !== session.nonce) { await firebase.firestore() .doc(`/services/netlify-proxy/sessions/${(viewof user).value.uid}`) .set({ nonce: nextNonce }, {merge: true}); } async function authorize(evt) { const url = 'https://app.netlify.com/authorize?' + 'client_id=' + client_id + '&response_type=token' + '&redirect_uri=https://observablehq.com/@endpointservices/netlify' + '&state=' + encodeURIComponent(JSON.stringify(session)); evt.target.href = url; } return html` authorize with Netlify `; } // have access token const subdomain = location.host.split(".")[0]; async function digestFileAndDeploySite(evt) { const unitsPromise = files.map(async file => { const unit = ({ ...file, source: file.source, tags: file.tags || [], dependsOnTags: file.dependsOnTags || [], app_id, target: file.target, type: "file", safeTarget: encodeURIComponent(file.target), }); const unitURI = `/services/netlify-proxy/subdomains/${subdomain}/apps/${app_id}/units/${unit.safeTarget}`; console.log("deployStaticFile: fetching previous deploy"); const existing = (await firebase.firestore().doc(unitURI).get()).data() if (existing && existing.creationDate === undefined) { console.log("deployStaticFile: backfilling creationDate"); await firebase.firestore() .doc(`/services/netlify-proxy/subdomains/${subdomain}/apps/${app_id}/units/${unit.safeTarget}`) .set({creationDate: firebase.firebase_.firestore.FieldValue.serverTimestamp()}, {merge: true}) } console.log("deployStaticFile: syncing paramaters"); await firebase.firestore() .doc(`/services/netlify-proxy/subdomains/${subdomain}/apps/${app_id}/units/${unit.safeTarget}`) .set({ ...(!existing && { creationDate: firebase.firebase_.firestore.FieldValue.serverTimestamp() }), ...unit }, {merge: true}) return unit; }); var units = await promiseRecursive(unitsPromise); var tags = units.reduce( (list, unit) => list.concat(unit.tags) ,[] ) const cache = {}; message(id, "Deploying...\nQuerying dependents"); // For now we do one round of dependencies const dependees = tags.length > 0 ? (await firebase.firestore() .collection(`/services/netlify-proxy/subdomains/${subdomain}/apps/${app_id}/units`) .where("type", "==", "file") .where("dependsOnTags", "array-contains-any", [...new Set(tags || [])]) .limit(100) .get()).docs.map(d => d.data()) : []; const updates = dependees.concat(units).map(unit => updateDigest({ app_id, subdomain }, unit, cache)); message(id, `${updates.length} files to update`) await Promise.all(updates); message(id, `Retreiving existing ${dependees.length} files metadata`) const existingFiles = (await firebase.firestore() .collection(`/services/netlify-proxy/subdomains/${subdomain}/apps/${app_id}/units`) .where("type", "==", "file") .get()).docs.map(d => d.data()); // console.log(existingFiles, cache) message(id, `Creating deploy with Netlify`) const deploy_json = await createDeploy(app_id, existingFiles); const requiredDigests = deploy_json.required; deployments[id] = deploy_json.ssl_url; message(id, `Syncing required files ${requiredDigests}`) const uploads = requiredDigests.map(digest => { if (!cache[digest]) { console.error(`Netlify has requested digest ${digest} which was not part of our sync`); // So lets find it let record; firebase.firestore() .collection(`/services/netlify-proxy/subdomains/${subdomain}/apps/${app_id}/units`) .where("digest", "==", digest) .get() .then(snap => { record = snap.docs[0].data() return fetch(record.source); }).then(response => response.text()) .then(content => { return uploadContent(deploy_json.id, record.target, content); }) } else { return uploadContent(deploy_json.id, cache[digest].target, cache[digest].content); } }); try { await Promise.all(uploads); message(id, null); } catch (err) { message(id, err.message); } } if (immediate && (!deployments[id])) { deployments[id] = 'inprogress' digestFileAndDeploySite() } else if (deployments[id] === 'inprogress') { return md`Deployment in progress` } else { return html` ${Inputs.table(files)} ${deployments[id] ? html`

Deployed to ${deployments[id] + files[0].target}` : null} ` } }33:[{"id":"9cd81627a448df958f8f583bf6f3b1edc7524f9641dd1f0e4d24ea690b030ca3955554577eedfc300b35903469100065b506534380a8eccbea54c449d26428ed","href":"https://static.observableusercontent.com/files/9cd81627a448df958f8f583bf6f3b1edc7524f9641dd1f0e4d24ea690b030ca3955554577eedfc300b35903469100065b506534380a8eccbea54c449d26428ed","name":"image@4.png","type":"image/png","lastModified":1611933477354.766,"size":362871},{"id":"9a8c6eb0b661748266a1dd047581f160cedb0e80b165e49299a6c6e443acac6c866fdb8b18cee5d0bcb01cd86c5284586b7754918aefddddc4707ac80a705111","href":"https://static.observableusercontent.com/files/9a8c6eb0b661748266a1dd047581f160cedb0e80b165e49299a6c6e443acac6c866fdb8b18cee5d0bcb01cd86c5284586b7754918aefddddc4707ac80a705111","name":"image@5.png","type":"image/png","lastModified":1613081048996.773,"size":228729},{"id":"828a7e731e643b93e2abaf5bd206e1b1b4c9fd0f88526c3714c1dd2f3efba17ed3f403cec8299bc727df64210ebc5077bb57b13d824e7b7848ca19fc9019c9cc","href":"https://static.observableusercontent.com/files/828a7e731e643b93e2abaf5bd206e1b1b4c9fd0f88526c3714c1dd2f3efba17ed3f403cec8299bc727df64210ebc5077bb57b13d824e7b7848ca19fc9019c9cc","name":"image.png","type":"image/png","lastModified":1607071764086.669,"size":98682},{"id":"54e88b3adc3bcfcf2ccaa8f572e87f9466b08254c241ec4ef382f73504a9e7b484e5d71108eef168c8eb53ccea3ef8b30d2fa0134626e71079dbacca51e32897","href":"https://static.observableusercontent.com/files/54e88b3adc3bcfcf2ccaa8f572e87f9466b08254c241ec4ef382f73504a9e7b484e5d71108eef168c8eb53ccea3ef8b30d2fa0134626e71079dbacca51e32897","name":"image@2.png","type":"image/png","lastModified":1607077984416.243,"size":59274},{"id":"43094e670aa7e161a39587fb31042c51d8fef2785a86ee68cb846e678d5a15e476b447502c8b7b5818e9b1e8e828b0eee2cc26d187fa02f9b138b61b79561e00","href":"https://static.observableusercontent.com/files/43094e670aa7e161a39587fb31042c51d8fef2785a86ee68cb846e678d5a15e476b447502c8b7b5818e9b1e8e828b0eee2cc26d187fa02f9b138b61b79561e00","name":"image@3.png","type":"image/png","lastModified":1607082378799.28,"size":89422}] 2e:{"title":"Static Site Generator (Netlify)","cells":[{"id":382,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"html`

${md`\n### One-off Setup\nLogin to Endpoint Services and Authorize it with Netlify\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"html`

${md`\n## Static Site Generator library functions\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"signature(deployStaticFile, {\n description: 'Deploys a file to a path on a Netlify hosted domain.',\n open: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"async function deployStaticFile({\n app_id, // Netlify api_id (typod to app_id)\n target, // Path on domain to deploy this file to\n source, // URL where to fecth file contents.\n tags = [], // Search tags for content queries\n dependsOnTags = [], // Describe depedencies between content\n ...metadata // Additional user fields to be saved in CMS\n } = {}) {\n return deployStaticFiles({\n app_id,\n files: [{\n app_id,\n target,\n source,\n tags,\n dependsOnTags,\n ...metadata\n }]\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"signature(deployStaticFiles, {\n description: 'Deploys several files on Netlify hosted domain.',\n open: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1168,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"signature(queryDependants, {\n description: 'Query dependants searches for all content with specific tags, useful for content grouping, sitemaps RSS feeds etc.',\n open: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"function queryDependants({\n app_id,\n dependsOnTags,\n limit = 100\n } = {}) {\n const subdomain = location.host.split(\".\")[0]\n return listen(firebase.firestore().collection(\n `/services/netlify-proxy/subdomains/${subdomain}/apps/${app_id}/units`)\n .where(\"type\", \"==\", \"file\")\n .where(\"tags\", \"array-contains-any\", [...new Set(dependsOnTags)])\n .orderBy(\"creationDate\", \"desc\")\n .limit(limit)\n ); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"html`

${\nmd`### Setup up your Netlify\n\n\nCreate a Netfliy site (without git)\n![](${await FileAttachment(\"image.png\").url()})\n\nDrag and empty folder, this creates a new site.\n\n![](${await FileAttachment(\"image@2.png\").url()})\n\nMake a note of its API ID\n\n![](${await FileAttachment(\"image@3.png\").url()})\n\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"html`

${\nmd`## Supporting state\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"function message(id, message) {\n mutable spinners = ({\n ...mutable spinners,\n id: message\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1002,"value":"mutable spinners = ({\n\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"mutable deployments = ({\n\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"params = {\n const params = Object.fromEntries(new URLSearchParams(location.hash.substring(1)).entries())\n params.state = params.state ? JSON.parse(decodeURIComponent(params.state)): null;\n return params;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"session = (viewof user).value.uid ? listen(firebase.firestore().doc(`/services/netlify-proxy/sessions/${(viewof user).value.uid}`), {\n defaultValue: {}\n}): {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"nextNonce = Math.random();","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"async function updateDigest({\n subdomain, app_id\n } = {}, unit, cache) {\n const response = await fetch(unit.source)\n if (response.status >= 400) throw new Error(`Cannot remote resource: ${unit.source}`)\n const content = await response.text();\n const digest = await new hashes.SHA1().hex(content);\n await firebase.firestore()\n .doc(`/services/netlify-proxy/subdomains/${subdomain}/apps/${app_id}/units/${unit.safeTarget}`)\n .set({digest}, {merge:true})\n console.log(`${unit.target} has digest: ${digest}, content: ${content.substring(20)}`)\n cache[digest] = {\n content: content,\n target: unit.target,\n digest: digest,\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"\nasync function createDeploy(app_id, files) {\n\n const deploy_response = await fetchp(`https://api.netlify.com/api/v1/sites/${app_id}/deploys`, {\n method: \"POST\",\n body: JSON.stringify({\n \"files\": files.reduce(\n (acc, file) => ({ ...acc, [file.target]: file.digest }),\n {}\n )\n }),\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${session.access_token}`\n }\n });\n if (deploy_response.status !== 200)\n throw new Error(`${deploy_response.status}): ${deploy_response.text()}`);\n const deploy = await deploy_response.json();\n console.log(deploy)\n return deploy;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"async function uploadContent(deploy_id, target, content) {\n const netlify = \"https://api.netlify.com/api/v1\";\n const uploadResponse = await fetchp(`${netlify}/deploys/${deploy_id}/files/${target}`, {\n method: \"PUT\",\n body: new TextEncoder().encode(content),\n headers: {\n \"Content-Type\": \"application/octet-stream\",\n \"Authorization\": `Bearer ${session.access_token}`\n }\n })\n const text = await uploadResponse.text();\n if (uploadResponse.status >= 400) throw new Error(text)\n return text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"version = 9","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"hashes = require(\"jshashes\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"client_id = \"nR-8fzREOHe0-6B2vGY6czBXxxpurQloK0niTCRR4PM\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"html`

Credits

\nPreview image, Photo by Andre Tan on Unsplash\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"html`

Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"import {html} from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"import {viewof user, firebase, listen} from '@endpointservices/login'","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"import {deploy} from '@tomlarkworthy/serverside-cells'","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"import {bulma} from '@tomlarkworthy/bulma'","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"import {fetchp} from '@tomlarkworthy/fetchp'","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"import {signature} from '@mootari/signature'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"import {promiseRecursive} from '@tomlarkworthy/utils'","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"bulma","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}