Table of Contents
Let me take you behind the technical scenes of the website, and share the incredible journey of how this online sanctuary is being pulled off without incurring a single cost.
Overview
This website is build locally on wordpress using elementor. It is hosted on Github and deployed through Netlify. The reason for this guide is two-fold:
- Inspire / help others with this knowledge.
- If you know of a better implementation or suggestion, you are most welcome to get in touch.
Futhur Implementation
- NEED HELP: Emails sent through domain goes to Gmail spam, despite having working SPF, DKIM and DMARK records.
- Autonomise Comment handling preferably via Netlify functions.
- reCaptcha v3 setup for seamless user interaction.
- Optimise js and css libraries for the generated static website
- Replace placeholders with actual content
- Improve the look and asthetics of blog posts
Features
Key features are listed below:
- Low cost static website – incredibly responsive and cheap
- reCaptcha v2 used for spam control. Its S.E.P. from now on!
- Added support for preloader and Lottie animations
Other features include –
- Custom sidebars for blog lander page and blog post.
- Added separate Table of Contents view for Mobile displays.
- Comments are notified through email pushes and has to be added manually.
- Newsletter setup with Zoho Campaigns
- Comments are notified through posts
Dummy’s guide to Creating a Similar Website
This is an attempt to decentralise website building, in case you want to build your own. This guide will take you through setting up wordpress locally, setting up the domain and hosting. This guide by no means is complete, and there are lots of useful resources (simple google it) out there if you get into any trouble.
Install WordPress locally
WordPress requires a host to run, meaning you need some place to install wordpress. The simplest way is signing up for a free account on WordPress.com where they let you great wordpress on their subdomain for free inexchange for a wordpress banner and random ad popups when users visit your website. Also you will have to eventually pay up to get more benefits of a premium user.
Advantages of locally setting up WordPress
- Access to WordPress premium features.
- No ads
- No network required when curating your website.
- For advanced users, you get access to the source files in case you wish to modify for better flexibility
Installation guide
- Download and install a local server environment such as XAMPP or WAMP on your computer (XAMPP is recommended).
- Make sure to tick MySQL.
- Once the installation is complete open the XAMPP Control panel and run Apache followed by MySQL.
- Apache and MySQL are essential for wordpress to run and has to be manually started each time you wish to work with wordpress.
- Open your web browser and navigate to
http://localhost/phpMyAdmin. - Create a new database for the WordPress website with
DatabaseNameor a name of your choice. - Repeat this each time you want to create a new website from scratch.
-
http://localhost/phpMyAdminmay be closed, but keep the MySQL running.
- Download the latest version of WordPress from the official website.
- Extract the downloaded WordPress files to the
htdocsfolder in XAMPP orwwwfolder in WAMP. - Optional – Rename the
wordpressfolder to your need. - Open your web browser and navigate to
http://localhost/wordpress(assuming you have installed WordPress in a folder namedwordpress. - Follow the on-screen instructions to complete the installation process. Enter the database name
DatabaseNamewhen required to link WordPress website with that database.
Useful WordPress Plugins
Plugins are very useful in extending / modifying behaviour of various elements in the website.
Allows for creating and editing pages without code via a visual editor.
- Although many useful features is under paywall but adding PRO Elements essentially unlocks all the features.
Simply Static is used for creating static pages from the dynamic wordpress website.
- NONE of the dynamic website features like forms, checkout pages, account creation, administrative control, etc will work. Meaning keep the local wordpress website handy to make changes as and when required.
Custom Sidebars together with Classic Widgets may be used to customise and create sidebars if your template of choice doesn’t already allow doing it.
Forms
Although static website doesn’t inherently support submitting forms, there are couple of workarounds –
- Embed a third party form say from MailChimp or Zoho (free accounts will do the job).
- Use host provided hooks like Netlify Forms
- Smart use of Github Issues (Google it if you are interested).
Due the ease of creating and maintaining Netlify forms, we have resorted to this means-
Netlify Forms
Features include real time email notification of form submissions and reCaptcha v2 or honeypot implementation to curb spam.
- Configure Netlify to detect the forms by toggling on form detecting in Forms Usage and configuration Form detection.
- Simply add the
data-netlify="true"or anetlifyattribute in the html<form>tag. - Additionally add
data-netlify-recaptcha="true"tag in the html form followed by<div data-netlify-recaptcha="true"></div>where you want to add the recaptcha. - Look at the Netlify Forms Doc for more details.
The way recaptcha is implemented in this site is slightly convoluted to make sure its not normally visible for aesthetic reasons.
<div id="hidden_content" style="display:none;">
<!-- reCAPTCHA setup starts-->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="ADD_SITE_KEY_HERE" data-callback="recaptchaCallback">
<!-- Manual implementation required for callback to enable the disabled JOIN button below-->
</div>
<!-- reCAPTCHA setup ends-->
<div class="wpforms-submit-container">
<button type="submit" class="button_style" disabled>JOIN</button>
</div>
</div>
<div class="submit-container">
<button type="button" class="button_style" onclick="document.getElementById('hidden_content').style.display = 'block'; this.style.display = 'none';">JOIN</button>
</div>- Refer Google reCAPTCHA docs to see more details on getting a site-key, code implementation, etc.
Host and Deploy
Use the Simply Static plugin for WordPress to generate static files and push it to a repository on Github. Add the repository to Netlify for auto deploy each time you push new changes to Github.
- Strictly speaking you can directly deploy the generated static zip file on Netlify without the need for Github, although the latter is suggested as a means of version control (knowing what changes where made and get backup if needed).
- Although this website is deployed on Netlify because of Netlify forms and Netlify functions features, you may as well use Github Pages, etc for the same, but will have trouble in user submitted forms (static website doesn’t know how to process forms).
De’style’eR
Last Updated: 02 Nov 2023
