May 17, 2021 by Law Aritao

Coffee and Creativity

blog-feature-image

Build Awesome Static Sites.

The term “static site” has come to mean a web site that contains only HTML, CSS, and JavaScript. A static site does not need server-side applications such as PHP or Python. Static sites are usually simpler and quicker to build than their dynamic counterparts, requiring minimal resources to maintain and deploy.

This site, Coffeeandthis.com, is built as a static site. It is hosted without charge on the content delivery network of Cloudflare. Here’s how you can create similar site:

Part 1. Launch a customizable site in 3 steps:

Step 1. CREATE accounts on Github.com and Cloudflare.com. You will need an email address to do this.

Git hub is a platform to host and share code. It tracks all changes to your code, so you can work without fear of breaking things. Cloudflare is a set of services for site security, content delivery, and static site hosting.

Step 2. Go to Github.com and CREATE a repository based on a pre-made template. See the link in the description for the starter template used in this video.

Press Use This template to start the process.

Step 3. Launch the site on Cloudflare Pages.

Navigate to the Pages section. Create a project and authorize Cloudflare to use your Github repositories.

Enter the following: Hugo as your framework. For Environmental Variables, Enter: HUGO_VERSION and 0.81.0. Hit deploy. Wait for the build to complete, and visit the site’s URL once deployed.

There you go! Your site is up.

Part 2. Customize your site in 2 steps:

  1. On Github.com, edit the config file so that the site details match your preferences.

Click on the config file. Hit the pencil button. By editing the code, you can change the site title author, and social links here. Follow the syntax carefully. Save the changes by committing them.

  1. Sit back and watch Cloudflare deploy your customizations.

Congratulations, you have just customized your site.

Part 3: Connect Forestry.io to your site so you can author posts through a content management system (CMS).

Step 1. Sign up at Forestry.io with your Github account.

Step 2. Connect your site. You will need to authorize Forestry.io to use your repositories. You can customize what will be shown on your CMS sidebar, or go with the defaults.

Under general settings, specify the admin section on your site by typing forward slash static, forward slash, admin in the Admin Path field. Click deploy admin.

Save changes and check your project on Cloudfare Pages. It should automatically deploy the latest version of your site.

Step 3, , visit your site admin by adding forward slash to its address.

Log in with your Github.com account.

Congratulations, You can now author and tweak content on your site through a clean and gorgeous CMS.