Lambda functions are really good at returning a string of text. In this article, we will review how to create a cool personal website with nothing but functions. We won't have to worry about configuring a web server, and our content will be server-side rendered, but serverlessly.
To get started with the completed app click the button below to deploy it in 15 seconds:
Our entire page will be rendered from a single lambda function. Take a look at src/http/get-index/mod.ts
import Main from './views/main.js'
export async function handler (/*req: object*/) {
return {
statusCode: 200,
headers: {
'content-type': 'text/html; charset=utf8',
'cache-control': 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
},
body: Main({
/**
* Basic bio
*/
fullname: 'Your Name', // ← Start by adding your name!
title: 'My personal site!',
occupation: 'Artist & Photographer',
location: 'West Glacier, MT',
bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.',
/**
* Contact / social
* - Comment out any item below to remove it from your page
*/
email: 'your@email.com',
twitter: 'yourTwitter',
linkedin: 'your-linkedin-name',
instagram: 'yourInsta',
facebook: 'your-facebook-name',
/**
* Layout
*/
photographer: 'Ivana Cajina',
service: 'Unsplash',
credit: 'https://unsplash.com/@von_co',
image: '_static/background.jpg'
})
}
}
This single Lambda function takes in the information we will need to fill in the site. Notice that we can use ESM to import the Main function, which will return an HTML string to the browser.
Let's take a look at the Main function that we import.
import Styles from './styles.js'
import Symbols from './symbols.js'
import Splash from './splash.js'
import Content from './content.js'
export default function Main(props = {}) {
let title = props.title || 'Personal Website'
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
<title>${title}</title>
${Styles(props)}
<!-- Replace this with your own custom font link and edit Styles font-family -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<!-- End custom font -->
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" rel="icon" type="image/x-icon">
</head>
<body
class="
min-width-20
display-flex-large
height-100vh
overflow-hidden-large
"
>
${Symbols}
${Splash(props)}
${Content(props)}
</body>
</html>
`
}
From here the site is broken up into different modules for each component. Each component is a function that accepts props and returns an HTML string. The modules we import at the top are going to be all the styles, svg symbols, a component for the background image and accreditation, and finally the content.
The pattern found here can be traced all the way down through content.js, which contains more submodules like heading-large.js, which is the component for showing a name. Let's take a look at content.js and heading-large.js.
import LargeHeading from './heading-large.js'
import MediumHeading from './heading-medium.js'
import LocationLink from './link-location.js'
import MailLink from './link-mail.js'
import SocialMedia from './social-media.js'
import Icon from './icon.js'
export default function Content(props = {}) {
let fullname = props.fullname || ''
let occupation = props.occupation || ''
let location = props.location || ''
let bio = props.bio || ''
let email = props.email || ''
let twitter = props.twitter || ''
let linkedin = props.linkedin || ''
let instagram = props.instagram || ''
let facebook = props.facebook || ''
return `
<section
class="
display-flex
flex-direction-column
height-content
height-auto-large
overflow-auto-large
"
>
<div
class="
display-flex
align-items-center-large
justify-content-center-large
flex-grow-1
flex-grow-2-large
max-width-35
margin-right-auto
margin-left-auto
padding-48
padding-5-large
"
>
<div
class="
margin-right-auto
margin-left-auto
"
>
${LargeHeading({
children: fullname
})}
${MediumHeading({
children: occupation
})}
${LocationLink({
location
})}
<p
class="
margin-bottom-42
font-size-16
color-383D3B
"
>
${bio}
</p>
<div
class="
display-flex
flex-wrap-wrap
align-items-center
justify-content-space-between
margin-bottom-16
"
>
${MailLink({
email
})}
${SocialMedia({
twitter,
linkedin,
instagram,
facebook
})}
</div>
</div>
</div>
<div
class="
display-flex
align-items-center
justify-content-space-between
padding-top-16
padding-right-32
padding-left-32
padding-right-48-large
padding-bottom-16
padding-left-48-large
color-5A5C5B
background-color-F2F0F3
"
>
<span
class="
display-flex
align-item-center
"
>
<span
class="
margin-right-8
color-979797
"
>
Built with
</span>
<a
class="
fill-979797
fill-hover-FD6D6D
transition-fill
"
href="https://begin.com"
target="_blank"
rel="noopener"
>
${Icon({
class: 'fill-inherit',
href: 'begin',
style: 'width:4rem;height:1.2725rem;'
})}
</a>
</span>
<a
class="
display-block
padding-top-8
padding-right-16
padding-bottom-8
padding-left-16
font-size-12
font-weight-300
text-decoration-none
color-FFFFFF
border-radius-pill
background-color-979797
background-color-hover-058AEA
transition-background-color
text-transform-uppercase
"
href="https://begin.com"
rel="noopener"
target="_blank"
>
Build yours
</a>
</div>
</section>
`
}
The Content() function calls LargeHeading() and passes in the name to be rendered. Let's look at heading-large.js.
export default function LargeHeading(props = {}) {
let children = props.children || ''
return `
<h1
class="
margin-bottom-24
font-size-42
font-weight-300
color-5A5C5B
"
>
${children}
</h1>
`
}
We can follow this same pattern for the rest of the submodules in content.js where each function is returning a string template literal of HTML.
We can now get clean HTML to the front end with dynamic information constructed from a single Lambda function.
Top comments (0)