In about 10 minutes, we’ll set up a workflow that makes static sites dead simple.
You’ll get the following:
Free https
Free or cheap hosting
Build sites quickly
Edit with live reload
Edit when you’ve forgotten everything in 6 months
Start: signups
We can get all this by using Netlify (really simple static hosting) along with AnyMod (100s of website sections).
Netlify signup
AnyMod signup
Set up deploy pipeline
We’ll create a basic HTML file, track it with GitHub, and then auto-deploy with Netlify.
(If you prefer a manual setup, you can skip this step and instead deploy to Netlify by dragging/dropping into the Netlify folder.)
1. Create an empty repo in GitHub.
Go to https://github.com/new and Name it netlify-anymod:
GitHub setup
2. Connect Netlify to your repo.
You will do this from the Netlify start screen.
Netlify setup
3. Create a folder on your computer and add a file named index.html.
You can run the following in your terminal to do this:
mkdir netlify-anymod
cd netlify-anymod
touch index.html
Now edit the index.html file to add some basic HTML structure:
Hello, World!
4. Track it with git and deploy to GitHub
git init
git remote add origin https://github.com/tyrw/netlify-anymod.git
git add -A
git commit -m Initial commit
git push –set-upstream origin master
Note: use your own repo URL for git remote add origin).
Check your Netlify URL after a minute or so, and your site should be live!
Live siteAdd section “mods”
Now that we have our deploy setup, we can build the page itself. We’ll do this with ready-to-use modules (“mods”) on AnyMod.
There are a lot to choose from, but we’ll use mods from the Editorial theme:
Navigation
(View this mod)
Intro / Hero unit
(View this mod)
Form
(View this mod)
Image gallery
(View this mod)
Clone and add mods
Add these mods by clicking “Clone” for each one and then scroll down and copy/paste the installation code into the index.html file. Also copy and paste your project script at the top.
Your index.html should now look something like this:
And the page is ready to go.
Now save and push to GitHub to deploy the site:
git add -A
git commit -m Added mods
git push origin
Wait a minute, and your site should be ready to use. Here is the demo page.
See Demo
Editing content
Now you can live edit the content and code for each mod. When viewing your own page (while also logged into AnyMod), you see a pencil on the right side:
AnyMod pencil
Click the pencil and choose a mod. Now try making some edits to the content (or code) and notice that it updates on the page automatically in real time.
AnyMod live edit
You can use this method to make edits now or in 6 months when you’ve forgotten how the project is set up.
Form
The form also works automatically. Try submitting a message on your own page; the response will be emailed to you right away.
Conclusion
You now have a great way to build fast, reliable, secure static sites.
Remember: with great power comes great responsibility.