Thanks for this awesome resource. Was super easy to follow along.
Ran into a small issue - not sure if it'll get resolved in the next 24 hours or not (may take time for everything to refresh), but I figured I'd ask just in case.
I had my domain name "brandenbedoya.com" previously linked to my GitHub domain of brandenbedoya.github.io
Now that I followed your fruition steps, it takes me back to the Github Pages error.
I made sure to go on my old GitHub website and change the Cname and anything else that was making use of the URL brandenbedoya.com.
I also went on NameCheap to make sure it wasn't linked there, I only have the Cloudflare nameservers on there
The URL it's redirecting me to right now is: https://brandenbedoya.com/3205056b3ce9427ebb06889fcb9a5a19
Which is essentially the domain name, and it adds in the Notion page number at the end.
So it gives an error: 404 There isn't a Github Pages site here...
##################################################################
In short:
Anyway, I copied and pasted the code as the tutorial showed. I'm going to attach it here so you can take a look
Thank you in advance!!
###################################################################
/ CONFIGURATION STARTS HERE /
/ Step 1: enter your domain name like fruitionsite.com /
const MY_DOMAIN = 'brandenbedoya.com';
/*
Step 2: enter your URL slug to page ID mapping.
The key on the left is the slug (without the slash)
The value on the right is the Notion page ID
*/
const SLUG_TO_PAGE = {
'' : '3205056b3ce9427ebb06889fcb9a5a19',
};
/ Step 3: enter your page title and description for SEO purposes /
const PAGE_TITLE = 'Branden Bedoya technical credentials website';
const PAGE_DESCRIPTION = 'Showcasing all of Branden Bedoyas projects showcasing technical skills';
/ Step 4: enter a Google Font name, you can choose from https://fonts.google.com/
const GOOGLE_FONT = 'Montserrat';
/ Step 5: enter any custom scripts you'd like /
const CUSTOM_SCRIPT = ``;
${CUSTOM_SCRIPT}`, {
html: true
});
}
}
async function appendJavascript(res, SLUG_TO_PAGE) {
return new HTMLRewriter()
.on('title', new MetaRewriter())
.on('meta', new MetaRewriter())
.on('head', new HeadRewriter())
.on('body', new BodyRewriter(SLUG_TO_PAGE))
.transform(res);
}
Hey!
Thanks for this awesome resource. Was super easy to follow along.
Ran into a small issue - not sure if it'll get resolved in the next 24 hours or not (may take time for everything to refresh), but I figured I'd ask just in case. I had my domain name "brandenbedoya.com" previously linked to my GitHub domain of brandenbedoya.github.io Now that I followed your fruition steps, it takes me back to the Github Pages error. I made sure to go on my old GitHub website and change the Cname and anything else that was making use of the URL brandenbedoya.com. I also went on NameCheap to make sure it wasn't linked there, I only have the Cloudflare nameservers on there
The URL it's redirecting me to right now is: https://brandenbedoya.com/3205056b3ce9427ebb06889fcb9a5a19 Which is essentially the domain name, and it adds in the Notion page number at the end. So it gives an error: 404 There isn't a Github Pages site here... ################################################################## In short:
This is my Notion webpage link: https://www.notion.so/brandenbedoya/Branden-Bedoya-s-Portfolio-Website-3205056b3ce9427ebb06889fcb9a5a19 This is the URL I want to redirect it to https://brandenbedoya.com The error: This is where it's trying to redirect to (which it shouldn't be): HTTP://brandenbedoya.github.io This is where it ends up going to (a page that doesn't exist): https://brandenbedoya.com/3205056b3ce9427ebb06889fcb9a5a19
Anyway, I copied and pasted the code as the tutorial showed. I'm going to attach it here so you can take a look
Thank you in advance!! ###################################################################
/ CONFIGURATION STARTS HERE /
/ Step 1: enter your domain name like fruitionsite.com / const MY_DOMAIN = 'brandenbedoya.com';
/*
The value on the right is the Notion page ID */ const SLUG_TO_PAGE = { '' : '3205056b3ce9427ebb06889fcb9a5a19', };
/ Step 3: enter your page title and description for SEO purposes / const PAGE_TITLE = 'Branden Bedoya technical credentials website'; const PAGE_DESCRIPTION = 'Showcasing all of Branden Bedoyas projects showcasing technical skills';
/ Step 4: enter a Google Font name, you can choose from https://fonts.google.com / const GOOGLE_FONT = 'Montserrat';
/ Step 5: enter any custom scripts you'd like / const CUSTOM_SCRIPT = ``;
/ CONFIGURATION ENDS HERE /
const PAGE_TO_SLUG = {}; const slugs = []; const pages = []; Object.keys(SLUG_TO_PAGE).forEach(slug => { const page = SLUG_TO_PAGE[slug]; slugs.push(slug); pages.push(page); PAGE_TO_SLUG[page] = slug; });
addEventListener('fetch', event => { event.respondWith(fetchAndApply(event.request)); });
function generateSitemap() { let sitemap = '';
slugs.forEach(
(slug) =>
(sitemap +=
'https://' + MY_DOMAIN + '/' + slug + ' ')
);
sitemap += ' ';
return sitemap;
}
const corsHeaders = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, HEAD, POST, PUT, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type', };
function handleOptions(request) { if (request.headers.get('Origin') !== null && request.headers.get('Access-Control-Request-Method') !== null && request.headers.get('Access-Control-Request-Headers') !== null) { // Handle CORS pre-flight request. return new Response(null, { headers: corsHeaders }); } else { // Handle standard OPTIONS request. return new Response(null, { headers: { 'Allow': 'GET, HEAD, POST, PUT, OPTIONS', } }); } }
async function fetchAndApply(request) { if (request.method === 'OPTIONS') { return handleOptions(request); } let url = new URL(request.url); url.hostname = 'www.notion.so'; if (url.pathname === '/robots.txt') { return new Response('Sitemap: https://' + MY_DOMAIN + '/sitemap.xml'); } if (url.pathname === '/sitemap.xml') { let response = new Response(generateSitemap()); response.headers.set('content-type', 'application/xml'); return response; } let fullPathname = request.url.replace("https://" + MY_DOMAIN, ""); let response; if (url.pathname.startsWith('/app') && url.pathname.endsWith('js')) { response = await fetch(url.toString()); let body = await response.text(); response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response); response.headers.set('Content-Type', 'application/x-javascript'); return response; } else if ((url.pathname.startsWith('/api'))) { // Forward API response = await fetch(url.toString(), { body: request.body, headers: { 'content-type': 'application/json;charset=UTF-8', 'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36' }, method: 'POST', }); response = new Response(response.body, response); response.headers.set('Access-Control-Allow-Origin', '*'); return response; } else if (slugs.indexOf(url.pathname.slice(1)) > -1) { const pageId = SLUG_TO_PAGE[url.pathname.slice(1)]; return Response.redirect('https://' + MY_DOMAIN + '/' + pageId, 301); } else { response = await fetch(url.toString(), { body: request.body, headers: request.headers, method: request.method, }); response = new Response(response.body, response); response.headers.delete('Content-Security-Policy'); response.headers.delete('X-Content-Security-Policy'); }
return appendJavascript(response, SLUG_TO_PAGE); }
class MetaRewriter { element(element) { if (PAGE_TITLE !== '') { if (element.getAttribute('property') === 'og:title' || element.getAttribute('name') === 'twitter:title') { element.setAttribute('content', PAGE_TITLE); } if (element.tagName === 'title') { element.setInnerContent(PAGE_TITLE); } } if (PAGE_DESCRIPTION !== '') { if (element.getAttribute('name') === 'description' || element.getAttribute('property') === 'og:description' || element.getAttribute('name') === 'twitter:description') { element.setAttribute('content', PAGE_DESCRIPTION); } } if (element.getAttribute('property') === 'og:url' || element.getAttribute('name') === 'twitter:url') { element.setAttribute('content', MY_DOMAIN); } if (element.getAttribute('name') === 'apple-itunes-app') { element.remove(); } } }
class HeadRewriter { element(element) { if (GOOGLE_FONT !== '') { element.append(`
`, { html: true }); } element.append(``, { html: true }) } } class BodyRewriter { constructor(SLUG_TO_PAGE) { this.SLUG_TO_PAGE = SLUG_TO_PAGE; } element(element) { element.append(` ${CUSTOM_SCRIPT}`, { html: true }); } } async function appendJavascript(res, SLUG_TO_PAGE) { return new HTMLRewriter() .on('title', new MetaRewriter()) .on('meta', new MetaRewriter()) .on('head', new HeadRewriter()) .on('body', new BodyRewriter(SLUG_TO_PAGE)) .transform(res); }