/boilerplate

Boilerplate for building HTML Websites

Primary LanguageHTML

Boilerplate

Summary

This is a boilerplate for minimal HTML Websites with optional backend functionality provided via Vercel's serverless functions. Code is in a public repository on GitHub and hosting can be done either via GitHub Pages or via Vercel. Vercel builds and deploys after every commit to GitHub.

Dependencies

  • Node.js
  • Vercel CLI (optional)

How to use

git clone https://github.com/smohadjer/boilerplate.git
cd boilerplate
npm install
npm run build --> builds a production ready version in public folder
npm start --> runs a local server on port 5000 and watches file for changes
npm start-prod --> runs a local server on port 3001 for testing production version
vercel dev --> runs a local server on port 3000, use for testing serverless functions in api folder

Using local build package

If you need to test changes to build files, update devDependencies in package.json so it refers to your local build folder instead of the one on GitHub:

	"devDependencies": {
		"build": "file:../build"
	}

Favicon and touch icons

Use https://redketchup.io/favicon-generator to generate and add favicons and shortcut icons for touch devices. Select Generate the favicon from text, use Open Sans as font, set font-size to 100 and bold and colors matching color scheme of website you are building. If you wish to use round corner note that Apple doesn't allow it in touch icons, so you need later to replace Apple touch icon with a one without a round courner. Download zip, unzip folder and copy/paste files to root of the website. These files will be copied to dist folder during build. You also need to add below snippet to heard of your pages:

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">

Hosting your Website via GitHub Pages

By default a site hosted on GitHub Pages is available at https://username.github.io/repository/. If you wish to use a custom domain for your site you need to add CNAME and A records as described at: https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain

In short you need two changes:

  • Add an A record to your DNS so domain yourdomain.com points to following ip numbers:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
  • Add a CNAME record to your DNS so that the subdomain www.yourdomain.com or any other subdomain you wish to use directs to yourusername.github.io.

Instructions for updating DNS settings on hover.com: https://dev.to/nickymarino/pointing-a-github-pages-repo-to-a-hover-domain-105e

Use dig command in terminal to find out if your DNS changes have propagated: dig myapexdomain.com +nostats +nocomments +nocmd

Updating Website on GitHub

Editing an existing page

To edit an existing page, go to your repository, make sure Code tab is selected and that you are on master branch. In directory listing go to app/content/pages and select the page that you wish to edit, click Screenshot 2023-01-27 at 11 37 48 button and start editing the content of the file. When done, press Screenshot 2023-01-27 at 11 32 20 button and your changes will be live in a few minutes.

Adding a new page

To add a new page on Github an easy way is to copy content of an existing page and paste it in a new page and then edit the new page. To do this go to one of the pages in app/content/pages folder and then click on Screenshot 2022-11-24 at 21 46 27 with label Copy raw contents. Then go to back to pages folder and click the Add file button and select Create new file and paste the content you had copied inside it and start editing the content. When done, press Screenshot 2022-11-24 at 21 47 56 button and the new page will be live in a few minutes.